YouTip

In the previous content, we have learned about OpenCode and skills. If you haven't read it yet, you can refer to: Next, we will introduce how to use skills in OpenCode. There are many ready-made skills available on the market now, which we can directly use. We can find more skills at [https://skills.sh/](https://skills.sh/). Installation method: npx skills add **Note:** If you are not familiar with npx, you can refer to: (#) * * * ## ui-ux-pro-max Next, we will demonstrate using the ui-ux-pro-max skill. Address: [https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max](https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max). UI/UX Pro Max is an AI design intelligence skill (AI Skill) that provides structured design knowledge and automated assistance for building professional-grade user interfaces (UI) and user experiences (UX). It is mainly used for integration with AI coding assistants (such as Claude Code, Cursor, Windsurf, etc.). UI/UX Pro Max includes a searchable design database that can intelligently recommend interface styles, color schemes, typography, and component implementation methods based on natural language prompts. Installation command: npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max During the installation process, you can check the environment we need, such as OpenCode: !(#) Next, select the current directory, which is the opencode-tutorial-test we created earlier. The other option Global is for global installation: !(#) Next, just press Enter all the way through. Use the opencode command to open OpenCode, and type /ui to see the installed skill: !(#) Next, we can directly enter our requirements: Build a landing page for pet grooming services, with a lively and friendly style, and set up a reservation-type call-to-action button. The AI will automatically call the skill we installed to design. Just press Enter all the way through: !(#) Next, it automatically generates directories and files: !(#) Then check the final result, it looks much better: !(#) * * * ## remotion-best-practices Next, we will demonstrate using the remotion-best-practices skill. * Opencode: One responsible for automating the AI coding workflow * remotion-best-practices: One responsible for generating videos directly using React remotion-best-practices is a specialized skill for Remotion, containing dozens of rule files (based on official best practices), such as: * 3D content * Animation basics * Media import (images, audio, fonts) * Subtitles and subtitle synchronization * Sequence and scene organization * Transparent video and editing * Text animation & interpolation methods ... Skill address: [https://skills.sh/remotion-dev/skills/remotion-best-practices](https://skills.sh/remotion-dev/skills/remotion-best-practices) ### Installation and Usage Before starting, let's create a directory opencode-tutorial-test: mkdir opencode-tutorial-test cd opencode-tutorial-test In the opencode-tutorial-test directory, we can use the npx command to install: npx skills add remotion-dev/skills !(#) During the installation process, you can check the environment we need, such as OpenCode: !(#) Next, select the current directory, which is the opencode-tutorial-test