Frontend UI UX Skill — Design skill for Claude Code

Frontend UI/UX Skill

A [Claude Code Agent Skill](https://docs.claude.com/en/docs/claude-code) encoding a serious, evidence-based UI/UX and frontend-engineering doctrine — for any agent, any framework, any project. Not a style guide of opinions; every rule traces back to a usability heuristic, an accessibility standard, a performance metric, or a named piece of HCI research.

What's inside

• **`SKILL.md`** — the core doctrine, organized as five pillars an agent applies to any frontend task:

  1. Interaction & information design (Nielsen's 10 heuristics, Fitts's/Hick's/Miller's/Jakob's laws)
  2. Visual system (typography, color, layout, motion — with a checklist against generic/AI-default tells)
  3. Architecture (semantic HTML, component boundaries, design tokens, CSS methodology, responsive defaults)
  4. Accessibility (WCAG 2.2 AA as the floor, not an afterthought)
  5. Performance (Core Web Vitals: LCP, INP, CLS)

  It closes with a **Definition of Done** — a concrete checklist to run before calling any UI work finished.

• **`references/`** — deeper material loaded on demand, not upfront, so a small task doesn't pay the context cost of the whole doctrine:

  • hci-foundations.md — the original citations behind Pillar 1 (Nielsen & Molich 1990/1994, Fitts 1954, Hick 1952/Hyman 1953, Miller 1956, Card/Moran/Newell 1983)
  • accessibility.md — the full WCAG 2.2 AA checklist organized by Perceivable/Operable/Understandable/Robust, plus a manual verification method
  • performance.md — Core Web Vitals thresholds and a per-mechanism breakdown of what causes each one to regress
  • anti-patterns.md — tell → why it's a problem → do instead, for both visual and engineering anti-patterns
  • component-architecture.md — component boundaries, state placement, CSS methodology comparison

Install

**Personal (all projects on your machine):**

git clone https://github.com/overseek944/frontend-ui-ux-skill.git ~/.claude/skills/frontend-ui-ux

**Proj