Claude Code Frontend Skills

The frontend design stack for Claude Code, in one marketplace. The best
frontend design skills, plugins and agents for Claude Code, curated,
de-conflicted and synced weekly from upstream:

• frontend-design by Anthropic
• Impeccable by Paul Bakaus
• UI UX Pro Max by Next Level Builder
• Taste by Leonxlnx
• Hallmark by Nutlope (Together AI)
• Emil Kowalski's skills (design engineering and animation)

Plus a small glue plugin, frontend-stack, that makes them work
together: a router skill that picks the right skill for each task, a written
ruling for every rule the packs disagree on, and two agents
(design-director, ui-reviewer).

Português

Why this exists

Each of these packs is great alone, and each one assumes it is the only design
skill installed. Install all five by hand and Claude loads four rulebooks for
the same "build me a landing page" prompt, and they disagree:

• Taste's classic presets want perpetual micro-motion; Emil Kowalski asks
  whether it should animate at all and keeps UI motion under 300 ms.
• Taste v2 now also claims dashboards and app screens, where product UI is
  better led by frontend-design; nothing decides who leads.
• Impeccable and Taste's classic Stitch skill both write DESIGN.md, in different
  formats.
• One Taste preset uses purple mesh gradients that another Taste skill bans.
• Aesthetic presets (minimalist, brutalist, "expensive") trigger on every UI
  task and average each other into generic output.

This repo fixes that:

Install

In Claude Code:

/plugin marketplace add JaimeJunr/claude-code-frontend-skills

Then install the core stack:

/plugin install frontend-stack@frontend-stack
/plugin install frontend-design@frontend-stack
/plugin install impeccable@frontend-stack
/plugin install ui-ux-pro-max@frontend-stack
/plugin install taste@frontend-stack
/plugin install hallmark@frontend-stack
/plugin install emil-design-eng@frontend-stack

Optional extras:

/plugin install taste-classics@frontend-stack
/plugin install taste-imagegen@frontend-stack
/plugin install emil-native@frontend-stack
/plugin install design-mobile-apps@frontend-stack
/plugin install hyperframes@frontend-stack

design-mobile-apps calls the paid sleek.design API (SLEEK_API_KEY) and sends
your brief there. hyperframes (HeyGen) renders HTML to video for product
demos, hero clips and captions; it needs Node 22 and the hyperframes CLI.

Remotion (video as React components) is not vendored: its skills repo has no
license file and Remotion itself needs a paid company license for for-profit
organizations above 3 people. Install its own skills with
npx skills add remotion-dev/skills; the router uses them when present.

Already have one of these installed from its original repo? Uninstall that
copy first so the skill is not loaded twice.

Every plugin is independent. Install only the ones you want; the router
falls back gracefully when a pack is missing.

For a team project

To share the stack with everyone on a repo, commit this to
.claude/settings.json:

{
  "extraKnownMarketplaces": {
    "frontend-stack": {
      "source": {
        "source": "github",
        "repo": "JaimeJunr/claude-code-frontend-skills"
      }
    }
  },
  "enabledPlugins": {
    "frontend-stack@frontend-stack": true,
    "frontend-design@frontend-stack": true,
    "impeccable@frontend-stack": true,
    "ui-ux-pro-max@frontend-stack": true,
    "taste@frontend-stack": true,
    "hallmark@frontend-stack": true,
    "emil-design-eng@frontend-stack": true
  }
}

Enabled is not installed. That file says which plugins the project wants.
The install itself is recorded per machine in
~/.claude/plugins/installed_plugins.json, which is not in git. So on every
new machine (a teammate, a fresh laptop, CI), the plugins show up as enabled
but do not load until they are installed there once. From the repo root:

for p in frontend-stack frontend-design impeccable ui-ux-pro-max taste hallmark emil-design-eng; do claude plugin install "$p@frontend-stack" --scope project; done

The command may rewrite the formatting of .claude/settings.json without
changing its content; git checkout .claude/settings.json keeps the diff
clean. Then check with claude plugin list and start a new session: plugins
load when a session starts, so the one you ran the install from will not see
them.

What's inside

How to use it

You do not need to name skills. Ask for the work and the router picks:

Build a landing page for a coffee subscription startup
Redesign our settings page, it feels cluttered
Audit the checkout flow before we ship
The dropdown animation feels off, fix it
Which palette and font pairing fit a fintech dashboard?

Or call things directly:

/impeccable shape     plan UX before code
/impeccable audit     accessibility, performance, responsive
/impeccable polish    final pass before shipping

Or use the agents:

• design-director: turns a vague brief into a one-page direction (type,
  color, layout, motion, libraries), grounded in a reference board and
  product-specific concept devices before UI code.
• ui-reviewer: one prioritized review that combines Impeccable's audit,
  Emil's motion review and screenshot-backed anti-template checks. Read-only.

For a product with no brand, the router runs product context and naming,
reference research, concept directions and a user pick, then brand and tokens
before the landing. Personality or AI-made complaints can replace the affected
visual world even when DESIGN.md exists. New marketing pages use Impeccable's
direction contract and desktop/mobile finish gate. See the
identity flow,
developer-tool landing patterns,
the landing anatomy
questions every page answers, and the reference gallery
of inspected modern sites (OpenRouter, Vercel, Cloudflare, Rerun, Linear,
PostHog, SpaceX, plus payments and education: Wise, Stripe, Nubank, Khan
Academy, Duolingo and more), grouped by the problem each one solves.

Which skill leads

frontend-design is the base: loaded on every frontend task, whoever leads.

Full routing table in the router skill.

Keeping up with upstream

Everything under plugins/ except frontend-stack is generated from
stack.json by scripts/sync.py. A GitHub
Action runs it every Monday and opens a PR when an upstream changed, so you
get new skills and fixes without watching five repos. Pinned commits are in
UPSTREAM.lock.

The Action opens that PR with the SYNC_TOKEN secret, a fine-grained token
with Contents and Pull requests write access to the repo. Without it, the PR
is opened with the default token, which does not trigger CI, so the required
validate check never runs.

python3 scripts/sync.py          # pull upstreams and rebuild
python3 scripts/sync.py --check  # validate only

Contributing

Suggest a skill, a routing change or a new conflict ruling in an issue or PR.
See CONTRIBUTING.md. A skill gets in if it is actively
maintained, permissively licensed, and does something the stack does not
already cover.

Credits and licenses

All credit for the bundled skills goes to their authors. Each plugin keeps its
upstream license file; the list of sources, licenses and every modification is
in THIRD_PARTY_NOTICES.md. The glue plugin and
scripts are MIT.

If this saves you time, star the original repos too.

Keywords: Claude Code plugins, Claude Code skills, Claude skills frontend,
frontend design skill, UI design AI, UX design Claude, design system, Tailwind,
shadcn/ui, React, Next.js, web animation, anti AI slop, agent skills,
Claude Code marketplace.