From kipi-design
Provides UI/UX design database with 50+ styles, 161 palettes, 57 font pairings, 99 guidelines, 25 chart types for web/mobile. Use for component design, page layouts, reviews, and interaction patterns.
npx claudepluginhub assafkip/kipi-systemThis skill uses the workspace's default tool permissions.
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.
data/_sync_all.pydata/app-interface.csvdata/charts.csvdata/colors.csvdata/design.csvdata/draft.csvdata/google-fonts.csvdata/icons.csvdata/landing.csvdata/products.csvdata/react-performance.csvdata/stacks/angular.csvdata/stacks/astro.csvdata/stacks/flutter.csvdata/stacks/html-tailwind.csvdata/stacks/jetpack-compose.csvdata/stacks/laravel.csvdata/stacks/nextjs.csvdata/stacks/nuxt-ui.csvdata/stacks/nuxtjs.csvProvides searchable databases of 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 charts for designing UI components, selecting colors/fonts, reviewing code UX issues, building landing pages, and responsive layouts.
Provides prioritized UI/UX guidelines for web and mobile apps: accessibility, touch interactions, performance, responsive layouts, typography, colors, animations, charts across stacks. Use for designing components/pages or reviewing UX issues.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Share bugs, ideas, or general feedback.
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.
This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.
This Skill must be invoked in the following situations:
This Skill is recommended in the following situations:
This Skill is not needed in the following situations:
Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used.
For human/AI reference: follow priority 1->10 to decide which rule category to focus on first; use --domain <Domain> to query details when needed. Scripts do not read this table.
| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |
|---|---|---|---|---|---|
| 1 | Accessibility | CRITICAL | ux | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
| 2 | Touch & Interaction | CRITICAL | ux | Min size 44x44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
| 3 | Performance | HIGH | ux | WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |
| 4 | Style Selection | HIGH | style, product | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
| 5 | Layout & Responsive | HIGH | ux | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
| 6 | Typography & Color | MEDIUM | typography, color | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
| 7 | Animation | MEDIUM | ux | Duration 150-300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
| 8 | Forms & Feedback | MEDIUM | ux | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
| 9 | Navigation Patterns | HIGH | ux | Predictable back, Bottom nav <=5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
| 10 | Charts & Data | LOW | chart | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
Read these files for detailed rules, workflow instructions, and checklists:
| File | Contents |
|---|---|
references/ux-guidelines.md | Full quick reference for all 10 rule categories (accessibility, touch, performance, style, layout, typography, animation, forms, navigation, charts) |
references/workflow.md | How to use the search CLI, prerequisites, step-by-step workflow (Steps 1-4), domain/stack reference tables |
references/examples.md | Complete example workflow (AI search homepage) |
references/checklist.md | Output formats, query tips, common sticking points, professional UI rules (icons, interaction, light/dark mode, layout/spacing), and pre-delivery checklist |
| File | Contents |
|---|---|
references/canvas-design-system.md | Canvas-based design system |
references/shadcn-accessibility.md | shadcn/ui accessibility patterns |
references/shadcn-components.md | shadcn/ui component reference |
references/shadcn-theming.md | shadcn/ui theming guide |
references/tailwind-customization.md | Tailwind CSS customization |
references/tailwind-responsive.md | Tailwind responsive patterns |
references/tailwind-utilities.md | Tailwind utility classes |