Frontend UI Standards
MaxHan7/frontend-ui-standards-skill
A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.
Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.
Install Frontend Design
$ npx skills add xenitV1/claude-code-maestro --skill frontend-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install xenitV1/claude-code-maestro frontend-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/xenitV1/claude-code-maestro.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-design .claude/skills/frontend-design && rm -rf skills-srcUse ~/.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/
Install the "frontend-design" agent skill from https://github.com/xenitV1/claude-code-maestro/tree/main/skills/frontend-design into .claude/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/xenitV1/claude-code-maestro/tree/main/skills/frontend-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add xenitV1/claude-code-maestro --skill frontend-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install xenitV1/claude-code-maestro frontend-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/claude-code-maestro.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frontend-design .agents/skills/frontend-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/claude-code-maestro/tree/main/skills/frontend-design into .agents/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xenitV1/claude-code-maestro --skill frontend-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install xenitV1/claude-code-maestro frontend-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/claude-code-maestro.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frontend-design .cursor/skills/frontend-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/claude-code-maestro/tree/main/skills/frontend-design into .cursor/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/xenitV1/claude-code-maestro.git --path skills/frontend-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add xenitV1/claude-code-maestro --skill frontend-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install xenitV1/claude-code-maestro frontend-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/claude-code-maestro.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frontend-design .gemini/skills/frontend-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/claude-code-maestro/tree/main/skills/frontend-design into .gemini/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install xenitV1/claude-code-maestro frontend-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add xenitV1/claude-code-maestro --skill frontend-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/xenitV1/claude-code-maestro.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frontend-design .github/skills/frontend-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/claude-code-maestro/tree/main/skills/frontend-design into .github/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xenitV1/claude-code-maestro --skill frontend-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install xenitV1/claude-code-maestro frontend-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xenitV1/claude-code-maestro.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frontend-design .opencode/skills/frontend-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xenitV1/claude-code-maestro/tree/main/skills/frontend-design into .opencode/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-design- GitHub stars
- 229
- Token cost
- ~1.1k tokens
- SKILL.md length
- 490 words
- Files
- 6 (incl. scripts)
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.
- Tasks that involve Frontend development
- SKILL.md covers ⚠️ Core Protocols & Standards, 🎬 Core Animation Principles, 🔗 Related & Required Skills and 🛠️ Automation Scripts
- Runs JavaScript scripts from its folder; calls node
- Tasks that involve Design to code
What it does
Frontend Design is an agent skill from xenitV1/claude-code-maestro. Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including scripts (for example `animation_reference.md`, `css_art_reference.md` and `frontend_reference.md`).
It sits in Frontend & Design, covering Frontend development and Design to code. The licence is MIT.
When your agent uses it
- Tasks that involve Frontend development
- Tasks that involve Design to code
Example prompts
- “/frontend-design”
Requirements
- Node.js
- Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep, Bash
What it can do on your machine
Read from SKILL.md and the folder at commit 924315b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditGlobGrepBash
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
node
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.1k tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 490 words of instructions outside code blocks.
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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
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); the scripts in this folder are not scanned.
SKILL.md
The full file from xenitV1/claude-code-maestro at commit 924315b, republished under its MIT licence (© xenitV1). 490 words, ~1,117 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.- name
- frontend-design
- description
- Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.
- allowed-tools
- Read, Write, Edit, Glob, Grep, Bash
<domain_overview>
Frontend Design System
Philosophy: Minimize cognitive load and make interactions intuitive. Every design decision should respect human psychology, behavioral patterns, and cognitive limitations. The designer bears complexity so the user experiences simplicity. Core Principle: Good design is invisible - users should accomplish their goals without noticing the design itself. Design should feel effortless and natural, aligning with how humans naturally think and behave.
⚠️ Core Protocols & Standards
ANTI-AI AESTHETIC MANDATE (CRITICAL): Never use generic aesthetics that give the impression of being AI-generated. This includes overused font families (Inter, Roboto, Arial, system fonts), cliché color schemes (especially purple gradients on white backgrounds), predictable layouts, and repetitive component patterns. ABSOLUTELY FORBIDDEN: The "Cyberpunk" aesthetic is strictly prohibited. Do NOT use neon glows, matrix rain, glitch effects, or "high-tech" dark modes unless explicitly requested for a specific context. This cliché is the hallmark of lazy AI generation. Specifically avoid template-driven designs that lack context-specific character. This skill aims to create distinctive, original, and production-level frontends. Realize functional, high-fidelity code by paying extraordinary attention to aesthetic details and creative decisions.
CRITICAL PROTOCOL: The detailed rules are stored in separate reference files. You MUST use the Read tool to load these files into your context BEFORE starting any design work. Do not assume you know the contents.
- frontend_reference.md: Contains Technical Standards, Aesthetic Signatures, and Creative Protocols.
- animation_reference.md: Contains 2025 Motion Standards, Physics-based animation rules, and Micro-interactions.
- css_art_reference.md: FOR VISUAL OBJECTS. Use this when asked to "draw" or "create" complex items (Swords, Logos, Icons) using code. Defines Geometric Composition & LCH Materials.
- security-protocols.md: Contains critical Frontend Security rules.
Show full SKILL.md (230 more words)Show less
🎬 Core Animation Principles
Motion Mandate: Animation must be Physics-Based (Springs), Continuous (No Teleportation), and Meaningful (Storytelling).
- Continuity: State changes must morph, not cut (View Transitions).
- Weight: Objects must feel like they have mass (Use Spring Animations).
- Focus: Animation guides attention; it does not distract.
- Narrative: Every motion tells a story about where an element came from and where it is going.
(See
animation_reference.mdfor the full 12-Principle Framework)
🔗 Related & Required Skills
When executing Frontend tasks, you MUST integrate these complementary skills to ensure architectural integrity:
| Skill | Purpose in Frontend Context |
|---|---|
brainstorming | MANDATORY PRE-REQUISITE. Before ANY design work, use this to interrogate the user's vague instructions and crystallize the "Screenplay/Narrative" defined in frontend_reference.md. |
clean-code | MANDATORY. Ensures component modularity, cleaner hooks/state logic, and security compliance. Prevents "spaghetti UI code". |
tdd-mastery | MANDATORY. "Iron Law" applies to components too. Use for visual regression tests and logic verification before coding UI. |
optimization-mastery | Use for Performance Audits (Lighthouse, Core Web Vitals), reducing bundle size, and optimizing re-renders. |
backend-design | Consult this when defining API data shapes, error handling states, and ensuring type safety across the network boundary. |
planning-mastery | Use this to break down complex UI implementations into "Atomic" deliverables (Atoms -> Molecules -> Organisms). |
🛠️ Automation Scripts
Use the following script to audit your implementation:
scripts/js/ux-audit.js: Run this to perform a heuristic analysis of the UI for consistency, accessibility (contrast/spacing), and compliance with the design tokens.- Usage:
node scripts/js/ux-audit.js</domain_overview>
- Usage:
© xenitV1, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 5 other files (scripts) in skills/frontend-design of xenitV1/claude-code-maestro.
- SKILL.md
- animation_reference.md
- css_art_reference.md
- frontend_reference.md
- scripts/js/ux-audit.js
- security-protocols.md
Open the folder on GitHubat commit 924315b
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Design this skillxenitV1/claude-code-maestro | 229 | — | ~1.1k | Automated safety check: Notes | MIT | |
| Frontend UI StandardsMaxHan7/frontend-ui-standards-skill | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Frontend UI UXArabelaTso/Skills-4-SE | 253 | — | ~809 | Automated safety check: Pass | Apache-2.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT |
Similar skills
Frontend UI UX
ArabelaTso/Skills-4-SE
Designer-turned-developer who crafts stunning UI/UX even without design mockups.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
Figma Design System Rules Generator
warpdotdev/warp
Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.
More from xenitV1/claude-code-maestro
All 13 skills in this repoClean Code
xenitV1/claude-code-maestro
The Foundation Skill. An agent skill from xenitV1/claude-code-maestro.
Ralph Wiggum
xenitV1/claude-code-maestro
Surgical Debugger & Code Optimizer. An agent skill from xenitV1/claude-code-maestro.
Backend Design
xenitV1/claude-code-maestro
Elite Tier Backend standards, including Vertical Slice Architecture, Zero Trust Security, and High-Performance API protocols.
Brainstorming
xenitV1/claude-code-maestro
Design-first methodology. An agent skill from xenitV1/claude-code-maestro.
Browser Extension
xenitV1/claude-code-maestro
Master specialized skill for building 2025/2026-grade browser extensions.
Debug Mastery
xenitV1/claude-code-maestro
Systematic debugging methodology with 4-phase process, root cause tracing, and elite observability standards.
Related
Categories
Questions about Frontend Design
What does Frontend Design do?
Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols. Frontend Design is an agent skill from xenitV1/claude-code-maestro. Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.
When should I use Frontend Design?
Frontend Design fits situations like: tasks that involve Frontend development; tasks that involve Design to code.
How do I install Frontend Design in Claude Code?
Run `npx skills add xenitV1/claude-code-maestro --skill frontend-design -a claude-code`. Or copy the skill folder (skills/frontend-design in xenitV1/claude-code-maestro) 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 xenitV1/claude-code-maestro --skill frontend-design -a codex`. Or copy the skill folder (skills/frontend-design in xenitV1/claude-code-maestro) 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 xenitV1/claude-code-maestro --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?
Going by SKILL.md and its folder, Frontend Design needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep, Bash.
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 notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
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.1k tokens (SKILL.md is roughly 4.5k 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 UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars), Frontend UI UX (ArabelaTso/Skills-4-SE, 253 stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Design?
xenitV1 (a GitHub user) maintains it in xenitV1/claude-code-maestro, which has 229 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on January 24, 2026.
Source: xenitV1/claude-code-maestro on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.