UI/UX CraftKit

---

name: ui-ux-craft-kit description: "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."

---

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 /scripts/search.py "" --domain  [-n ]

Replace 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 /scripts/search.py "" --stack react-native

Design system generation:

python3 /scripts/search.py "" --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 /scripts/search.py "SaaS dashboard" --domain product
Get color palette
python3 /scripts/search.py "fintech app" --domain color
Get font pairing
python3 /scripts/search.py "modern minimal" --domain typography
Generate a full design system
python3 /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)