{"skill":{"slug":"ui-ux-craft-kit","displayName":"UI/UX CraftKit","summary":"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...","description":"---\nname: ui-ux-craft-kit\ndescription: \"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.\"\n---\n\n# UI/UX CraftKit — Design Intelligence\n\nComprehensive 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.\n\nOpen source on GitHub: [github.com/hardikamal/ui-ux-craft-kit](https://github.com/hardikamal/ui-ux-craft-kit)\n\n## Search Command\n\n```bash\npython3 <skill_dir>/scripts/search.py \"<query>\" --domain <domain> [-n <max_results>]\n```\n\nReplace `<skill_dir>` with the absolute path to this skill directory.\n\n**Domains:**\n- `product` — Product type recommendations (SaaS, e-commerce, portfolio)\n- `style` — UI styles (glassmorphism, minimalism, brutalism) + AI prompts\n- `typography` — Font pairings with Google Fonts imports\n- `color` — Color palettes by product type\n- `landing` — Page structure and CTA strategies\n- `chart` — Chart types and library recommendations\n- `ux` — Best practices and anti-patterns\n- `icons` — Icon library recommendations\n- `react` — React/Next.js performance guidelines\n- `web` — Web accessibility and interface patterns\n- `google-fonts` — Google Fonts search\n\n**Stack-specific search:**\n```bash\npython3 <skill_dir>/scripts/search.py \"<query>\" --stack react-native\n```\n\n**Design system generation:**\n```bash\npython3 <skill_dir>/scripts/search.py \"<query>\" --design-system [-p \"Project Name\"]\n```\n\n## When to Apply\n\nUse this skill when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**.\n\n### Must Use\n\n- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)\n- Creating or refactoring UI components (buttons, modals, forms, tables, charts)\n- Choosing color schemes, typography systems, spacing standards, or layout systems\n- Reviewing UI code for accessibility or visual consistency\n- Implementing navigation structures, animations, or responsive behavior\n- Making product-level design decisions (style, information hierarchy, brand)\n- Improving perceived quality, clarity, or usability of interfaces\n\n### Skip\n\n- Pure backend logic development\n- API or database design only\n- Performance optimization unrelated to the interface\n- Infrastructure or DevOps work\n\n**Rule**: If the task changes how a feature **looks, feels, moves, or is interacted with** → use this skill.\n\n## How to Use (Step by Step)\n\n### Step 1: Identify the Task Domain\nRun a search to get relevant design context before generating UI code:\n\n```bash\n# Get style recommendations for a product type\npython3 <skill_dir>/scripts/search.py \"SaaS dashboard\" --domain product\n\n# Get color palette\npython3 <skill_dir>/scripts/search.py \"fintech app\" --domain color\n\n# Get font pairing\npython3 <skill_dir>/scripts/search.py \"modern minimal\" --domain typography\n\n# Generate a full design system\npython3 <skill_dir>/scripts/search.py \"fitness tracking app\" --design-system -p \"FitTrack\"\n```\n\n### Step 2: Apply Results\nUse the search results to inform your design decisions. The search returns prioritized, ranked results from the database.\n\n### Step 3: Quality Check Against Priority Rules\n\n| Priority | Category | Key Checks |\n|----------|----------|------------|\n| 1 | Accessibility | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels |\n| 2 | Touch & Interaction | Min 44×44px targets, Loading feedback |\n| 3 | Performance | WebP/AVIF, Lazy loading, CLS < 0.1 |\n| 4 | Style Selection | Match product type, Consistency, SVG icons |\n| 5 | Layout & Responsive | Mobile-first, No horizontal scroll |\n| 6 | Typography & Color | Base 16px, Line-height 1.5, Semantic tokens |\n| 7 | Animation | 150–300ms duration, transform/opacity only |\n| 8 | Forms & Feedback | Visible labels, Error near field |\n| 9 | Navigation | Predictable back, Bottom nav ≤5 items |\n| 10 | Charts & Data | Legends, Tooltips, Accessible colors |\n\n## Quick Reference\n\n### Accessibility (CRITICAL)\n- Minimum 4.5:1 contrast ratio for normal text\n- Visible focus rings on all interactive elements\n- Descriptive alt text for meaningful images\n- aria-labels for icon-only buttons\n- Tab order matches visual order\n- Support `prefers-reduced-motion`\n\n### Touch & Interaction (CRITICAL)\n- Min 44×44pt (Apple) / 48×48dp (Material) touch targets\n- Minimum 8px gap between touch targets\n- Use click/tap for primary interactions, not hover-only\n- Disable button + show spinner during async operations\n- Add `cursor-pointer` to clickable elements\n\n### Performance (HIGH)\n- Use WebP/AVIF + responsive `srcset`\n- Declare `width`/`height` to prevent CLS\n- `font-display: swap` to avoid FOIT\n- Lazy load below-fold images\n- Virtualize lists with 50+ items\n\n### Style Selection (HIGH)\n- Match style to product type (run `--domain product`)\n- Use SVG icons (Heroicons, Lucide) — never emoji as icons\n- One icon set/visual language across the product\n- Each screen has only one primary CTA\n\n### Layout & Responsive (HIGH)\n- `width=device-width, initial-scale=1` viewport meta\n- Design mobile-first: 375 → 768 → 1024 → 1440\n- No horizontal scroll on mobile\n- Use 4pt/8dp spacing scale\n- `min-h-dvh` instead of `100vh` on mobile\n\n### Typography & Color (MEDIUM)\n- Minimum 16px body text (avoids iOS auto-zoom)\n- Line height 1.5–1.75 for body text\n- 65–75 chars per line on desktop\n- Use semantic color tokens, not raw hex in components\n- Bold headings (600–700), Regular body (400), Medium labels (500)\n\n### Animation (MEDIUM)\n- 150–300ms for micro-interactions\n- Use `transform`/`opacity` only — never animate `width`/`height`\n- Respect `prefers-reduced-motion`\n- Exit animations 60–70% of enter duration\n- Every animation must convey meaning, not just decoration\n\n### Forms & Feedback (MEDIUM)\n- Visible label per input (not placeholder-only)\n- Show error below the related field\n- Validate on blur, not keystroke\n- Confirm before destructive actions\n- Auto-dismiss toasts in 3–5s\n\n### Navigation (HIGH)\n- Bottom nav max 5 items with labels\n- Back navigation must be predictable\n- All key screens reachable via deep link\n- State preservation when navigating back\n\n### Charts & Data (LOW)\n- Match chart type to data type (trend → line, comparison → bar)\n- Always show legend near chart\n- Provide tooltips on hover/tap\n- Use accessible color palettes (not red/green only)\n","tags":{"design":"1.0.1","latest":"1.0.1","mobile":"1.0.1","ui":"1.0.1","ux":"1.0.1"},"stats":{"comments":0,"downloads":859,"installsAllTime":3,"installsCurrent":3,"stars":0,"versions":2},"createdAt":1773254542718,"updatedAt":1778491839794},"latestVersion":{"version":"1.0.1","createdAt":1773254568593,"changelog":"Initial release by Hardik Amal","license":"MIT-0"},"metadata":null,"owner":{"handle":"hardikamal","userId":"s17afsgy535hky3yq06yr6dn9184571q","displayName":"hardikamal","image":"https://avatars.githubusercontent.com/u/6275562?v=4"},"moderation":null}