Frontend design skills for Claude Code, Codex and other agents

Frontend Design is the focused choice for a new visual direction, while Impeccable fits a longer workflow that includes planning, critique, audit and polish. We compared 6 frontend design skills by job, license, documented agents, installation routes and source-update date. UI UX Pro Max builds a saved design system, shadcn works with components, and Web Design Guidelines audits existing files. We read the source material but did not run the skills on a project. Repository source updates were checked on 2026-10-02 and 2026-10-03.

Frontend Design: choose a visual direction

Frontend Design is Anthropic's Apache-2.0 agent skill for a landing page or app screen that needs a visual direction before code is built. Its strength is focus: it asks the agent to connect palette, typography and layout to the subject and audience, then plan, build and critique the result. Its limit is review scope: for accessibility and UX checks of existing UI code, we point to Web Design Guidelines instead. Anthropic documents Claude Code, Claude.ai and the Claude API. Install it for an Agent Skills reader with npx skills add anthropics/skills --skill frontend-design; Claude Code also has the publisher route /plugin marketplace add anthropics/skills, followed by /plugin install example-skills@anthropic-agent-skills, which installs Anthropic's other example skills too. The source folder was last updated on 2026-09-03, checked on 2026-10-03.

Details: Frontend Design on CookiesForAI

Impeccable: plan, audit and polish in one workflow

Impeccable is Paul Bakaus's Apache-2.0 agent skill for teams that want design planning, critique, audit and polish behind one entry point. Its strength is breadth: the README listed 24 commands and 61 deterministic detector rules when read on 2026-10-01. Its limit is setup, because the launcher needs network access on first run to download its engine unless that binary ships beside it. The publisher documents Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, Grok Build, Hermes Agent, OpenCode and any agent that reads SKILL.md through the skills CLI. Install it with npx skills add pbakaus/impeccable --skill impeccable; publisher routes include npx impeccable install. In Claude Code, run /plugin marketplace add pbakaus/impeccable, then install Impeccable from /plugin. The source folder was last updated on 2026-10-02, checked on 2026-10-02.

Details: Impeccable on CookiesForAI

Design taste frontend: direct landing-page style

Design taste frontend is Leon Lin's MIT agent skill for landing pages, portfolios and redesigns that need explicit style controls. Its strength is a compact design read that sets the audience, visual language and design system before code, with separate controls for variance, motion and density. Its limit is product scope: the skill rules out dashboards, data tables and multi-step product UI, and v2 is described as experimental. The publisher documents Codex, Cursor, Claude Code and any agent that reads SKILL.md through the skills CLI. Install the current skill with npx skills add Leonxlnx/taste-skill --skill design-taste-frontend; the publisher also keeps the route npx skills add Leonxlnx/taste-skill --skill design-taste-frontend-v1 for the original version. The source folder was last updated on 2026-05-26, checked on 2026-10-02.

Details: Design taste frontend on CookiesForAI

UI UX Pro Max: generate a saved design system

UI UX Pro Max is Next Level Builder's MIT agent skill for choosing and saving a design system from a local searchable library. Its strength is reusable direction: the agent can generate style, palette, font, effects and a checklist, then persist those decisions for later sessions. Its limit is portability work, because its search commands use Claude Code's ${CLAUDE_PLUGIN_ROOT} and other agents must point Python at the installed search.py; Python 3 is required. The publisher documents Claude Code, Cursor, Windsurf, Codex CLI, Gemini CLI, GitHub Copilot, Kiro, OpenCode and any agent that reads SKILL.md through the skills CLI. Install it with npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max. In Claude Code, run /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill, then /plugin install ui-ux-pro-max@ui-ux-pro-max-skill. The source folder was last updated on 2026-09-27, checked on 2026-10-02.

Details: UI UX Pro Max on CookiesForAI

shadcn: compose and maintain components

shadcn is the shadcn/ui project's MIT agent skill for projects that want the agent to build and maintain interfaces from shadcn/ui components. Its strength is project awareness: it reads components.json, then uses the shadcn CLI to find, add and update components while respecting the project's framework, aliases, base library and icons. Its limit is equally specific: it is not for projects that do not use shadcn/ui. The publisher documents Claude Code and any agent that reads SKILL.md through the skills CLI, although its live context command uses a Claude Code feature and other agents must run the information command themselves. Install it with npx skills add shadcn-ui/ui --skill shadcn; the shadcn/ui documentation also gives npx skills add shadcn/ui, which installs the repository's skills rather than only shadcn. The source folder was last updated on 2026-09-04, checked on 2026-10-02.

Details: shadcn on CookiesForAI

Web Design Guidelines: audit existing UI files

Web Design Guidelines is Vercel's agent skill for reviewing existing UI files for accessibility, UX and interface-rule problems. Its strength is actionable output: the agent fetches Vercel's current guidelines and reports findings grouped by file and line. Its limit is the same fetching step, because an agent without web access cannot load the rules. The license is MIT, stated only in the repository README; the repository has no license file. Vercel documents any AI coding agent that reads Agent Skills through the skills CLI; the instructions name Claude Code's WebFetch tool, but any agent able to fetch a URL can follow them. Install it with npx skills add vercel-labs/agent-skills --skill web-design-guidelines; the publisher route npx skills add vercel-labs/agent-skills installs all Vercel skills. The source folder was last updated on 2026-01-16, checked on 2026-10-02.

Details: Web Design Guidelines on CookiesForAI

How we compared

The comparison separates four jobs: setting design direction, creating a reusable design system, composing library components and auditing finished UI. We read each skill's cited source material, then compared license, exact install routes, publisher-documented agents, requirements, limits and source-update dates. Repository source updates were checked on 2026-10-02 and 2026-10-03. We did not install these skills together, run them on a real interface, or measure the visual quality of their output.

How to choose

• If the page has no visual direction yet, start with Frontend Design or Design taste frontend.
• If one workflow should carry UI from product context through audit and polish, choose Impeccable.
• If the design decisions must persist across sessions, choose UI UX Pro Max.
• If the project already uses shadcn/ui, choose shadcn for component work.
• If the interface already exists and needs a file-by-file review, choose Web Design Guidelines.