FrontendDesign

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

Aesthetic Presets (pick ONE per project)

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

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:

Avoid: Prop drilling beyond 3 levels. Global state for local concerns.

Responsive Design

Mobile-first — start with smallest viewport, enhance upward.

• 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

• Components > 200 lines
• Inline styles or arbitrary pixel values
• Missing loading/error/empty states
• No keyboard navigation
• Color as sole state indicator
• Generic AI aesthetic (purple gradients, oversized padding)
• No responsive testing
• tabindex > 0 (breaks natural tab order)
• div used as button (not focusable, no keyboard support)

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