UI/UX CraftKit — Design Intelligence

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

Search Command

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 prompts - typography — Font pairings with Google Fonts imports - color — Color palettes by product type - landing — Page structure and CTA strategies - chart — Chart types and library recommendations - ux — Best practices and anti-patterns - icons — Icon library recommendations - react — React/Next.js performance guidelines - web — Web accessibility and interface patterns - google-fonts — Google Fonts search

Stack-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"]

When to Apply

Use this skill when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

Must Use

• Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
• Creating or refactoring UI components (buttons, modals, forms, tables, charts)
• Choosing color schemes, typography systems, spacing standards, or layout systems
• Reviewing UI code for accessibility or visual consistency
• Implementing navigation structures, animations, or responsive behavior
• Making product-level design decisions (style, information hierarchy, brand)
• Improving perceived quality, clarity, or usability of interfaces

Skip

• Pure backend logic development
• API or database design only
• Performance optimization unrelated to the interface
• Infrastructure or DevOps work

Rule: If the task changes how a feature looks, feels, moves, or is interacted with → use this skill.

How to Use (Step by Step)

Step 1: Identify the Task Domain

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"

Step 2: Apply Results

Use the search results to inform your design decisions. The search returns prioritized, ranked results from the database.

Step 3: Quality Check Against Priority Rules

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

Quick Reference

Accessibility (CRITICAL)

• Minimum 4.5:1 contrast ratio for normal text
• Visible focus rings on all interactive elements
• Descriptive alt text for meaningful images
• aria-labels for icon-only buttons
• Tab order matches visual order
• Support prefers-reduced-motion

Touch & Interaction (CRITICAL)

• Min 44×44pt (Apple) / 48×48dp (Material) touch targets
• Minimum 8px gap between touch targets
• Use click/tap for primary interactions, not hover-only
• Disable button + show spinner during async operations
• Add cursor-pointer to clickable elements

Performance (HIGH)

• Use WebP/AVIF + responsive srcset
• Declare width/height to prevent CLS
• font-display: swap to avoid FOIT
• Lazy load below-fold images
• Virtualize lists with 50+ items

Style Selection (HIGH)

• Match style to product type (run --domain product)
• Use SVG icons (Heroicons, Lucide) — never emoji as icons
• One icon set/visual language across the product
• Each screen has only one primary CTA

Layout & Responsive (HIGH)

• width=device-width, initial-scale=1 viewport meta
• Design mobile-first: 375 → 768 → 1024 → 1440
• No horizontal scroll on mobile
• Use 4pt/8dp spacing scale
• min-h-dvh instead of 100vh on mobile

Typography & Color (MEDIUM)

• Minimum 16px body text (avoids iOS auto-zoom)
• Line height 1.5–1.75 for body text
• 65–75 chars per line on desktop
• Use semantic color tokens, not raw hex in components
• Bold headings (600–700), Regular body (400), Medium labels (500)

Animation (MEDIUM)

• 150–300ms for micro-interactions
• Use transform/opacity only — never animate width/height
• Respect prefers-reduced-motion
• Exit animations 60–70% of enter duration
• Every animation must convey meaning, not just decoration

Forms & Feedback (MEDIUM)

• Visible label per input (not placeholder-only)
• Show error below the related field
• Validate on blur, not keystroke
• Confirm before destructive actions
• Auto-dismiss toasts in 3–5s

Navigation (HIGH)

• Bottom nav max 5 items with labels
• Back navigation must be predictable
• All key screens reachable via deep link
• State preservation when navigating back

Charts & Data (LOW)

• Match chart type to data type (trend → line, comparison → bar)
• Always show legend near chart
• Provide tooltips on hover/tap
• Use accessible color palettes (not red/green only)