Design Skills Cheatsheet

Source: skill files (all 23 design skills)

Quick reference for all 23 design skills. Use this when you are mid-project and need to know which skill to invoke right now. For deeper understanding, follow the links to the deep dive articles.

Foundation (Tier 1)

Skill	One-Liner	Trigger	When to Use	When NOT to Use
frontend-design	Master skill --- context, direction, build	/frontend-design or ask to build any UI	Every UI task. First skill invoked.	Never skip it.
taste-skill	Design dials, creative arsenal, motion engine	/taste-skill or mention design quality	When you want specific creative patterns (Bento Grid, Parallax Tilt) or tuned motion	Simple content pages with no interactive elements
soft-skill	$150k agency output, vibe archetypes	/soft-skill or ask for premium/agency-level design	When you want Ethereal Glass, Editorial Luxury, or Soft Structuralism aesthetic	Quick prototypes where aesthetics are secondary
ui-ux-pro-max	Searchable design database with CLI	/ui-ux-pro-max --design-system "..."	Bootstrapping a design system, searching for styles/palettes/fonts	Already have an established design system

Design System (Tier 2)

Skill	One-Liner	Trigger	When to Use	When NOT to Use
teach-impeccable	One-time project context setup	/teach-impeccable	Start of every new project (once)	Project already has .impeccable.md
stitch-skill	Google Stitch DESIGN.md generator	/stitch-skill	Google Stitch projects specifically	Non-Stitch projects
extract	Pull reusable components into system	/extract	After building 3+ pages with repeated patterns	First page of a new project
normalize	Realign UI to design system	/normalize	When UI drifts from established tokens/spacing	Before a design system exists

Tactical Enhancement (Tier 3)

Skill	One-Liner	Trigger	When to Use	When NOT to Use
arrange	Fix layout, spacing, visual rhythm	/arrange	Monotonous grids, inconsistent spacing, weak hierarchy	Layout is already asymmetric and varied
typeset	Fix typography --- fonts, hierarchy, sizing	/typeset	Default fonts, no type scale, poor readability	Typography already deliberate and scaled
colorize	Add strategic color (60/30/10)	/colorize	Monochromatic or visually flat interfaces	Color palette already rich and intentional
animate	Purposeful motion and micro-interactions	/animate	Static interfaces that need life and feedback	Already animated, or content-heavy pages
bolder	Amplify safe/bland designs	/bolder	Critique says “competent but forgettable”	Design is already bold or overwhelming
distill	Strip to essence, remove complexity	/distill	Critique says “cluttered” or “high cognitive load”	Design is already minimal
polish	Final alignment, spacing, state consistency	/polish	Right before shipping --- last quality pass	Early in the build process
delight	Add joy, personality, easter eggs	/delight	After everything else works, to add soul	Before layout, type, and color are solid

Quality and Evaluation (Tier 4)

Skill	One-Liner	Trigger	When to Use	When NOT to Use
critique	UX assessment, Nielsen heuristic scoring (0-20)	/critique	After initial build, to identify UX problems	During early wireframing/ideation
audit	Technical quality check, P0-P3 severity	/audit	After build, to find accessibility/performance issues	During design exploration

Advanced (Tier 5)

Skill	One-Liner	Trigger	When to Use	When NOT to Use
overdrive	Shaders, spring physics, 60fps scroll effects	/overdrive	Technically ambitious showcase projects	Before mastering Steps 1-10 of the workflow
harden	i18n, error handling, edge cases, offline	/harden	Production prep --- after design is finalized	During design exploration
onboard	First-run experience, empty states	/onboard	Apps with user accounts, onboarding flows	Static pages with no user state
optimize	Performance --- loading, rendering, bundle size	/optimize	Sluggish interfaces, large bundles, janky scroll	Before the UI is functionally complete
clarify	UX copy --- errors, labels, microcopy	/clarify	Confusing labels, unhelpful error messages	Copy is already clear and tested

Decision Flowchart

Starting a new project?
  → /teach-impeccable → /ui-ux-pro-max --design-system → /frontend-design

Built something but it looks generic?
  → /critique first → then /arrange → /typeset → /colorize

Design feels too safe/boring?
  → /bolder

Design feels too busy/cluttered?
  → /distill

Need to add animation?
  → /animate (after layout and typography are solid)

Ready to ship?
  → /polish → /audit → /harden

Building something technically ambitious?
  → /overdrive (only after Steps 1-10 are done)

Key Takeaways

• frontend-design is never skipped --- it is the first skill on every UI task
• teach-impeccable is run once per project, not once per task
• Tier 3 skills have a specific order: arrange → typeset → colorize → animate
• bolder and distill are opposites --- run one, never both
• critique identifies UX problems, audit identifies technical problems --- run both
• delight and polish come last in Tier 3, harden comes last overall
• overdrive is for showcase projects only, after fundamentals are mastered

Related

• design-skills-overview
• design-workflow
• frontend-design-deep-dive
• anti-ai-slop-guide
• ui-ux-pro-max-deep-dive
• taste-skill-deep-dive
• soft-skill-creative-direction
• skills-vs-mcp-vs-plugins

Try It

1. Bookmark this page in Obsidian for quick access during build sessions
2. Before your next UI task, scan the “When to Use” column to pick the right skills
3. Use the Decision Flowchart to route to the correct skill sequence for your current situation
4. After completing a project, review which skills you used and which you skipped --- identify if skipped skills would have improved the result