What do I need to use Frontend Design?

What's being built; Brand constraints; The framework target.

Is Frontend Design free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Frontend Design

Q: How do I know the Frontend Design output is good?

The skill verifies itself against its own quality checks: Every spacing value in the code exists on the declared scale — zero ad-hoc paddings; One accent color, findable in ≤3 uses; body text contrast ≥4.5:1; Hover, focus-visible, disabled, empty, and loading states all present and styled; The "look here first" test passes — hierarchy is felt without instruction.

🔵 Stable🕐 updated 2026-07-03 🔷 SkillSpec L3 pm-design

Produce frontend UI that actually looks designed — a working spacing/type system, deliberate color use, real states, and restraint — instead of the generic AI-generated interface. Use when asked to build or restyle a UI, landing page, dashboard, or component, when output 'works but looks like a prototype', or to establish the visual system for a new app. Produces working HTML/CSS (or framework components) built on an explicit token system, with hover/focus/empty/loading states included. For critiquing an existing design use design-critique; for auditing a design system use design-system-audit.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

What to give it

▸What's being built — and its emotional register (dense pro tool? calm consumer? playful?)

▸Brand constraints — if any (colors, fonts, an existing product to match) — else the skill picks a deliberate palette and says so

▸The framework target — (vanilla/React/Vue/Tailwind) — vanilla single-file is the default demo form

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓Every spacing value in the code exists on the declared scale — zero ad-hoc paddings

✓One accent color, findable in ≤3 uses; body text contrast ≥4.5:1

✓Hover, focus-visible, disabled, empty, and loading states all present and styled

✓The "look here first" test passes — hierarchy is felt without instruction

✓Tested mentally against real content: the long name, the zero state, the overflow

⚠️ What it refuses to do

Do not decorate before systematising — tokens first, UI second, or consistency is luck

Do not spend the accent everywhere — a UI where everything is highlighted has no hierarchy, just noise

Do not ship default focus rings removed with nothing in their place — that's not minimal, it's broken

Do not design only the happy state — empty/loading/error are where users actually judge the product

Do not mix density registers — a marketing hero above a data grid needs a deliberate seam, not a collision

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Start with

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="frontend-design"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Frontend Design is one of 731 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog