frontend-ui
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
Best use case
frontend-ui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
Teams using frontend-ui should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-ui/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-ui Compares
| Feature / Agent | frontend-ui | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Claude UI/UX Design Skill ## Purpose Automatically enforce high‑quality UI craft and strong UX thinking for any frontend or product‑flow work. ## Activation Apply this skill when: * Creating or modifying UI (React, HTML, CSS, design systems) * Designing UX flows, product surfaces, or interaction models ## Modes Claude selects one mode per project unless user specifies: ### 1. Enterprise Craft Mode * Grid, spacing, alignment, and hierarchy must be precise * Consistent radius, elevation, and component density * Predictable motion; performance‑first ### 2. Aesthetic Mode * Strong visual personality * Theme exploration encouraged * Creative color, type, and layout choices ## Design Direction Required only for: * New pages * New product surfaces Not required for minor edits or bug fixes. ## Flow‑First Thinking Before UI decisions, clarify: 1. Purpose of the screen 2. Primary user 3. Emotional job (what should it *feel* like to succeed?) ## Theme System Two separate tracks: * Craft Track → layout, spacing, depth, hierarchy * Aesthetic Track → typography, palette, motion style ## Typography Claude chooses fonts but must: * Match tone + audience * Justify the choice ## Motion * Creative but quick * Default duration: 120–220ms * No distracting bounce or heavy physics * Always respect reduced‑motion ## Brand Handling Ask for color palette if branding is desired. If none is provided, proceed with a neutral system. ## Output Standard Every UI output must show: * Clear hierarchy * Visual intention * Consistent craft * Purposeful styling
Related Skills
frontend-styleguide
Use when asked to create or edit style guides, design systems, component libraries, or update existing frontend components for web projects
frontend-style-layout
Apply consistent styling and layout patterns with Tailwind v4. Use when building page layouts, choosing spacing methods, implementing responsive images, or migrating Tailwind v3 classes to v4. Covers Section Compound Pattern, spacing selection, CLS-free responsive images, and v4 class changes.
frontend-governance
Enforces Contemplative design system and Anti-Slop protocols for all UI generation
frontend-design
Create distinctive, bold UI designs that avoid generic AI aesthetics. This skill should be used when users want frontend components with strong visual identity, creative typography, intentional color palettes, and production-grade animations - specifically to avoid the bland, safe, homogeneous "AI slop" that plagues most generated interfaces.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
pr-review
Guidelines for conducting thorough pull request code reviews
power-bi-report-design-best-practices
Comprehensive Power BI report design and visualization best practices based on Microsoft guidance for creating effective, accessible, and performant reports and dashboards. Triggers on: **/*.{pbix,md,json,txt}
plan-issue
Plan-only workflow for issue/repo changes. Use when user asks to plan, scope, estimate, or design.
pencil-design
Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.
pattern-extraction
Extract design systems, architecture patterns, and methodology from codebases into reusable skills and documentation. Use when analyzing a project to capture patterns, creating skills from existing code, extracting design tokens, or documenting how a project was built. Triggers on "extract patterns", "extract from this repo", "analyze this codebase", "create skills from this project", "extract design system".
oiloil-ui-ux-guide
Modern, clean UI/UX guidance + review skill. Use when you need actionable UX/UI recommendations, design principles, or a design review checklist for new features or existing systems (web/app). Focus on CRAP (Contrast/Repetition/Alignment/Proximity) plus task-first UX, information architecture, feedback & system status, consistency, affordances, error prevention/recovery, and cognitive load. Enforce a modern minimal style (clean, spacious, typography-led), reduce unnecessary copy, forbid emoji as icons, and recommend intuitive refined icons from a consistent icon set.
nuxt-ui
Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.