Agent skill
design-deepthink
Distilled design wisdom for /deepthink --design exploration
Install this agent skill to your Project
npx add-skill https://github.com/adilkalam/orca/tree/main/skills/design-deepthink
SKILL.md
Design-Deepthink Skill
Loaded by /deepthink --design or /think --design for structured design exploration.
1. AI Slop Anti-Patterns (7 Patterns)
Detect and flag these in design analysis:
| Pattern | Detection Criteria |
|---|---|
| Generic dashboards | Centered hero + 2-3 gradient cards + charts with no identity |
| Copy-paste template feel | Obvious clone of library defaults without customization |
| Color soup | 3+ accents, uncoordinated hues, no semantic meaning |
| Flattened hierarchy | Same weight/size throughout, sections only separated by whitespace |
| Over-animated UI | Every hover zooms/bounces, 300ms+ transitions |
| Generic AI aesthetics | Overused fonts (Inter, Roboto), cliched purple gradients |
| Same design across projects | Output could belong to any project (lacks identity) |
2. Design QA Criteria
Visual Hierarchy Scoring
- Pass: Clear heading/body/meta distinctions, 3+ type weights in use
- Fail: Flat hierarchy, no clear entry point, competing focal points
Spacing/Alignment Checklist
- 4px or 8px base grid adherence
- Consistent vertical rhythm between sections
- Optical vs mathematical alignment considered
- No arbitrary pixel values outside spacing scale
Color/Contrast Requirements
- Token compliance: No raw hex when tokens exist
- WCAG AA minimum (4.5:1 body, 3:1 large text)
- Semantic usage: Accent means something, not decoration
Responsive Breakpoints
- 375px (mobile), 768px (tablet), 1440px (desktop), 1920px (wide)
- Touch targets: 44px minimum
- Layout reflow without horizontal scroll
3. Design-DNA Priority Rules
When multiple design sources exist:
| Priority | Source | Notes |
|---|---|---|
| 1 (highest) | JSON | .claude/design-dna/*.json, design-dna.json |
| 2 | Markdown | design-system.md, .claude/design-dna/README.md |
| 3 | CSS comments | Files with @design-token: or @design-rule: |
Enforcement:
- Where tokens exist, ad-hoc values are FORBIDDEN
- Token naming:
--color-<role>,--space-<scale>,--font-<role> - JSON rules are machine-parseable law; Markdown is advisory
4. Context Instructions
Project Design Files (Auto-Read in DESIGN Mode)
design-dna.json(project root).claude/design-dna/directory (all files)design-system.md(project root)css/design-system-tokens.css(if exists)
Interpreting design-dna.json
colors: Semantic roles (primary, secondary, accent, surface)typography: Scale and roles (display, heading, body, caption)spacing: Base grid and named values (section, component, gap)patterns: Named layouts (hero, card-grid, dashboard-shell)
When No Design-DNA Exists
- Note absence as a constraint
- Use
frontend-aestheticsskill principles - Recommend design-dna creation as a next step
- Document choices made for future codification
Related: design-qa-skill, design-dna-skill, frontend-aesthetics
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
adilkalam/orca
web-interface-guidelines
Web UI quality rules: interactions, forms, loading, animations, layout, content, performance, accessibility, design. Apply to all web UI work. Adapted from Vercel Design Guidelines.
adilkalam/orca
react-performance
React/Next.js performance patterns with wrong/right code examples. Apply when building or reviewing React components. Adapted from Vercel React Best Practices by @shuding.
adilkalam/orca
stripe-integration
Payment integration patterns for Stripe. Covers checkout sessions, subscriptions, webhooks, idempotency, and the sharp edges that cause real-money bugs. Backend-agnostic with examples for Next.js App Router and Django REST Framework.
adilkalam/orca
testing-strategy
Testing strategies and best practices for unit, integration, and end-to-end tests. Use when setting up test infrastructure, writing test cases, or deciding what to test. Covers test pyramid, mocking strategies, and coverage guidelines.
adilkalam/orca
frontend-aesthetics
Global frontend aesthetics skill that helps Claude avoid generic "AI slop" UI and make bold, intentional visual decisions while still honoring each project's design-dna, tokens, and architecture.
adilkalam/orca
pg-style-editor
Edit writing to adopt Paul Graham's exceptionally clear style for research and long-form content - concrete language, varied sentence rhythm, accessible formality, specific evidence. Use when user wants to rewrite content in PG's style or asks to "make this clearer" or "simplify research writing."
Didn't find tool you were looking for?