design

name	design
description	Unified design hub — routes to the right sub-skill for any visual/UI/UX task. Covers: component sourcing, aesthetics, composition, patterns, mobile, photos, canvas art, shadcn. Load this when doing any design work.

Design — Unified Routing Hub

One skill to load for any visual work. Routes to specialized sub-skills by task type.

Route Table

You're doing...	Load this skill	Path
Sourcing components (21st.dev, Magic UI, Aceternity)	component-craft	~/.pi/agent/skills/component-craft/SKILL.md
Creative aesthetics (distinctive look, avoid AI slop)	frontend-design	~/.pi/agent/skills/frontend-design/SKILL.md
Composition & theory (hierarchy, color, spacing, Gestalt)	ui-design	~/.pi/agent/skills/ui-design/SKILL.md
Pattern research (what do real apps do?)	ui-patterns	~/.pi/agent/skills/ui-patterns/SKILL.md
Mobile web (viewport, touch, fluid type, safe areas)	mobile-first	~/.pi/agent/skills/mobile-first/SKILL.md
Stock photos (search + verify, zero broken images)	unsplash	~/.pi/agent/skills/unsplash/SKILL.md
shadcn/ui (accessible primitives, MCP server)	shadcn-ui	~/.pi/agent/skills/shadcn-ui/SKILL.md
Static art (posters, PDF, PNG, visual philosophy)	canvas-design	~/.pi/agent/skills/canvas-design/SKILL.md
Photo search (multi-source: Serper, Unsplash, Pexels)	photo-finder	~/.pi/agent/skills/photo-finder/SKILL.md
Pixel editing (erase text/watermarks from existing images, fix logos)	image-edit	~/.pi/agent/skills/image-edit/SKILL.md
Лебедев review (бизнес-линч, brutal design critique with screenshots)	artemy	~/.pi/agent/skills/artemy/SKILL.md
Design audit (find where defaults leak through your brand)	design-audit	~/.pi/agent/skills/design-audit/SKILL.md

---

Workflows

Build a page from scratch

1. ui-patterns     → Research: what do the best apps do for this type of page?
2. ui-design       → Plan: composition, hierarchy, color palette, typography
3. component-craft → Source: grab premium components from 21st.dev / Magic UI
4. shadcn-ui       → Foundation: accessible primitives (dialog, tabs, forms)
5. unsplash        → Photos: search + verify stock images for visual sections
6. frontend-design → Execute: apply distinctive aesthetics, no generic AI look
7. mobile-first    → Audit: touch targets, fluid type, viewport, safe areas

Redesign / improve existing UI

1. ui-design       → Diagnose: what's wrong (hierarchy? spacing? color?)
2. ui-patterns     → Compare: what do competitors/best-in-class do?
3. component-craft → Upgrade: replace plain cards with image-overlay, glass, etc.
4. frontend-design → Polish: distinctive touches (motion, typography, texture)
5. mobile-first    → Verify: does it work on 390px? Touch targets? Fluid type?

Need photos for content

1. photo-finder    → Search Unsplash/Pexels/Serper, verify every URL loads

Create visual art / poster / PDF

1. canvas-design   → Full pipeline: philosophy → canvas → refinement

Edit an existing image (remove text, erase element, fix logo)

1. image-edit      → Inspect background type, scan coordinates, erase with alpha
2. browser-testing → Verify result in actual browser (cache gotcha!)
3. canvas-design   → If 2 attempts fail — recreate the asset cleanly

Get a brutal design review

1. artemy          → Бизнес-линч: screenshots + Lebedev-style critique in Russian

Audit design consistency (post-sprint)

1. design-audit    → Find 7 common leak patterns (black buttons, mixed accents, etc.)
2. visual-qa-loop  → Batch fix all findings

---

Quick Reference: Design Principles

These are the core rules baked across all sub-skills. Internalize them.

Visual Hierarchy (from ui-design)

• Scale = importance. Larger draws eye first.
• Max 3 typographic levels visible at once.
• 60/30/10 color distribution (dominant/secondary/accent).
• 8px spacing rhythm: 4, 8, 16, 24, 32, 48, 64.

No AI Slop (from frontend-design)

• ❌ Inter/Roboto/Arial everywhere
• ❌ Purple gradients on white
• ❌ Cookie-cutter layouts
• ✅ Intentional font pairing (display + body)
• ✅ Dominant color with sharp accent
• ✅ One memorable design decision per page

Mobile Reality (from mobile-first)

• 100dvh not 100vh
• Inputs ≥ 16px (prevents iOS zoom)
• Touch targets ≥ 44px
• clamp() for fluid type: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)
• touch-action: manipulation (kills 300ms delay)

Component Quality (from component-craft)

• Image cards: gradient overlay from-black/70 via-black/30 to-transparent
• Hover: group-hover:scale-105 transition-transform duration-700
• Glass: bg-white/5 backdrop-blur-xl border border-white/10
• Always loading="lazy" on images below fold
• Always <img> (not Next.js <Image>) for external URLs

Photos (from unsplash)

• Every URL must pass HEAD check before embedding
• Unsplash: ?w=800&q=80&auto=format (controlled size, auto WebP)
• Pexels: use src.large2x for cards
• Re-verify before deploy — URLs can die

---

Decision: Which Libraries?

Project type → Library choice:

SaaS dashboard        → shadcn/ui + Tailwind (sober, functional)
Marketing/landing     → Aceternity UI + Magic UI (animated, impressive)
Travel/content site   → component-craft patterns + unsplash (photo-rich)
Design system         → shadcn/ui as base, customize everything
Creative portfolio    → frontend-design skill (push boundaries)
Mobile-first app      → shadcn/ui + mobile-first skill (practical)

---

Checklist Before Shipping

From ui-design + mobile-first combined:

• Hierarchy: Obvious where to look first, 3 clear typographic levels
• Contrast: ≥ 4.5:1 text, ≥ 3:1 UI elements
• Touch targets: ≥ 44px with ≥ 8px gap
• Fluid type: All text uses clamp(), no fixed px
• Images verified: HEAD-checked, lazy-loaded, <img> for external
• Hover states: No layout shift, 150–300ms transitions
• Mobile tested: 375px, 390px, 768px, 1024px, 1440px
• No scroll issues: overscroll-behavior: contain on scroll containers
• Reduced motion: prefers-reduced-motion respected
• No emojis: Use SVG icons (Lucide, Heroicons) for everything. Emojis are amateur hour — only acceptable for user-generated content or chat bubbles, never in designed UI.

---

Skill Overlap Report

Area	Primary Skill	Also In	Status
Color theory	ui-design	frontend-design (briefly)	✅ No conflict — ui-design = theory, frontend-design = application
Typography	ui-design (scale, pairing)	mobile-first (fluid clamp)	✅ Complementary
Component sourcing	component-craft	shadcn-ui	✅ component-craft = premium/animated, shadcn = foundation
Photo search	photo-finder	—	✅ Merged (was unsplash + photo-finder)
Patterns	ui-patterns	component-craft	✅ ui-patterns = research/exploration, component-craft = implementation
Accessibility	shadcn-ui	ui-design (contrast checks)	✅ shadcn = baked-in a11y, ui-design = checklist
Mobile	mobile-first	ui-design (responsive checklist)	✅ mobile-first = deep technical, ui-design = high-level
Aesthetics	frontend-design	canvas-design	✅ frontend-design = web code, canvas-design = static art