--- 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](https://github.com/hardikamal/ui-ux-craft-kit) ## Search Command ```bash 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:** ```bash python3 /scripts/search.py "" --stack react-native ``` **Design system generation:** ```bash 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: ```bash # 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)

UI/UX CraftKit

Description

Latest Changes

Install UI/UX CraftKit with One Click