| name | FrontendDesign |
| description | Frontend UI engineering and aesthetic standards — design thinking, anti-AI-slop rules, component architecture, responsive design, accessibility, and design review. Incorporates official Anthropic frontend-design skill aesthetics. USE WHEN building UI, generating HTML, frontend work, design review, component architecture, responsive design, anti-slop, design system, WCAG, accessibility review, build web component, build page, build application. |
FrontendDesign
Production-quality frontend engineering standards. Ensures UI output looks like it was built by a design-aware engineer, not generated by AI.
Customization
Before executing, check for user customizations at:
${PAI_USER_DIR}/SKILLCUSTOMIZATIONS/FrontendDesign/
Workflow Routing
| Workflow | Trigger | File |
|---|
| DesignReview | "design review", "review UI", "check accessibility", "review frontend" | Workflows/DesignReview.md |
| BuildWebsite | "build website", "create website", "landing page", "portfolio site" | → Route to WebsiteFactory skill (separate skill, uses this skill's Core Principles as pre-flight) |
Aesthetic Presets (pick ONE per project)
| Preset | Skill | Vibe |
|---|
| Default premium | ../Aesthetics/taste-skill | Metric-based rules, GSAP/ThreeJS, bento grids |
| Luxury/agency | ../Aesthetics/soft-skill | Exact fonts, expensive shadows, agency feel |
| Industrial/raw | ../Aesthetics/brutalist-skill | Swiss typography, military terminal, declassified |
| Editorial/clean | ../Aesthetics/minimalist-skill | Warm monochrome, flat grids, muted pastels |
| Upgrade existing | ../Aesthetics/redesign-skill | Audit + fix in-place, no rewrite |
These are CSS-level presets. This skill's Design Thinking and Anti-AI-Slop principles apply on top of whichever preset is chosen.
Context Files
| File | Content |
|---|
AccessibilityGuidelines.md | WCAG 2.1 AA compliance, keyboard nav, ARIA |
ResponsivePatterns.md | Breakpoints, mobile-first, viewport fitting |
ComponentPatterns.md | Architecture, anti-AI-slop rules, state management |
Quality References (shared with other skills)
${SKILLS_HOME}/Utilities/References/accessibility-checklist.md — WCAG 2.1 AA quick checklist${SKILLS_HOME}/Utilities/References/performance-checklist.md — Core Web Vitals checklist
Core Principles
Design Thinking (from official Anthropic frontend-design skill)
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Frontend Aesthetics Guidelines (from official Anthropic frontend-design skill)
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive, characterful choices. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Motion: Prioritize CSS-only solutions for HTML. Use Motion library for React. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code. Minimalist designs need restraint, precision, and attention to spacing and typography.
No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
Anti-AI-Slop Rules
UI must NOT look AI-generated. Avoid these patterns:
- Excessive gradients (especially purple-to-blue defaults)
- Oversized padding and rounded corners on everything
- Uniform card grids with identical spacing
- Generic stock layouts (hero + 3 cards + CTA)
- Default shadcn/ui styling without customization
- Decoration over function
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cookie-cutter design that lacks context-specific character
Instead: Use the project's actual color palette, match existing design language, prioritize content density over whitespace padding. Interpret creatively and make unexpected choices that feel genuinely designed for the context.
Component Architecture
- Colocate related files (component + styles + tests + types together)
- Prefer composition over configuration (children > props for layout)
- Keep components under 200 lines — split when logic or rendering gets complex
- Separate data fetching from presentation (container/presentational pattern)
- Extract reusable logic into hooks, not HOCs
State Management
Use the simplest appropriate tool:
| State Type | Tool | When |
|---|
| Component UI | useState / useReducer | Toggle, form input, open/close |
| Cross-cutting read-heavy | React Context | Theme, locale, auth status |
| URL-synced | URL params / searchParams | Filters, pagination, tabs |
| Server/remote | TanStack Query / SWR | API data, cache, mutations |
| Complex client | Zustand / Jotai | Multi-component shared state |
Avoid: Prop drilling beyond 3 levels. Global state for local concerns.
Responsive Design
Mobile-first — start with smallest viewport, enhance upward.
| Breakpoint | Target | Priority |
|---|
| 320px | Small phone | Must work |
| 768px | Tablet | Must work |
| 1024px | Laptop | Must work |
| 1440px | Desktop | Should work |
- Use CSS Grid/Flexbox, not absolute positioning
- Test touch targets (min 44x44px on mobile)
- Use
rem/em units, not px for typography
- Images: responsive srcset + explicit width/height (prevents CLS)
Content Density (from zarazhangrui/frontend-slides)
- Viewport fitting: content should fill the viewport without scrolling where possible
- Style presets: offer 2-3 density options (compact/normal/spacious)
- Limit content per section: 3-5 key points, not walls of text
- Visual hierarchy through typography scale, not color alone
Red Flags
Examples
Example 1: Building a dashboard component
User: "Build a task dashboard with filters and a table"
→ Loads ComponentPatterns.md for architecture
→ Applies anti-slop rules (no purple gradients, no generic cards)
→ Builds mobile-first with responsive breakpoints
→ Verifies keyboard navigation and ARIA labels
Example 2: Design review of HTML output
User: "Review this HTML page for quality"
→ Invokes DesignReview workflow
→ Checks 5 axes: visual quality, accessibility, responsiveness, architecture, performance
→ Classifies findings by severity
Example 3: Fixing AI-generated UI
User: "This looks too AI-generated, make it professional"
→ Loads ComponentPatterns.md anti-slop table
→ Replaces generic patterns with project-specific design choices
→ Fixes typography, spacing scale, color palette
Integration
Works with:
- VisualExplainer — HTML diagram/visualization generation
- ScientificDeck-HTML — HTML slide generation
- Designer agent — spawns with FrontendDesign context
- Algorithm VERIFY — HTML output quality check
