How do I design accessible UI with proper color contrast and typography?▼
This Skill automates UI/UX design guidance by recommending accessible color palettes, typography pairings, and style patterns from a catalog of 50 styles, 21 palettes, and 50 font combinations. Provide your product type and design goals—dashboard, landing page, e-commerce—and receive stack-specific best practices for React, Vue, Next.js, Svelte, or mobile frameworks.
Can I use this for designing dashboards, landing pages, and e-commerce interfaces?▼
Yes. This Skill covers dashboards, landing pages, admin panels, e-commerce sites, SaaS products, portfolios, and mobile apps. It provides domain-specific guidance via dedicated data sources for each category, ensuring recommendations match your product type and platform—HTML/Tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, or Flutter.
What design assets and guidance does this Skill provide before I code?▼
Before implementation, you receive style guides, curated color palettes, typography pairings, chart recommendations, and stack-specific best practices. The Skill searches across 50 styles, 21 color palettes, 50 font pairings, and 20 chart types to generate cohesive, accessible design decisions tailored to your framework and product domain.
How do I get component and pattern guidance for buttons, cards, and navigation?▼
Describe your UI need—buttons, cards, navigation, charts—along with your product type and framework. The Skill retrieves matching component patterns, layout recommendations, spacing guidelines, and responsive design best practices from its domain-specific knowledge base, saving design iteration and rework.
Does this work with React, Vue, Next.js, and mobile frameworks like SwiftUI?▼
Yes. This Skill supports HTML/Tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, and Flutter. It delivers stack-specific guidelines, component recommendations, and best practices for each framework, ensuring your design decisions align with platform conventions and performance patterns.
What's the difference between using style guides and designing UI from scratch?▼
This Skill eliminates guesswork by providing pre-vetted style guides, color palettes, typography pairings, and accessibility standards upfront. Instead of designing from scratch, you validate choices against 50 curated styles and 21 accessible palettes, reducing rework and ensuring cohesive, accessible interfaces before code begins.
