How to choose a frontend skill

If you want a Grok Bot to handle a phone line, renewals, or posts, start at Grok Bot playbooks. Those pages are instructions we write. This guide is for picking an interface 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 paste the file into Grok Bot or install it.

Start from the job

If you know the work — a new interface, a dashboard, shadcn components, React on the web, Three.js, motion, pixel art, Tailwind, accessibility, image to code, WordPress, Remotion, or 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.
• top-design — Awwwards-level landings and brand experiences with scroll storytelling. 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. Vue 3 work uses the vue listing (JetBrains-curated), not the React task.

Tailwind vs UnoCSS

Tailwind files live on the Tailwind task. If the project is already on UnoCSS, install unocss from that same comparison — do not load both utility engines for one job.

Diagrams and DESIGN.md from a URL

diagram-design is for branded architecture and editorial diagrams, not product screens — indexed, not on a short comparison list yet. Capturing a live site into DESIGN.md is web-to-design-md on the image-to-code task.

Motion

Interface animation is its own short list: the motion task. animate writes web motion. expo-animation is the Expo / React Native file. review-animations reviews a diff. motion-design is the direction brief. gsap-core is for a GSAP stack. Programmatic Remotion video is the Remotion task, not this list.

Remotion

Code-driven video is the Remotion task. remotion-create scaffolds a project. remotion-markup writes compositions. remotion-render exports. remotion-best-practices is the official router and stays in the index.

Pixel art

Sprites on a grid are their own short list: the pixel art task. The four files in willibrandon/pixel-plugin talk to Aseprite through MCP (a live tool connection, separate from the skill file). pixel-art-studio draws in Python with Pillow and does not need that server. canvas-design is posters and static PNG/PDF art; algorithmic-art is p5.js generative work. Those stay in the index until there are enough distinct files for a canvas comparison.

Tailwind

Utility CSS and token systems are the Tailwind task. tailwind-design-system builds a v4 system. tailwind-4-docs is a local docs snapshot. tailwindcss is a utility-class reference. shadcn often sits on Tailwind, but the shadcn task is the CLI playbook.

Accessibility

WCAG and assistive-tech work is the accessibility task. accessibility is Addy Osmani’s Lighthouse-led audit. accessibility-compliance implements inclusive UI. wcag-audit-patterns and screen-reader-testing cover structured audits and VoiceOver/NVDA/JAWS. Safety Pass on a listing is still a text search, not an audit of your product.

Image to code

Screenshot or mockup to frontend is the image to code task. Image To Code generates section images first, then builds. screenshot-to-html clones into HTML with a render loop. 750px Image To Code locks a 750px board and cutouts. web-clone-prompt writes a clone prompt before code. design-dna and extract-design-system stay in the index for JSON profiles and URL tokens.

WordPress

Block themes and WordPress product UI are the WordPress task. wp-block-themes is theme.json, templates, and the Site Editor. wpds is the WordPress Design System for admin and editor UI. wp-patterns is block patterns in markup. Plugin-directory and PHP tooling files are not this job.

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. For Grok Bot, paste the file. For Claude Code, Cursor, or Codex, 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.