Frontend Design

When to Use

User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.

Quick Reference

Core Rules

1. Mobile-First Always

• Start with mobile layout, enhance upward

• Every grid must collapse to single column

• Touch targets minimum 44x44px

• Test on real devices, not just simulators

2. Typography Matters

• Avoid generic fonts (Inter, Roboto, Arial)

• Use dramatic size jumps (2x+), not timid increments

• Body text 16-18px minimum

• See typography.md for specific recommendations

3. Color with Purpose

• 70-20-10 rule: primary, secondary, accent

• Commit to light OR dark — no muddy mid-grays

• Never solid white backgrounds — add depth

• See colors.md for CSS variables and patterns

4. Feedback on Every Interaction

• Acknowledge taps within 100ms

• Optimistic updates for instant feel

• Loading states for operations >1s

• Preserve user input on errors

5. Accessibility Non-Negotiable

• Color contrast 4.5:1 (text), 3:1 (UI)

• Focus states on all interactive elements

• Semantic HTML (nav, main, section, article)

• Keyboard navigation works for everything

6. Performance from Start

• Lazy load below-fold content

• Image placeholders prevent layout shift

• Code split heavy components

• Target LCP <2.5s, CLS <0.1

7. One Memorable Element

• Every page needs one unforgettable design choice

• Typography treatment, hero animation, unusual layout

• Timid designs fail — commit to an aesthetic

Frontend Traps

Scope

This skill ONLY:

• Provides frontend patterns and guidelines

• Recommends stack and tooling choices

• Guides responsive implementation

This skill NEVER:

• Makes network requests

• Accesses user data

• Stores any information

Security & Privacy

This skill is read-only guidance. No data is collected, sent, or stored.

Feedback

• If useful: clawhub star frontend

• Stay updated: clawhub sync