New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Design

by mohitagw15856 in mohitagw15856/pm-claude-skills

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.

MITAuto-check passedFrontend & Design

Install Frontend Design

skills CLI
$ npx skills add mohitagw15856/pm-claude-skills --skill frontend-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install mohitagw15856/pm-claude-skills frontend-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-design .claude/skills/frontend-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-design
GitHub stars
1.4k
Token cost
~1.4k tokens
SKILL.md length
685 words
Files
1
Skills in repo
1,348
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 5 steps: Type scale, one ratio. Pick a base… → Spacing on a single scale. 4-or-8px… → Color as roles, not decoration. Define… → …
  • Output works but looks like a prototype
  • SKILL.md covers What This Skill Produces, Required Inputs, The System (build this first,… and The Craft Moves (what…, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Design is an agent skill from mohitagw15856/pm-claude-skills. 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…

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Frontend development, Landing pages and Design review and critique. The repository describes itself as: 1255 professional Agent Skills for Claude, ChatGPT, Gemini, Cursor & Codex — PRDs, postmortems, leases, medical bills, layoffs, go-bags, new countries. Plain markdown, MIT, in… The licence is MIT.

When your agent uses it

  • Output works but looks like a prototype
  • Establish the visual system for a new app

Example prompts

  • “works but looks like a prototype”
  • “/frontend-design”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Type scale, one ratio. Pick a base (16px) and a ratio (1.25 for product UI, 1.333 for marketing); derive 5-6 sizes max. Two font families…
  2. Spacing on a single scale. 4-or-8px base: 4/8/12/16/24/32/48/64. Every margin/padding/gap comes FROM the scale — the #1 tell of undesigned…
  3. Color as roles, not decoration. Define roles: bg / surface / border / text / text-muted / accent / danger / success. ONE accent, spent…
  4. Depth and shape, one voice. 2-3 shadow levels, 2 radius values — used consistently by element class (inputs share a radius; cards share a…
  5. Motion with restraint. 120-200ms ease-out on hover/expand; prefers-reduced-motion respected; nothing bounces in a pro tool.

What it can do on your machine

Read from SKILL.md and the folder at commit 1cbf1f0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Design loads about 1.4k tokens when it runs. Until then it costs about 154 tokens; SKILL.md has 685 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~154
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mohitagw15856/pm-claude-skills at commit 1cbf1f0, republished under its MIT licence (© mohitagw15856). 685 words, ~1,357 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-design/SKILL.md (or your agent's skills folder).
name
frontend-design
description
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.

Frontend Design Skill

AI-generated UI has a recognisable smell: default blues, five different paddings, everything the same visual weight, no states. This skill produces interfaces that look decided — by making the decisions explicit as a token system, then spending contrast deliberately instead of everywhere.

Not quite this? Use frontend-design-pointer when you want Anthropic's upstream frontend-design skill instead of this library's.

What This Skill Produces

  • Working UI code (single-file HTML/CSS or framework components) built on an explicit token block
  • The token system: type scale, spacing scale, color roles, radius/shadow levels — small and consistent
  • The states: hover, focus-visible, active, disabled, empty, loading, error — designed, not defaulted

Required Inputs

Ask for (if not already provided):

  • 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 System (build this first, then the UI)

  1. Type scale, one ratio. Pick a base (16px) and a ratio (1.25 for product UI, 1.333 for marketing); derive 5-6 sizes max. Two font families ceiling (one is usually right); weight does hierarchy work before size does.
  2. Spacing on a single scale. 4-or-8px base: 4/8/12/16/24/32/48/64. Every margin/padding/gap comes FROM the scale — the #1 tell of undesigned UI is seventeen distinct paddings. Related things sit closer than unrelated things (proximity is free information design).
  3. Color as roles, not decoration. Define roles: bg / surface / border / text / text-muted / accent / danger / success. ONE accent, spent where attention belongs — the primary action, the active state, the number that matters. The 90% of a designed UI is neutrals; if everything is colorful, nothing is. Check text contrast (4.5:1 body, 3:1 large) as you pick, not after.
  4. Depth and shape, one voice. 2-3 shadow levels, 2 radius values — used consistently by element class (inputs share a radius; cards share a shadow). Mixed radii on sibling elements reads as accident, because it is.
  5. Motion with restraint. 120-200ms ease-out on hover/expand; prefers-reduced-motion respected; nothing bounces in a pro tool.

The Craft Moves (what separates designed from default)

  • Hierarchy by subtraction — make everything quieter, then raise ONLY what matters: the page should answer "look here first" without arrows
  • Real content shapes — design with a long name, a zero, a 47-item list; lorem-ipsum layouts break on contact with reality
  • The states are the interface — empty states teach ("no reports yet — create your first"), loading states hold layout (skeletons, not spinners-in-a-void), focus-visible is styled (keyboard users see where they are), errors say what to DO
  • Alignment is invisible until broken — one grid, edges that line up, numbers right-aligned in tables
  • Density matches the job — dashboards earn compactness; marketing earns whitespace; mixing registers is the "prototype feel"
Show full SKILL.md (221 more words)Show less

Output Format

  1. The token block first (CSS custom properties / theme object) with one line on each decision ("accent used 3 places only")
  2. The working code, componentised sensibly, states included inline
  3. A design-decisions note (5-8 lines): register chosen, where the accent is spent, what was deliberately left quiet

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
  • Tested mentally against real content: the long name, the zero state, the overflow

Anti-Patterns

  • 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

Example Trigger Phrases

  • "Build a landing page that looks designed."
  • "Restyle this UI."
  • "Make this dashboard look less generic."
  • "Establish the visual system for a new app."

© mohitagw15856, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/frontend-design of mohitagw15856/pm-claude-skills.

Open the folder on GitHubat commit 1cbf1f0

Compare with similar skills

Frontend Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Design this skillmohitagw15856/pm-claude-skills1.4k—~1.4kAutomated safety check: PassMIT
Frontend Designudecode/plate17k—~3.6kAutomated safety check: PassCustom licence
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Bryl Minimal Designbryllim/bryl-minimal-design115—~2.9kAutomated safety check: PassMIT
Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas401—~9kAutomated safety check: PassNone
Frontend DesignYYH211/Claude-meta-skill2821 repos~2.2kAutomated safety check: PassMIT

Similar skills

  • Frontend Design

    udecode/plate

    Build web interfaces with genuine design quality, not AI slop.

    17k GitHub stars~3.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Bryl Minimal Design

    bryllim/bryl-minimal-design

    Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…

    115 GitHub stars~2.9k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Super UI UX Design

    syahiidkamil/Software-Engineer-AI-Agent-Atlas

    Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…

    401 GitHub stars~9k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Design

    YYH211/Claude-meta-skill

    Creates unique, production-grade frontend interfaces with exceptional design quality.

    282 GitHub starsUsed in 1 repo~2.2k tokens
    Frontend & DesignAuto-check passed

  • Design Craft

    kipperacademy/skillpper

    Opinionated product-design skill for building, reviewing, polishing, and iterating on landing pages, apps, dashboards, AI products, design systems, and brand touchpoints.

    149 GitHub stars~3.8k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from mohitagw15856/pm-claude-skills

All 1,348 skills in this repo

  • Car Tco

    mohitagw15856/pm-claude-skills

    Compare the total cost of car ownership across buy-new, buy-used, lease, and keep-your-current-car — depreciation, insurance, maintenance ramp, and fuel over a real horizon, not just the monthly…

    1.4k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Cs Health Scorecard

    mohitagw15856/pm-claude-skills

    Build a customer health scorecard for a specific account. An agent skill from mohitagw15856/pm-claude-skills.

    1.4k GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed

  • Exit Waterfall

    mohitagw15856/pm-claude-skills

    Compute who gets what at each exit price from a cap table — liquidation preferences, conversion points, and where the founders' share collapses.

    1.4k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Feature Prioritisation

    mohitagw15856/pm-claude-skills

    Apply prioritisation frameworks (RICE, MoSCoW, Kano, ICE, Opportunity Scoring) to rank features and backlog items.

    1.4k GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • Fire Number

    mohitagw15856/pm-claude-skills

    Compute a financial-independence (FIRE) target and years-to-reach with every assumption labeled as an assumption — plus a sensitivity table instead of a single false-precision answer.

    1.4k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Freelance Rate

    mohitagw15856/pm-claude-skills

    Derive a freelance day/hourly rate backwards from target income, honest billable utilization, overhead, and the self-employment tax premium — the arithmetic that proves a rate is not salary÷2000.

    1.4k GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Frontend Design

What does Frontend Design do?

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. Frontend Design is an agent skill from mohitagw15856/pm-claude-skills. 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.

When should I use Frontend Design?

Frontend Design fits situations like: output works but looks like a prototype; establish the visual system for a new app.

How do I install Frontend Design in Claude Code?

Run `npx skills add mohitagw15856/pm-claude-skills --skill frontend-design -a claude-code`. Or copy the skill folder (skills/frontend-design in mohitagw15856/pm-claude-skills) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Design in Codex?

Run `npx skills add mohitagw15856/pm-claude-skills --skill frontend-design -a codex`. Or copy the skill folder (skills/frontend-design in mohitagw15856/pm-claude-skills) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.

Can I use Frontend Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mohitagw15856/pm-claude-skills --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.

What does Frontend Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Design is instructions for the agent only.

Does Frontend Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Design use?

Frontend Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Design use?

About 1.4k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend Design?

Skills that share tags, products or a category with Frontend Design: Frontend Design (udecode/plate, 17k stars), Design Style (Castor6/tactus, 376 stars), Bryl Minimal Design (bryllim/bryl-minimal-design, 115 stars) and Super UI UX Design (syahiidkamil/Software-Engineer-AI-Agent-Atlas, 401 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Design?

mohitagw15856 (a GitHub user) maintains it in mohitagw15856/pm-claude-skills, which has 1,434 GitHub stars. The repository holds 1,348 skills in this directory. The repository was last updated on October 9, 2026.

Source: mohitagw15856/pm-claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.