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 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 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)
1---2name: ui-ux-craft-kit3description: 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 types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient.4---5
6# UI/UX CraftKit — Design Intelligence
7
8Comprehensive 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.
9
10Open source on GitHub: [github.com/hardikamal/ui-ux-craft-kit](https://github.com/hardikamal/ui-ux-craft-kit)
11
12## Search Command
13
14```bash
15python3 <skill_dir>/scripts/search.py "<query>" --domain <domain> [-n <max_results>]
16```
17
18Replace `<skill_dir>` with the absolute path to this skill directory.
19
20**Domains:**
21- `product` — Product type recommendations (SaaS, e-commerce, portfolio)
22- `style` — UI styles (glassmorphism, minimalism, brutalism) + AI prompts
23- `typography` — Font pairings with Google Fonts imports
24- `color` — Color palettes by product type
25- `landing` — Page structure and CTA strategies
26- `chart` — Chart types and library recommendations
27- `ux` — Best practices and anti-patterns
28- `icons` — Icon library recommendations
29- `react` — React/Next.js performance guidelines
30- `web` — Web accessibility and interface patterns
31- `google-fonts` — Google Fonts search
32
33**Stack-specific search:**
34```bash
35python3 <skill_dir>/scripts/search.py "<query>" --stack react-native
36```
37
38**Design system generation:**
39```bash
40python3 <skill_dir>/scripts/search.py "<query>" --design-system [-p "Project Name"]
41```
42
43## When to Apply
44
45Use this skill when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**.
46
47### Must Use
48
49- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
50- Creating or refactoring UI components (buttons, modals, forms, tables, charts)
51- Choosing color schemes, typography systems, spacing standards, or layout systems
52- Reviewing UI code for accessibility or visual consistency
53- Implementing navigation structures, animations, or responsive behavior
54- Making product-level design decisions (style, information hierarchy, brand)
55- Improving perceived quality, clarity, or usability of interfaces
56
57### Skip
58
59- Pure backend logic development
60- API or database design only
61- Performance optimization unrelated to the interface
62- Infrastructure or DevOps work
63
64**Rule**: If the task changes how a feature **looks, feels, moves, or is interacted with** → use this skill.
65
66## How to Use (Step by Step)
67
68### Step 1: Identify the Task Domain
69Run a search to get relevant design context before generating UI code:
70
71```bash
72# Get style recommendations for a product type
73python3 <skill_dir>/scripts/search.py "SaaS dashboard" --domain product
74
75# Get color palette
76python3 <skill_dir>/scripts/search.py "fintech app" --domain color
77
78# Get font pairing
79python3 <skill_dir>/scripts/search.py "modern minimal" --domain typography
80
81# Generate a full design system
82python3 <skill_dir>/scripts/search.py "fitness tracking app" --design-system -p "FitTrack"
83```
84
85### Step 2: Apply Results
86Use the search results to inform your design decisions. The search returns prioritized, ranked results from the database.
87
88### Step 3: Quality Check Against Priority Rules
89
90| Priority | Category | Key Checks |
91|----------|----------|------------|
92| 1 | Accessibility | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels |
93| 2 | Touch & Interaction | Min 44×44px targets, Loading feedback |
94| 3 | Performance | WebP/AVIF, Lazy loading, CLS < 0.1 |
95| 4 | Style Selection | Match product type, Consistency, SVG icons |
96| 5 | Layout & Responsive | Mobile-first, No horizontal scroll |
97| 6 | Typography & Color | Base 16px, Line-height 1.5, Semantic tokens |
98| 7 | Animation | 150–300ms duration, transform/opacity only |
99| 8 | Forms & Feedback | Visible labels, Error near field |
100| 9 | Navigation | Predictable back, Bottom nav ≤5 items |
101| 10 | Charts & Data | Legends, Tooltips, Accessible colors |
102
103## Quick Reference
104
105### Accessibility (CRITICAL)
106- Minimum 4.5:1 contrast ratio for normal text
107- Visible focus rings on all interactive elements
108- Descriptive alt text for meaningful images
109- aria-labels for icon-only buttons
110- Tab order matches visual order
111- Support `prefers-reduced-motion`
112
113### Touch & Interaction (CRITICAL)
114- Min 44×44pt (Apple) / 48×48dp (Material) touch targets
115- Minimum 8px gap between touch targets
116- Use click/tap for primary interactions, not hover-only
117- Disable button + show spinner during async operations
118- Add `cursor-pointer` to clickable elements
119
120### Performance (HIGH)
121- Use WebP/AVIF + responsive `srcset`
122- Declare `width`/`height` to prevent CLS
123- `font-display: swap` to avoid FOIT
124- Lazy load below-fold images
125- Virtualize lists with 50+ items
126
127### Style Selection (HIGH)
128- Match style to product type (run `--domain product`)
129- Use SVG icons (Heroicons, Lucide) — never emoji as icons
130- One icon set/visual language across the product
131- Each screen has only one primary CTA
132
133### Layout & Responsive (HIGH)
134- `width=device-width, initial-scale=1` viewport meta
135- Design mobile-first: 375 → 768 → 1024 → 1440
136- No horizontal scroll on mobile
137- Use 4pt/8dp spacing scale
138- `min-h-dvh` instead of `100vh` on mobile
139
140### Typography & Color (MEDIUM)
141- Minimum 16px body text (avoids iOS auto-zoom)
142- Line height 1.5–1.75 for body text
143- 65–75 chars per line on desktop
144- Use semantic color tokens, not raw hex in components
145- Bold headings (600–700), Regular body (400), Medium labels (500)
146
147### Animation (MEDIUM)
148- 150–300ms for micro-interactions
149- Use `transform`/`opacity` only — never animate `width`/`height`
150- Respect `prefers-reduced-motion`
151- Exit animations 60–70% of enter duration
152- Every animation must convey meaning, not just decoration
153
154### Forms & Feedback (MEDIUM)
155- Visible label per input (not placeholder-only)
156- Show error below the related field
157- Validate on blur, not keystroke
158- Confirm before destructive actions
159- Auto-dismiss toasts in 3–5s
160
161### Navigation (HIGH)
162- Bottom nav max 5 items with labels
163- Back navigation must be predictable
164- All key screens reachable via deep link
165- State preservation when navigating back
166
167### Charts & Data (LOW)
168- Match chart type to data type (trend → line, comparison → bar)
169- Always show legend near chart
170- Provide tooltips on hover/tap
171- Use accessible color palettes (not red/green only)
aAAaqwq