UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart ty...
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
Open source on GitHub: github.com/hardikamal/ui-ux-craft-kit
python3 <skill_dir>/scripts/search.py "<query>" --domain <domain> [-n <max_results>]
Replace <skill_dir> with the absolute path to this skill directory.
Domains:
product — Product type recommendations (SaaS, e-commerce, portfolio)style — UI styles (glassmorphism, minimalism, brutalism) + AI promptstypography — Font pairings with Google Fonts importscolor — Color palettes by product typelanding — Page structure and CTA strategieschart — Chart types and library recommendationsux — Best practices and anti-patternsicons — Icon library recommendationsreact — React/Next.js performance guidelinesweb — Web accessibility and interface patternsgoogle-fonts — Google Fonts searchStack-specific search:
python3 <skill_dir>/scripts/search.py "<query>" --stack react-native
Design system generation:
python3 <skill_dir>/scripts/search.py "<query>" --design-system [-p "Project Name"]
Use this skill when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.
Rule: If the task changes how a feature looks, feels, moves, or is interacted with → use this skill.
Run a search to get relevant design context before generating UI code:
# Get style recommendations for a product type
python3 <skill_dir>/scripts/search.py "SaaS dashboard" --domain product
# Get color palette
python3 <skill_dir>/scripts/search.py "fintech app" --domain color
# Get font pairing
python3 <skill_dir>/scripts/search.py "modern minimal" --domain typography
# Generate a full design system
python3 <skill_dir>/scripts/search.py "fitness tracking app" --design-system -p "FitTrack"
Use the search results to inform your design decisions. The search returns prioritized, ranked results from the database.
| Priority | Category | Key Checks |
|---|---|---|
| 1 | Accessibility | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels |
| 2 | Touch & Interaction | Min 44×44px targets, Loading feedback |
| 3 | Performance | WebP/AVIF, Lazy loading, CLS < 0.1 |
| 4 | Style Selection | Match product type, Consistency, SVG icons |
| 5 | Layout & Responsive | Mobile-first, No horizontal scroll |
| 6 | Typography & Color | Base 16px, Line-height 1.5, Semantic tokens |
| 7 | Animation | 150–300ms duration, transform/opacity only |
| 8 | Forms & Feedback | Visible labels, Error near field |
| 9 | Navigation | Predictable back, Bottom nav ≤5 items |
| 10 | Charts & Data | Legends, Tooltips, Accessible colors |
prefers-reduced-motioncursor-pointer to clickable elementssrcsetwidth/height to prevent CLSfont-display: swap to avoid FOIT--domain product)width=device-width, initial-scale=1 viewport metamin-h-dvh instead of 100vh on mobiletransform/opacity only — never animate width/heightprefers-reduced-motionZIP package — ready to use