design-skill

Design Skill

The complete UI/frontend design playbook for ob1 — load this whenever you design or build any user interface.

It is one continuous flow: orchestration → foundations → components & states → behavior & quality → patterns → review. Always begin with Frontend Design (the two-pass method: plan a grounded token system, critique it, then code), then pull in the sections you need. Cross-references like "the color-system section" point to headings below; this file is fully self-contained.

Sections

1. Frontend Design — frontend-design
2. Anti-Slop — anti-slop
3. Visual Hierarchy — visual-hierarchy
4. Design Tokens — design-tokens
5. Color System — color-system
6. Typography — typography
7. Spacing & Layout — spacing-and-layout
8. Depth & Imagery — depth-and-imagery
9. Component States — component-states
10. Loading, Empty & Error States — loading-empty-error-states
11. Forms & Inputs — forms-and-inputs
12. Data Tables — data-tables
13. Motion & Animation — motion-and-animation
14. Accessibility — accessibility
15. Responsive Design — responsive-design
16. Tailwind v4 + shadcn/ui — tailwind-and-shadcn
17. Landing Page Design — landing-page-design
18. Dashboard Design — dashboard-design
19. Screenshot Critique Loop — screenshot-critique-loop
20. Design Review — design-review

Frontend Design

Entry point for any "build/design a UI" request. Never start coding immediately. Run two passes: plan (no code) → critique (kill clichés) → build. Ground every choice in the subject's real-world domain — a tax app is not a candy app. Spend boldness in ONE place; keep the surroundings quiet. When in doubt, remove one accessory.

Pass 1 — Plan (no markup yet)

Invent a compact token system and show it to the user BEFORE writing any HTML/JSX. Five parts:

1. Color — 4-6 named hex tokens, derived from the subject. e.g. for a fishing-trip planner: --deep:#0B3C5D --tide:#328CC1 --sand:#F4E4C1 --hull:#1C1C1C --coral:#E84A27. One accent only. Defer ratios/scales to the color-system section.
2. Type triad — name 3 real fonts with roles + sizes: display (e.g. Fraunces 700, 48px/52px), body (Inter 400, 16px/26px), utility (IBM Plex Mono 500, 13px). Defer scale to the typography section.
3. Spacing — one 8pt scale: 4 8 12 16 24 32 48 64 96. Pick the page gutter (e.g. 24) and the section rhythm (e.g. 64). Defer to the spacing-and-layout section.
4. Wireframe — ASCII the layout so structure is argued before pixels:

   ┌──────────────────────────────┐
   │ logo      nav        [CTA]    │  56px bar
   ├──────────────────────────────┤
   │  H1 display                   │
   │  sub · body                   │  hero, 64 pad
   │  [signature element]          │
   ├───────────────┬──────────────┤
   │ card          │ card         │  3-up @ ≥1024
   └───────────────┴──────────────┘
   

5. Signature element — ONE memorable thing tied to the domain (a tide-line divider, a boarding-pass ticket stub, a ledger rule). Everything else stays calm. Describe it in one sentence.