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
- L Docs Package — Document a core Lowdefy package (api, build, cli, client, engine, layout, operators) 3k ★
- 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
My Frontend Design Skill
Award-winning frontend design skill for Claude Code — anti-slop certified
Contract Engineering
Typed cross-boundary contract discipline - schema design where illegal states are unrepresentable, versioning
Awwwards Website Skill
Design and build Awwwards-caliber websites with cinematic animations, immersive interactions, and world-class
Web Designer
Activate award-winning web design mode. Produces creative, distinctive designs using patterns from 38 top webs
Update Layout V2
Refresh docs/PROJECT-LAYOUT.md to reflect current directory structure while preserving user annotations. Scans
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
