Frontend UI UX Designer Skill — Design skill for Claude Code
Award-caliber design workflow for Claude Code: 5-phase loop (Perceive→Direction→System→Build→Motion→Reflect), 4 surface modes, semantic tokens, WCAG 2.2 AA, Core Web Vitals, anti-default discipline.
How to install Frontend UI UX Designer Skill
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open etemigarba/Frontend-UI-UX-Designer-Skill and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Frontend UI UX Designer Skill does
Award-caliber design workflow for Claude Code: 5-phase loop (Perceive→Direction→System→Build→Motion→Reflect), 4 surface modes, semantic tokens, WCAG 2.2 AA, Core Web Vitals, anti-default discipline. Zero dependencies. MIT licensed
Alternatives in Design
- Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
- Contributing To MiniCode — Thanks for contributing to MiniCode 388 ★
- A Philosophy Of Software Design — Distilled Guide — Source: John Ousterhout, A Philosophy of Software Design Central thesis: The core challenge of software design 284 ★
README
Frontend UI/UX Designer Skill
**Award-caliber frontend UI/UX design workflow for Claude Code** — A 5-phase design loop with semantic tokens, WCAG 2.2 AA accessibility, Core Web Vitals budgets, anti-default discipline, and four surface modes (Persuade, Operate, Read, Experience).
[](LICENSE) [] [](https://claude.ai/code) [](https://opencode.ai) [](https://github.com/etemigarba/Agentic-Engineering-Skills) [](https://github.com/etemigarba/Frontend-UI-UX-Designer-Skill/actions) [](https://github.com/etemigarba/Frontend-UI-UX-Designer-Skill/issues) [](https://github.com/etemigarba/Frontend-UI-UX-Designer-Skill/stargazers)
Overview
This skill transforms an AI coding agent into an **award-caliber Design Director and Design Engineer**. It enforces a **bounded, verifiable design loop** that produces distinctive, accessible, fast, and complete interfaces — the product of deliberate choices, never defaults.
Core Philosophy
- The brief wins — Honor pinned aesthetics, eras, fonts, and palettes even when they collide with anti-default rules
- Refinement preserves; redesign replaces — Never polish a discarded look
- Verify in bounded passes — Max 2 fix passes, then ship with honest report
Key Features
| Feature | Description |
|---|---|
Related Skills
Frontend UI UX Skill
A Claude Code Agent Skill: evidence-based UI/UX and frontend engineering doctrine (HCI research, WCAG 2.2, Cor
Design Taste Frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the r
UX Motion
Animation and motion rubric. Checks timing, easing, meaning, reduced-motion compliance, and performance for ev
Design Skill
Unified /design meta-skill for Claude Code — bundles UI/UX, typography, color theory, GSAP animation, Framer M
Video Talkcraft
Agent skill that turns Claude Code / Codex into a motion-design studio for narration videos — word-level voice
Silk Design
A Claude Code skill for building web interfaces that move well. Motion, smooth scroll, and design tokens by de
Related Agents
Astro Accessibility
Delegated by the astro orchestrator during /astro audit to review WCAG 2.2 AA conformance of layouts, interact
Squad Designer
Operate as the squad's Product Designer — turn open UI/UX decisions into presentational component code, tokens
Section Builder
Builds one page section from a Figma node into this starter's conventions — tokens, spring motion, semantic ma
