When to Use
User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.
Quick Reference
| Topic |
File |
| Stack & tooling |
stack.md |
| Typography rules |
typography.md |
| Color systems |
colors.md |
| Mobile patterns |
mobile.md |
| Animation |
animation.md |
| Examples |
examples.md |
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
| Trap |
Consequence |
Fix |
| Generic fonts |
Looks like every other site |
Use distinctive fonts |
| Solid white backgrounds |
Flat, lifeless |
Add gradients, grain, depth |
| Mobile as afterthought |
Broken for 60% of users |
Mobile-first always |
| Form error clears input |
User rage |
Preserve input, highlight error |
| No loading states |
User thinks broken |
Show progress immediately |
| Timid type scale |
No visual hierarchy |
Use 2x+ jumps for headlines |
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
1---2name: frontend-design3description: Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.4---5
6## When to Use
7
8User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.
9
10## Quick Reference
11
12| Topic | File |
13|-------|------|
14| Stack & tooling | `stack.md` |
15| Typography rules | `typography.md` |
16| Color systems | `colors.md` |
17| Mobile patterns | `mobile.md` |
18| Animation | `animation.md` |
19| Examples | `examples.md` |
20
21## Core Rules
22
23### 1. Mobile-First Always
24- Start with mobile layout, enhance upward
25- Every grid must collapse to single column
26- Touch targets minimum 44x44px
27- Test on real devices, not just simulators
28
29### 2. Typography Matters
30- Avoid generic fonts (Inter, Roboto, Arial)
31- Use dramatic size jumps (2x+), not timid increments
32- Body text 16-18px minimum
33- See `typography.md` for specific recommendations
34
35### 3. Color with Purpose
36- 70-20-10 rule: primary, secondary, accent
37- Commit to light OR dark — no muddy mid-grays
38- Never solid white backgrounds — add depth
39- See `colors.md` for CSS variables and patterns
40
41### 4. Feedback on Every Interaction
42- Acknowledge taps within 100ms
43- Optimistic updates for instant feel
44- Loading states for operations >1s
45- Preserve user input on errors
46
47### 5. Accessibility Non-Negotiable
48- Color contrast 4.5:1 (text), 3:1 (UI)
49- Focus states on all interactive elements
50- Semantic HTML (nav, main, section, article)
51- Keyboard navigation works for everything
52
53### 6. Performance from Start
54- Lazy load below-fold content
55- Image placeholders prevent layout shift
56- Code split heavy components
57- Target LCP <2.5s, CLS <0.1
58
59### 7. One Memorable Element
60- Every page needs one unforgettable design choice
61- Typography treatment, hero animation, unusual layout
62- Timid designs fail — commit to an aesthetic
63
64## Frontend Traps
65
66| Trap | Consequence | Fix |
67|------|-------------|-----|
68| Generic fonts | Looks like every other site | Use distinctive fonts |
69| Solid white backgrounds | Flat, lifeless | Add gradients, grain, depth |
70| Mobile as afterthought | Broken for 60% of users | Mobile-first always |
71| Form error clears input | User rage | Preserve input, highlight error |
72| No loading states | User thinks broken | Show progress immediately |
73| Timid type scale | No visual hierarchy | Use 2x+ jumps for headlines |
74
75## Scope
76
77This skill ONLY:
78- Provides frontend patterns and guidelines
79- Recommends stack and tooling choices
80- Guides responsive implementation
81
82This skill NEVER:
83- Makes network requests
84- Accesses user data
85- Stores any information
86
87## Security & Privacy
88
89This skill is read-only guidance. No data is collected, sent, or stored.
90
91## Feedback
92
93- If useful: `clawhub star frontend`
94- Stay updated: `clawhub sync`
modbender