visual-qa
Visual QA
Use vision models to self-review screenshots against design intent. Catch spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps before shipping.
When to Use
- User asks to "review this design" or "check this screenshot"
- After building a page/component, before shipping
- User wants to compare implementation vs mockup/reference
- User asks "does this look right?" or "what's off about this?"
- Automated design QA step in a build workflow
Core Philosophy
- Screenshot first, then critique. Always look at the actual rendered output, not just the code.
- Be specific. "The spacing looks off" is useless. "The gap between the heading and paragraph is 32px but should be 16px based on the surrounding spacing rhythm" is useful.
- Prioritize impact. Not every pixel matters. Focus on what users will actually notice.
- Reference the intent. Compare against design tokens, mockups, or stated design goals.
More from dylanfeltus/skills
producthunt
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.
142design-tokens
Generate type scales, color palettes, spacing systems, WCAG contrast checks, and dark mode derivations with math. Use when setting up a design system, creating tokens, or building a Tailwind/CSS theme. Outputs CSS custom properties, Tailwind config, or JSON tokens.
130trademark-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