design-tokens
Design Tokens
Generate type scales, color palettes, spacing systems, and dark mode derivations with math — not guessing. Includes WCAG contrast checking, systematic spacing grids, and production-ready CSS/Tailwind output.
When to Use
- User is setting up a new project's design system
- User asks for a type scale, color palette, or spacing system
- User needs WCAG-compliant color combinations
- User wants dark mode colors derived from a light palette
- User asks for "design tokens" or "theme setup"
- Building a Tailwind config or CSS custom properties
Core Philosophy
- Math over taste. Scales should follow ratios, not arbitrary values.
- Accessibility by default. Every text/background combo must pass WCAG AA.
- Systematic. Every value should be derivable from a base + ratio.
- Portable. Output as CSS custom properties, Tailwind config, or JSON tokens.
More from dylanfeltus/skills
visual-qa
Use vision models to self-review screenshots against design intent. Catches spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps. Use when reviewing designs, comparing implementations to mockups, or doing pre-ship QA.
187producthunt
Search Product Hunt launches, products, and makers via the GraphQL V2 API. Use when the user asks about Product Hunt launches, trending products, or wants to research a product's reception. Requires a free developer token (~2 min setup).
186creative-direction
Image prompt templates, model selection guidance, and anti-generic patterns for generating visual assets. Use when the user needs AI-generated images for landing pages, marketing, or products. Covers hero images, feature illustrations, OG cards, icons, and backgrounds.
142trademark-search
Search the USPTO trademark database to check name availability and get registration details. Use when the user wants to check if a name is trademarked, research trademark availability, or look up registration status. No API key required.
116motion-design-patterns
Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium.
110recursive-improvement
A pattern for generating higher-quality output by iterating against explicit scoring criteria. Use for headlines, CTAs, landing page copy, social content, ad copy — anything where quality matters. Generate → Evaluate → Diagnose → Improve → Repeat.
80