Individual skill

frontend-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.

plugins/pm-design/skills/frontend-design/SKILL.md

Read pinned source

Source commit f7c90bc09ee05dc25cf257bdb1826f2c2552c2cb

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,539
Repository last updated: Nov 9, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

product-management Repository topic
productivity Repository topic
skills Repository topic
claude-skills Repository topic
agent-skills Repository topic
chatgpt Repository topic
claude-code Repository topic
cursor Repository topic
gemini Repository topic
prompt-engineering Repository topic
design Derived category
security Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 5,476 bytes

Read excerpt


# 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