How to choose a frontend skill

A skill is a SKILL.md the agent may load when the task matches the YAML description. Two files that both say “use when making UI” will fight. MeloSkill groups overlapping files on task pages so you can see the difference before you install.

Start from the job

If you know the work — a new interface, a dashboard, shadcn components, React on the web, Three.js, React Native — open that task. Each short list is a few files, each with a “when” line and a longer contrast. That contrast is ours. The SKILL.md on the listing is the author’s.

If you already have a name, open the listing. The paragraph under the title is our take: when this skill is for. The author’s description field — the text the agent matches on — is at the top of the SKILL.md on that page. The other skills for that job are on the linked task page. If the skill is only in the index, that paragraph says why.

Blank page, product UI, taste, second pass

These four overlap more than any other set. Install one default, not all four.

• frontend-design — Anthropic’s general brief against a templated UI. Use it when the page does not exist yet and the agent must choose type, color, and motion on purpose.
• web-design-guidelines — Vercel’s interface rules for product surfaces: spacing, density, hierarchy. Use it for an app screen, not a marketing landing.
• taste-skill — a taste playbook when the prompt is “make it look designed.” Skip it for dense admin UI.
• impeccable — a craft pass on an interface that already exists. It is not the file for inventing a visual identity from a blank page.

Full comparison: the frontend design and taste tasks.

shadcn and UX structure

shadcn is the component CLI playbook. Use pick-ui-library if the project has not chosen a kit yet, and composition-patterns if the agent wraps every primitive in a new abstraction. ui-ux-pro-max is the broader UX brief — structure and screens — not a substitute for the shadcn CLI file. See the shadcn and UI/UX tasks.

React on the web vs React Native

Web React lives on the React task: react-best-practices, composition, view transitions. Native work is a different short list: React Native compares Expo UI files and Callstack’s best-practices. Do not install the web React set for a native app.

Three.js chapters

The Three.js task compares five files. The rest of that repo stays in the index as extra chapters (materials, lighting, loaders, and so on). Read them when the job is that topic; do not treat every chapter as a second default.

Then read the file

Contrast tells you which listing to open. The SKILL.md tells you what the agent will follow. Check the last change to this file, the license, and whether the folder ships scripts — the evaluation guide is the checklist. Install with the command on the listing, from GitHub, as in how to install.

If a listing looks wrong, or a file should be on a short list and is not, email [email protected]. How we pick and date files is on Methodology.