design

Skill consolidé (fusion de : ui-styling, ui-ux-pro-max, frontend-design, design, design-system, extract-design-system, web-design-guidelines, impeccable). Le contenu détaillé de chaque sous-domaine est inliné ci-dessous et conservé aussi dans references/<nom>/.

ui-styling

UI Styling Skill

Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.

Reference

shadcn/ui: https://ui.shadcn.com/llms.txt
Tailwind CSS: https://tailwindcss.com/docs

When to Use This Skill

Use when:

Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
Implementing accessible components (dialogs, forms, tables, navigation)
Styling with utility-first CSS approach
Creating responsive, mobile-first layouts
Implementing dark mode and theme customization
Building design systems with consistent tokens
Generating visual designs, posters, or brand materials
Rapid prototyping with immediate visual feedback
Adding complex UI patterns (data tables, charts, command palettes)

Core Stack

Component Layer: shadcn/ui

Pre-built accessible components via Radix UI primitives
Copy-paste distribution model (components live in your codebase)
TypeScript-first with full type safety
Composable primitives for complex UIs
CLI-based installation and management

Styling Layer: Tailwind CSS

Utility-first CSS framework
Build-time processing with zero runtime overhead
Mobile-first responsive design
Consistent design tokens (colors, spacing, typography)
Automatic dead code elimination

Visual Design Layer: Canvas

Museum-quality visual compositions
Philosophy-driven design approach
Sophisticated visual communication
Minimal text, maximum visual impact
Systematic patterns and refined aesthetics

Quick Start

Component + Styling Setup

Install shadcn/ui with Tailwind:

npx shadcn@latest init

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

Add components:

npx shadcn@latest add button card dialog form

Use components with utility styling:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Alternative: Tailwind-Only Setup

Vite projects:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

Component Library Guide

Comprehensive component catalog with usage patterns, installation, and composition examples.

See: references/shadcn-components.md

Covers:

Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
Feedback & status (Alert, Progress, Skeleton)
Display components (Table, Data Table, Avatar, Badge)

Theme & Customization

Theme configuration, CSS variables, dark mode implementation, and component customization.

See: references/shadcn-theming.md

Covers:

Dark mode setup with next-themes
CSS variable system
Color customization and palettes
Component variant customization
Theme toggle implementation

Accessibility Patterns

ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.

See: references/shadcn-accessibility.md

Covers:

Radix UI accessibility features
Keyboard navigation patterns
Focus management
Screen reader announcements
Form validation accessibility

Tailwind Utilities

Core utility classes for layout, spacing, typography, colors, borders, and shadows.

See: references/tailwind-utilities.md

Covers:

Layout utilities (Flexbox, Grid, positioning)
Spacing system (padding, margin, gap)
Typography (font sizes, weights, alignment, line height)
Colors and backgrounds
Borders and shadows
Arbitrary values for custom styling

Responsive Design

Mobile-first breakpoints, responsive utilities, and adaptive layouts.

See: references/tailwind-responsive.md

Covers:

Mobile-first approach
Breakpoint system (sm, md, lg, xl, 2xl)
Responsive utility patterns
Container queries
Max-width queries
Custom breakpoints

Tailwind Customization

Config file structure, custom utilities, plugins, and theme extensions.

See: references/tailwind-customization.md

Covers:

@theme directive for custom tokens
Custom colors and fonts
Spacing and breakpoint extensions
Custom utility creation
Custom variants
Layer organization (@layer base, components, utilities)
Apply directive for component extraction

Visual Design System

Canvas-based design philosophy, visual communication principles, and sophisticated compositions.

See: references/canvas-design-system.md

Covers:

Design philosophy approach
Visual communication over text
Systematic patterns and composition
Color, form, and spatial design
Minimal text integration
Museum-quality execution
Multi-page design systems

Utility Scripts

Python automation for component installation and configuration generation.

shadcn_add.py

Add shadcn/ui components with dependency handling:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generate tailwind.config.js with custom theme:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Best Practices

Component Composition: Build complex UIs from simple, composable primitives
Utility-First Styling: Use Tailwind classes directly; extract components only for true repetition
Mobile-First Responsive: Start with mobile styles, layer responsive variants
Accessibility-First: Leverage Radix UI primitives, add focus states, use semantic HTML
Design Tokens: Use consistent spacing scale, color palettes, typography system
Dark Mode Consistency: Apply dark variants to all themed elements
Performance: Leverage automatic CSS purging, avoid dynamic class names
TypeScript: Use full type safety for better DX
Visual Hierarchy: Let composition guide attention, use spacing and color intentionally
Expert Craftsmanship: Every detail matters - treat UI as a craft

Reference Navigation

Component Library

references/shadcn-components.md - Complete component catalog
references/shadcn-theming.md - Theming and customization
references/shadcn-accessibility.md - Accessibility patterns

Styling System

references/tailwind-utilities.md - Core utility classes
references/tailwind-responsive.md - Responsive design
references/tailwind-customization.md - Configuration and extensions

Visual Design

references/canvas-design-system.md - Design philosophy and canvas workflows

Automation

scripts/shadcn_add.py - Component installation
scripts/tailwind_config_gen.py - Config generation

Common Patterns

Form with validation:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

Responsive layout with dark mode:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

Resources

shadcn/ui Docs: https://ui.shadcn.com
Tailwind CSS Docs: https://tailwindcss.com
Radix UI: https://radix-ui.com
Tailwind UI: https://tailwindui.com
Headless UI: https://headlessui.com
v0 (AI UI Generator): https://v0.dev

ui-ux-pro-max

UI/UX Pro Max - 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.

When to Apply

This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

Must Use

This Skill must be invoked in the following situations:

Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
Choosing color schemes, typography systems, spacing standards, or layout systems
Reviewing UI code for user experience, accessibility, or visual consistency
Implementing navigation structures, animations, or responsive behavior
Making product-level design decisions (style, information hierarchy, brand expression)
Improving perceived quality, clarity, or usability of interfaces

Skip

This Skill is not needed in the following situations:

Pure backend logic development
Only involving API or database design
Performance optimization unrelated to the interface
Infrastructure or DevOps work
Non-visual scripts or automation tasks

Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used.

Rule Categories by Priority

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 44×44px, 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

Quick Reference

1. Accessibility (CRITICAL)

color-contrast - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design
focus-states - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)
alt-text - Descriptive alt text for meaningful images
aria-labels - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)
keyboard-nav - Tab order matches visual order; full keyboard support (Apple HIG)
form-labels - Use label with for attribute
skip-links - Skip to main content for keyboard users
heading-hierarchy - Sequential h1→h6, no level skip
color-not-only - Don't convey info by color alone (add icon/text)
dynamic-type - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)
reduced-motion - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD)
voiceover-sr - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD)
escape-routes - Provide cancel/back in modals and multi-step flows (Apple HIG)
keyboard-shortcuts - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)

2. Touch & Interaction (CRITICAL)

touch-target-size - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed
touch-spacing - Minimum 8px/8dp gap between touch targets (Apple HIG, MD)
hover-vs-tap - Use click/tap for primary interactions; don't rely on hover alone
loading-buttons - Disable button during async operations; show spinner or progress
error-feedback - Clear error messages near problem
cursor-pointer - Add cursor-pointer to clickable elements (Web)
gesture-conflicts - Avoid horizontal swipe on main content; prefer vertical scroll
tap-delay - Use touch-action: manipulation to reduce 300ms delay (Web)
standard-gestures - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)
system-gestures - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)
press-feedback - Visual feedback on press (ripple/highlight; MD state layers)
haptic-feedback - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)
gesture-alternative - Don't rely on gesture-only interactions; always provide visible controls for critical actions
safe-area-awareness - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges
no-precision-required - Avoid requiring pixel-perfect taps on small icons or thin edges
swipe-clarity - Swipe actions must show clear affordance or hint (chevron, label, tutorial)
drag-threshold - Use a movement threshold before starting drag to avoid accidental drags

3. Performance (HIGH)

image-optimization - Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets
image-dimension - Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)
font-loading - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)
font-preload - Preload only critical fonts; avoid overusing preload on every variant
critical-css - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)
lazy-loading - Lazy load non-hero components via dynamic import / route-level splitting
bundle-splitting - Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI
third-party-scripts - Load third-party scripts async/defer; audit and remove unnecessary ones (MD)
reduce-reflows - Avoid frequent layout reads/writes; batch DOM reads then writes
content-jumping - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)
lazy-load-below-fold - Use loading="lazy" for below-the-fold images and heavy media
virtualize-lists - Virtualize lists with 50+ items to improve memory efficiency and scroll performance
main-thread-budget - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)
progressive-loading - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG)
input-latency - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard)
tap-feedback-speed - Provide visual feedback within 100ms of tap (Apple HIG)
debounce-throttle - Use debounce/throttle for high-frequency events (scroll, resize, input)
offline-support - Provide offline state messaging and basic fallback (PWA / mobile)
network-fallback - Offer degraded modes for slow networks (lower-res images, fewer animations)

4. Style Selection (HIGH)

style-match - Match style to product type (use --design-system for recommendations)
consistency - Use same style across all pages
no-emoji-icons - Use SVG icons (Heroicons, Lucide), not emojis
color-palette-from-product - Choose palette from product/industry (search --domain color)
effects-match-style - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.)
platform-adaptive - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion
state-clarity - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
elevation-consistent - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
dark-mode-pairing - Design light/dark variants together to keep brand, contrast, and style consistent
icon-style-consistent - Use one icon set/visual language (stroke width, corner radius) across the product
system-controls - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
blur-purpose - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)
primary-action - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)

5. Layout & Responsive (HIGH)

viewport-meta - width=device-width initial-scale=1 (never disable zoom)
mobile-first - Design mobile-first, then scale up to tablet and desktop
breakpoint-consistency - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)
readable-font-size - Minimum 16px body text on mobile (avoids iOS auto-zoom)
line-length-control - Mobile 35–60 chars per line; desktop 60–75 chars
horizontal-scroll - No horizontal scroll on mobile; ensure content fits viewport width
spacing-scale - Use 4pt/8dp incremental spacing system (Material Design)
touch-density - Keep component spacing comfortable for touch: not cramped, not causing mis-taps
container-width - Consistent max-width on desktop (max-w-6xl / 7xl)
z-index-management - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)
fixed-element-offset - Fixed navbar/bottom bar must reserve safe padding for underlying content
scroll-behavior - Avoid nested scroll regions that interfere with the main scroll experience
viewport-units - Prefer min-h-dvh over 100vh on mobile
orientation-support - Keep layout readable and operable in landscape mode
content-priority - Show core content first on mobile; fold or hide secondary content
visual-hierarchy - Establish hierarchy via size, spacing, contrast — not color alone

6. Typography & Color (MEDIUM)

line-height - Use 1.5-1.75 for body text
line-length - Limit to 65-75 characters per line
font-pairing - Match heading/body font personalities
font-scale - Consistent type scale (e.g. 12 14 16 18 24 32)
contrast-readability - Darker text on light backgrounds (e.g. slate-900 on white)
text-styles-system - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
weight-hierarchy - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
color-semantic - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
color-dark-mode - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
color-accessible-pairs - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
color-not-decorative-only - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
truncation-strategy - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)
letter-spacing - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)
number-tabular - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift
whitespace-balance - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)

7. Animation (MEDIUM)

duration-timing - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
transform-performance - Use transform/opacity only; avoid animating width/height/top/left
loading-states - Show skeleton or progress indicator when loading exceeds 300ms
excessive-motion - Animate 1-2 key elements per view max
easing - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions
motion-meaning - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
state-transition - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
continuity - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
parallax-subtle - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
spring-physics - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)
exit-faster-than-enter - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
stagger-sequence - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)
shared-element-transition - Use shared element / hero transitions for visual continuity between screens (MD, HIG)
interruptible - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG)
no-blocking-animation - Never block user input during an animation; UI must stay interactive (Apple HIG)
fade-crossfade - Use crossfade for content replacement within the same container (MD)
scale-feedback - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)
gesture-feedback - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)
hierarchy-motion - Use translate/scale direction to express hierarchy: enter from below = deeper, exit upward = back (MD)
motion-consistency - Unify duration/easing tokens globally; all animations share the same rhythm and feel
opacity-threshold - Fading elements should not linger below opacity 0.2; either fade fully or remain visible
modal-motion - Modals/sheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD)
navigation-direction - Forward navigation animates left/up; backward animates right/down — keep direction logically consistent (HIG)
layout-shift-avoid - Animations must not cause layout reflow or CLS; use transform for position changes

8. Forms & Feedback (MEDIUM)

input-labels - Visible label per input (not placeholder-only)
error-placement - Show error below the related field
submit-feedback - Loading then success/error state on submit
required-indicators - Mark required fields (e.g. asterisk)
empty-states - Helpful message and action when no content
toast-dismiss - Auto-dismiss toasts in 3-5s
confirmation-dialogs - Confirm before destructive actions
input-helper-text - Provide persistent helper text below complex inputs, not just placeholder (Material Design)
disabled-states - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)
progressive-disclosure - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)
inline-validation - Validate on blur (not keystroke); show error only after user finishes input (MD)
input-type-keyboard - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)
password-toggle - Provide show/hide toggle for password fields (MD)
autofill-support - Use autocomplete / textContentType attributes so the system can autofill (HIG, MD)
undo-support - Allow undo for destructive or bulk actions (e.g. "Undo delete" toast) (Apple HIG)
success-feedback - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD)
error-recovery - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD)
multi-step-progress - Multi-step flows show step indicator or progress bar; allow back navigation (MD)
form-autosave - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG)
sheet-dismiss-confirm - Confirm before dismissing a sheet/modal with unsaved changes (Apple HIG)
error-clarity - Error messages must state cause + how to fix (not just "Invalid input") (HIG, MD)
field-grouping - Group related fields logically (fieldset/legend or visual grouping) (MD)
read-only-distinction - Read-only state should be visually and semantically different from disabled (MD)
focus-management - After submit error, auto-focus the first invalid field (WCAG, MD)
error-summary - For multiple errors, show summary at top with anchor links to each field (WCAG)
touch-friendly-input - Mobile input height ≥44px to meet touch target requirements (Apple HIG)
destructive-emphasis - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD)
toast-accessibility - Toasts must not steal focus; use aria-live="polite" for screen reader announcement (WCAG)
aria-live-errors - Form errors use aria-live region or role="alert" to notify screen readers (WCAG)
contrast-feedback - Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD)
timeout-feedback - Request timeout must show clear feedback with retry option (MD)

9. Navigation Patterns (HIGH)

bottom-nav-limit - Bottom navigation max 5 items; use labels with icons (Material Design)
drawer-usage - Use drawer/sidebar for secondary navigation, not primary actions (Material Design)
back-behavior - Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD)
deep-linking - All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD)
tab-bar-ios - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)
top-app-bar-android - Android: use Top App Bar with navigation icon for primary structure (Material Design)
nav-label-icon - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)
nav-state-active - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)
nav-hierarchy - Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD)
modal-escape - Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG)
search-accessible - Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD)
breadcrumb-web - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)
state-preservation - Navigating back must restore previous scroll position, filter state, and input (HIG, MD)
gesture-nav-support - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)
tab-badge - Use badges on nav items sparingly to indicate unread/pending; clear after user visits (HIG, MD)
overflow-menu - When actions exceed available space, use overflow/more menu instead of cramming (MD)
bottom-nav-top-level - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)
adaptive-navigation - Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav (Material Adaptive)
back-stack-integrity - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)
navigation-consistency - Navigation placement must stay the same across all pages; don't change by page type
avoid-mixed-patterns - Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level
modal-vs-navigation - Modals must not be used for primary navigation flows; they break the user's path (HIG)
focus-on-route-change - After page transition, move focus to main content region for screen reader users (WCAG)
persistent-nav - Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD)
destructive-nav-separation - Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD)
empty-nav-state - When a nav destination is unavailable, explain why instead of silently hiding it (MD)

10. Charts & Data (LOW)

chart-type - Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut)
color-guidance - Use accessible color palettes; avoid red/green only pairs for colorblind users (WCAG, MD)
data-table - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)
pattern-texture - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)
legend-visible - Always show legend; position near the chart, not detached below a scroll fold (MD)
tooltip-on-interact - Provide tooltips/data labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)
axis-labels - Label axes with units and readable scale; avoid truncated or rotated labels on mobile
responsive-chart - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)
empty-data-state - Show meaningful empty state when no data exists ("No data yet" + guidance), not a blank chart (MD)
loading-chart - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame
animation-optional - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)
large-dataset - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)
number-formatting - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)
touch-target-chart - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)
no-pie-overuse - Avoid pie/donut for >5 categories; switch to bar chart for clarity
contrast-data - Data lines/bars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)
legend-interactive - Legends should be clickable to toggle series visibility (MD)
direct-labeling - For small datasets, label values directly on the chart to reduce eye travel
tooltip-keyboard - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)
sortable-table - Data tables must support sorting with aria-sort indicating current sort state (WCAG)
axis-readability - Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens
data-density - Limit information density per chart to avoid cognitive overload; split into multiple charts if needed
trend-emphasis - Emphasize data trends over decoration; avoid heavy gradients/shadows that obscure the data
gridline-subtle - Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data
focusable-elements - Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG)
screen-reader-summary - Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG)
error-state-chart - Data load failure must show error message with retry action, not a broken/empty chart
export-option - For data-heavy products, offer CSV/image export of chart data
drill-down-consistency - Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb
time-scale-clarity - Time series charts must clearly label time granularity (day/week/month) and allow switching

How to Use

Search specific domains using the CLI tool below.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

How to Use This Skill

Use this skill when the user requests any of the following:

Scenario	Trigger Examples	Start From
New project / page	"Build a landing page", "Build a dashboard"	Step 1 → Step 2 (design system)
New component	"Create a pricing card", "Add a modal"	Step 3 (domain search: style, ux)
Choose style / color / font	"What style fits a fintech app?", "Recommend a color palette"	Step 2 (design system)
Review existing UI	"Review this page for UX issues", "Check accessibility"	Quick Reference checklist above
Fix a UI bug	"Button hover is broken", "Layout shifts on load"	Quick Reference → relevant section
Improve / optimize	"Make this faster", "Improve mobile experience"	Step 3 (domain search: ux, react)
Implement dark mode	"Add dark mode support"	Step 3 (domain: style "dark mode")
Add charts / data viz	"Add an analytics dashboard chart"	Step 3 (domain: chart)
Stack best practices	"React performance tips"、"SwiftUI navigation"	Step 4 (stack search)

Follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

Product type: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
Target audience: C-end consumer users; consider age group, usage context (commute, leisure, work)
Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
Stack: React Native (this project's only tech stack)

Step 2: Generate Design System (REQUIRED)

Always start with --design-system to get comprehensive recommendations with reasoning:

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

This command:

Searches domains in parallel (product, style, color, landing, typography)
Applies reasoning rules from ui-reasoning.csv to select best matches
Returns complete design system: pattern, style, colors, typography, effects
Includes anti-patterns to avoid

Example:

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for hierarchical retrieval across sessions, add --persist:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates:

design-system/MASTER.md — Global Source of Truth with all design rules
design-system/pages/ — Folder for page-specific overrides

With page-specific override:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

This also creates:

design-system/pages/dashboard.md — Page-specific deviations from Master

How hierarchical retrieval works:

When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/MASTER.md exclusively

Context-aware retrieval prompt:

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

Step 3: Supplement with Detailed Searches (as needed)

After getting the design system, use domain searches to get additional details:

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

When to use detailed searches:

Need	Domain	Example
Product type patterns	`product`	`--domain product "entertainment social"`
More style options	`style`	`--domain style "glassmorphism dark"`
Color palettes	`color`	`--domain color "entertainment vibrant"`
Font pairings	`typography`	`--domain typography "playful modern"`
Chart recommendations	`chart`	`--domain chart "real-time dashboard"`
UX best practices	`ux`	`--domain ux "animation accessibility"`
Alternative fonts	`typography`	`--domain typography "elegant luxury"`
Individual Google Fonts	`google-fonts`	`--domain google-fonts "sans serif popular variable"`
Landing structure	`landing`	`--domain landing "hero social-proof"`
React Native perf	`react`	`--domain react "rerender memo list"`
App interface a11y	`web`	`--domain web "accessibilityLabel touch safe-areas"`
AI prompt / CSS keywords	`prompt`	`--domain prompt "minimalism"`

Step 4: Stack Guidelines (React Native)

Get React Native implementation-specific best practices:

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native

Search Reference

Available Domains

Domain	Use For	Example Keywords
`product`	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty, service
`style`	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
`typography`	Font pairings, Google Fonts	elegant, playful, professional, modern
`color`	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech, service
`landing`	Page structure, CTA strategies	hero, hero-centric, testimonial, pricing, social-proof
`chart`	Chart types, library recommendations	trend, comparison, timeline, funnel, pie
`ux`	Best practices, anti-patterns	animation, accessibility, z-index, loading
`google-fonts`	Individual Google Fonts lookup	sans serif, monospace, japanese, variable font, popular
`react`	React/Next.js performance	waterfall, bundle, suspense, memo, rerender, cache
`web`	App interface guidelines (iOS/Android/React Native)	accessibilityLabel, touch targets, safe areas, Dynamic Type
`prompt`	AI prompts, CSS keywords	(style name)

Available Stacks

Stack	Focus
`react-native`	Components, Navigation, Lists

Example Workflow

User request: "Make an AI search homepage."

Step 1: Analyze Requirements

Product type: Tool (AI search engine)
Target audience: C-end users looking for fast, intelligent search
Style keywords: modern, minimal, content-first, dark mode
Stack: React Native

Step 2: Generate Design System (REQUIRED)

python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"

Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.

Step 3: Supplement with Detailed Searches (as needed)

# Get style options for a modern tool product
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style

# Get UX best practices for search interaction and loading
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux

Step 4: Stack Guidelines

python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native

Then: Synthesize design system + detailed searches and implement the design.

Output Formats

The --design-system flag supports two output formats:

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

Tips for Better Results

Query Strategy

Use multi-dimensional keywords — combine product + industry + tone + density: "entertainment social vibrant content-dense" not just "app"
Try different keywords for the same need: "playful neon" → "vibrant dark" → "content-first minimal"
Use --design-system first for full recommendations, then --domain to deep-dive any dimension you're unsure about
Always add --stack react-native for implementation-specific guidance

Common Sticking Points

Problem	What to Do
Can't decide on style/color	Re-run `--design-system` with different keywords
Dark mode contrast issues	Quick Reference §6: `color-dark-mode` + `color-accessible-pairs`
Animations feel unnatural	Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter`
Form UX is poor	Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management`
Navigation feels confusing	Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior`
Layout breaks on small screens	Quick Reference §5: `mobile-first` + `breakpoint-consistency`
Performance / jank	Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle`

Pre-Delivery Checklist

Run --domain ux "animation accessibility z-index loading" as a UX validation pass before implementation
Run through Quick Reference §1–§3 (CRITICAL + HIGH) as a final review
Test on 375px (small phone) and landscape orientation
Verify behavior with reduced-motion enabled and Dynamic Type at largest size
Check dark mode contrast independently (don't assume light mode values work)
Confirm all touch targets ≥44pt and no content hidden behind safe areas

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional: Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.

Icons & Visual Elements

Rule	Standard	Avoid	Why It Matters
No Emoji as Structural Icons	Use vector-based icons (e.g., Lucide, react-native-vector-icons, @expo/vector-icons).	Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls.	Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens.
Vector-Only Assets	Use SVG or platform vector icons that scale cleanly and support theming.	Raster PNG icons that blur or pixelate.	Ensures scalability, crisp rendering, and dark/light mode adaptability.
Stable Interaction States	Use color, opacity, or elevation transitions for press states without changing layout bounds.	Layout-shifting transforms that move surrounding content or trigger visual jitter.	Prevents unstable interactions and preserves smooth motion/perceived quality on mobile.
Correct Brand Logos	Use official brand assets and follow their usage guidelines (spacing, color, clear space).	Guessing logo paths, recoloring unofficially, or modifying proportions.	Prevents brand misuse and ensures legal/platform compliance.
Consistent Icon Sizing	Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg).	Mixing arbitrary values like 20pt / 24pt / 28pt randomly.	Maintains rhythm and visual hierarchy across the interface.
Stroke Consistency	Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px).	Mixing thick and thin stroke styles arbitrarily.	Inconsistent strokes reduce perceived polish and cohesion.
Filled vs Outline Discipline	Use one icon style per hierarchy level.	Mixing filled and outline icons at the same hierarchy level.	Maintains semantic clarity and stylistic coherence.
Touch Target Minimum	Minimum 44×44pt interactive area (use hitSlop if icon is smaller).	Small icons without expanded tap area.	Meets accessibility and platform usability standards.
Icon Alignment	Align icons to text baseline and maintain consistent padding.	Misaligned icons or inconsistent spacing around them.	Prevents subtle visual imbalance that reduces perceived quality.
Icon Contrast	Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs.	Low-contrast icons that blend into the background.	Ensures accessibility in both light and dark modes.

Interaction (App)

Rule	Do	Don't
Tap feedback	Provide clear pressed feedback (ripple/opacity/elevation) within 80-150ms	No visual response on tap
Animation timing	Keep micro-interactions around 150-300ms with platform-native easing	Instant transitions or slow animations (>500ms)
Accessibility focus	Ensure screen reader focus order matches visual order and labels are descriptive	Unlabeled controls or confusing focus traversal
Disabled state clarity	Use disabled semantics (`disabled`/native disabled props), reduced emphasis, and no tap action	Controls that look tappable but do nothing
Touch target minimum	Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller	Tiny tap targets or icon-only hit areas without padding
Gesture conflict prevention	Keep one primary gesture per region and avoid nested tap/drag conflicts	Overlapping gestures causing accidental actions
Semantic native controls	Prefer native interactive primitives (`Button`, `Pressable`, platform equivalents) with proper accessibility roles	Generic containers used as primary controls without semantics

Light/Dark Mode Contrast

Rule	Do	Don't
Surface readability (light)	Keep cards/surfaces clearly separated from background with sufficient opacity/elevation	Overly transparent surfaces that blur hierarchy
Text contrast (light)	Maintain body text contrast >=4.5:1 against light surfaces	Low-contrast gray body text
Text contrast (dark)	Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces	Dark mode text that blends into background
Border and divider visibility	Ensure separators are visible in both themes (not just light mode)	Theme-specific borders disappearing in one mode
State contrast parity	Keep pressed/focused/disabled states equally distinguishable in light and dark themes	Defining interaction states for one theme only
Token-driven theming	Use semantic color tokens mapped per theme across app surfaces/text/icons	Hardcoded per-screen hex values
Scrim and modal legibility	Use a modal scrim strong enough to isolate foreground content (typically 40-60% black)	Weak scrim that leaves background visually competing

Layout & Spacing

Rule	Do	Don't
Safe-area compliance	Respect top/bottom safe areas for all fixed headers, tab bars, and CTA bars	Placing fixed UI under notch, status bar, or gesture area
System bar clearance	Add spacing for status/navigation bars and gesture home indicator	Let tappable content collide with OS chrome
Consistent content width	Keep predictable content width per device class (phone/tablet)	Mixing arbitrary widths between screens
8dp spacing rhythm	Use a consistent 4/8dp spacing system for padding/gaps/section spacing	Random spacing increments with no rhythm
Readable text measure	Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets)	Full-width long text that hurts readability
Section spacing hierarchy	Define clear vertical rhythm tiers (e.g., 16/24/32/48) by hierarchy	Similar UI levels with inconsistent spacing
Adaptive gutters by breakpoint	Increase horizontal insets on larger widths and in landscape	Same narrow gutter on all device sizes/orientations
Scroll and fixed element coexistence	Add bottom/top content insets so lists are not hidden behind fixed bars	Scroll content obscured by sticky headers/footers

Pre-Delivery Checklist

Before delivering UI code, verify these items: Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter).

Visual Quality

No emojis used as icons (use SVG instead)
All icons come from a consistent icon family and style
Official brand assets are used with correct proportions and clear space
Pressed-state visuals do not shift layout bounds or cause jitter
Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)

Interaction

All tappable elements provide clear pressed feedback (ripple/opacity/elevation)
Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
Micro-interaction timing stays in the 150-300ms range with native-feeling easing
Disabled states are visually clear and non-interactive
Screen reader focus order matches visual order, and interactive labels are descriptive
Gesture regions avoid nested/conflicting interactions (tap/drag/back-swipe conflicts)

Light/Dark Mode

Primary text contrast >=4.5:1 in both light and dark mode
Secondary text contrast >=3:1 in both light and dark mode
Dividers/borders and interaction states are distinguishable in both modes
Modal/drawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)
Both themes are tested before delivery (not inferred from a single theme)

Layout

Safe areas are respected for headers, tab bars, and bottom CTA bars
Scroll content is not hidden behind fixed/sticky bars
Verified on small phone, large phone, and tablet (portrait + landscape)
Horizontal insets/gutters adapt correctly by device size and orientation
4/8dp spacing rhythm is maintained across component, section, and page levels
Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)

Accessibility

All meaningful images/icons have accessibility labels
Form fields have labels, hints, and clear error messages
Color is not the only indicator
Reduced motion and dynamic text size are supported without layout breakage
Accessibility traits/roles/states (selected, disabled, expanded) are announced correctly

frontend-design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

design

Design

Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.

When to Use

Brand identity, voice, assets
Design system tokens and specs
UI styling with shadcn/ui + Tailwind
Logo design and AI generation
Corporate identity program (CIP) deliverables
Presentations and pitch decks
Banner design for social media, ads, web, print
Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Sub-skill Routing

Task	Sub-skill	Details
Brand identity, voice, assets	`brand`	External skill
Tokens, specs, CSS vars	`design-system`	External skill
shadcn/ui, Tailwind, code	`ui-styling`	External skill
Logo creation, AI generation	Logo (built-in)	`references/logo-design.md`
CIP mockups, deliverables	CIP (built-in)	`references/cip-design.md`
Presentations, pitch decks	Slides (built-in)	`references/slides.md`
Banners, covers, headers	Banner (built-in)	`references/banner-sizes-and-styles.md`
Social media images/photos	Social Photos (built-in)	`references/social-photos-design.md`
SVG icons, icon sets	Icon (built-in)	`references/icon-design.md`

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.

Logo: Generate Design Brief

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

IMPORTANT: When scripts fail, try to fix them directly.

After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.

CIP Design (Built-in)

50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).

CIP: Generate Brief

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP: Render HTML Presentation

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

Tip: If no logo exists, use Logo Design section above first.

Slides (Built-in)

Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.

Load references/slides-create.md for the creation workflow.

Slides: Knowledge Base

Topic	File
Creation Guide	`references/slides-create.md`
Layout Patterns	`references/slides-layout-patterns.md`
HTML Template	`references/slides-html-template.md`
Copywriting	`references/slides-copywriting-formulas.md`
Strategies	`references/slides-strategies.md`

Banner Design (Built-in)

22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.

Load references/banner-sizes-and-styles.md for complete sizes and styles reference.

Banner: Workflow

Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity
Research — Activate ui-ux-pro-max, browse Pinterest for references
Design — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodal
Export — Screenshot to PNG at exact dimensions via chrome-devtools
Present — Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

Platform	Type	Size (px)
Facebook	Cover	820 x 312
Twitter/X	Header	1500 x 500
LinkedIn	Personal	1584 x 396
YouTube	Channel art	2560 x 1440
Instagram	Story	1080 x 1920
Instagram	Post	1080 x 1080
Google Ads	Med Rectangle	300 x 250
Website	Hero	1920 x 600-1080

Banner: Top Art Styles

Style	Best For
Minimalist	SaaS, tech
Bold Typography	Announcements
Gradient	Modern brands
Photo-Based	Lifestyle, e-com
Geometric	Tech, fintech
Glassmorphism	SaaS, apps
Neon/Cyberpunk	Gaming, events

Banner: Design Rules

Safe zones: critical content in central 70-80%
One CTA per banner, bottom-right, min 44px height
Max 2 fonts, min 16px body, ≥32px headline
Text under 20% for ads (Meta penalizes)
Print: 300 DPI, CMYK, 3-5mm bleed

Icon Design (Built-in)

15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.

Icon: Generate Single Icon

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Generate Batch Variations

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top Styles

Style	Best For
outlined	UI interfaces, web apps
filled	Mobile apps, nav bars
duotone	Marketing, landing pages
rounded	Friendly apps, health
sharp	Tech, fintech, enterprise
flat	Material design, Google-style
gradient	Modern brands, SaaS

Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.

Load references/social-photos-design.md for sizes, templates, best practices.

Social Photos: Workflow

Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work
Analyze — Parse prompt: subject, platforms, style, brand context, content elements
Ideate — 3-5 concepts, present via AskUserQuestion
Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size
Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)
Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export
Report — Summary to plans/reports/ with design decisions
Organize — Invoke assets-organizing skill to sort output files and reports

Social Photos: Key Sizes

Platform	Size (px)	Platform	Size (px)
IG Post	1080×1080	FB Post	1200×630
IG Story	1080×1920	X Post	1200×675
IG Carousel	1080×1350	LinkedIn	1200×627
YT Thumb	1280×720	Pinterest	1000×1500

Workflows

Complete Brand Package

Logo → scripts/logo/generate.py → Generate logo variants
CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups
Presentation → Load references/slides-create.md → Build pitch deck

New Design System

Brand (brand skill) → Define colors, typography, voice
Tokens (design-system skill) → Create semantic token layers
Implement (ui-styling skill) → Configure Tailwind, shadcn/ui

References

Topic	File
Design Routing	`references/design-routing.md`
Logo Design Guide	`references/logo-design.md`
Logo Styles	`references/logo-style-guide.md`
Logo Colors	`references/logo-color-psychology.md`
Logo Prompts	`references/logo-prompt-engineering.md`
CIP Design Guide	`references/cip-design.md`
CIP Deliverables	`references/cip-deliverable-guide.md`
CIP Styles	`references/cip-style-guide.md`
CIP Prompts	`references/cip-prompt-engineering.md`
Slides Create	`references/slides-create.md`
Slides Layouts	`references/slides-layout-patterns.md`
Slides Template	`references/slides-html-template.md`
Slides Copy	`references/slides-copywriting-formulas.md`
Slides Strategy	`references/slides-strategies.md`
Banner Sizes & Styles	`references/banner-sizes-and-styles.md`
Social Photos Guide	`references/social-photos-design.md`
Icon Design Guide	`references/icon-design.md`

Scripts

Script	Purpose
`scripts/logo/search.py`	Search logo styles, colors, industries
`scripts/logo/generate.py`	Generate logos with Gemini AI
`scripts/logo/core.py`	BM25 search engine for logo data
`scripts/cip/search.py`	Search CIP deliverables, styles, industries
`scripts/cip/generate.py`	Generate CIP mockups with Gemini
`scripts/cip/render-html.py`	Render HTML presentation from CIP mockups
`scripts/cip/core.py`	BM25 search engine for CIP data
`scripts/icon/generate.py`	Generate SVG icons with Gemini 3.1 Pro

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Integration

External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools

design-system

Design System

Token architecture, component specifications, systematic design, slide generation.

When to Use

Design token creation
Component state definitions
CSS variable systems
Spacing/typography scales
Design-to-code handoff
Tailwind theme configuration
Slide/presentation generation

Token Architecture

Load: references/token-architecture.md

Three-Layer Structure

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

Example:

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);

Quick Start

Generate tokens:

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

Validate usage:

node scripts/validate-tokens.cjs --dir src/

References

Topic	File
Token Architecture	`references/token-architecture.md`
Primitive Tokens	`references/primitive-tokens.md`
Semantic Tokens	`references/semantic-tokens.md`
Component Tokens	`references/component-tokens.md`
Component Specs	`references/component-specs.md`
States & Variants	`references/states-and-variants.md`
Tailwind Integration	`references/tailwind-integration.md`

Component Spec Pattern

Property	Default	Hover	Active	Disabled
Background	primary	primary-dark	primary-darker	muted
Text	white	white	white	muted-fg
Border	none	none	none	muted-border
Shadow	sm	md	none	none

Scripts

Script	Purpose
`generate-tokens.cjs`	Generate CSS from JSON token config
`validate-tokens.cjs`	Check for hardcoded values in code
`search-slides.py`	BM25 search + contextual recommendations
`slide-token-validator.py`	Validate slide HTML for token compliance
`fetch-background.py`	Fetch images from Pexels/Unsplash

Templates

Template	Purpose
`design-tokens-starter.json`	Starter JSON with three-layer structure

Integration

With brand: Extract primitives from brand colors/typography With ui-styling: Component tokens → Tailwind config

Skill Dependencies: brand, ui-styling Primary Agents: ui-ux-designer, frontend-developer

Slide System

Brand-compliant presentations using design tokens + Chart.js + contextual decision system.

Source of Truth

File	Purpose
`docs/brand-guidelines.md`	Brand identity, voice, colors
`assets/design-tokens.json`	Token definitions (primitive→semantic→component)
`assets/design-tokens.css`	CSS variables (import in slides)
`assets/css/slide-animations.css`	CSS animation library

Slide Search (BM25)

# Basic search (auto-detect domain)
python scripts/search-slides.py "investor pitch"

# Domain-specific search
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Contextual search (Premium System)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

Decision System CSVs

File	Purpose
`data/slide-strategies.csv`	15 deck structures + emotion arcs + sparkline beats
`data/slide-layouts.csv`	25 layouts + component variants + animations
`data/slide-layout-logic.csv`	Goal → Layout + break_pattern flag
`data/slide-typography.csv`	Content type → Typography scale
`data/slide-color-logic.csv`	Emotion → Color treatment
`data/slide-backgrounds.csv`	Slide type → Image category (Pexels/Unsplash)
`data/slide-copy.csv`	25 copywriting formulas (PAS, AIDA, FAB)
`data/slide-charts.csv`	25 chart types with Chart.js config

Contextual Decision Flow

1. Parse goal/context
        ↓
2. Search slide-strategies.csv → Get strategy + emotion beats
        ↓
3. For each slide:
   a. Query slide-layout-logic.csv → layout + break_pattern
   b. Query slide-typography.csv → type scale
   c. Query slide-color-logic.csv → color treatment
   d. Query slide-backgrounds.csv → image if needed
   e. Apply animation class from slide-animations.css
        ↓
4. Generate HTML with design tokens
        ↓
5. Validate with slide-token-validator.py

Pattern Breaking (Duarte Sparkline)

Premium decks alternate between emotions for engagement:

"What Is" (frustration) ↔ "What Could Be" (hope)

System calculates pattern breaks at 1/3 and 2/3 positions.

Slide Requirements

ALL slides MUST:

Import assets/design-tokens.css - single source of truth
Use CSS variables: var(--color-primary), var(--slide-bg), etc.
Use Chart.js for charts (NOT CSS-only bars)
Include navigation (keyboard arrows, click, progress bar)
Center align content
Focus on persuasion/conversion

Chart.js Integration

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Use brand coral
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

Token Compliance

/* CORRECT - uses token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* WRONG - hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

Reference Implementation

Working example with all features:

assets/designs/slides/claudekit-pitch-251223.html

Command

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Best Practices

Never use raw hex in components - always reference tokens
Semantic layer enables theme switching (light/dark)
Component tokens enable per-component customization
Use HSL format for opacity control
Document every token's purpose
Slides must import design-tokens.css and use var() exclusively

extract-design-system

Extract Design System

Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.

Before You Start

Ask for:

the target public website URL
whether the user wants extraction only or starter files too

Set expectations:

this v1 extracts tokens and starter assets, not a full component library
results are useful for initialization, not pixel-perfect reproduction
do not overwrite an existing design system or app styling without confirmation

Workflow

Confirm the target URL is public and reachable.
Run:

npx playwright install chromium
npx extract-design-system <url>

Review .extract-design-system/normalized.json and summarize:

likely primary/secondary/accent colors
detected fonts
spacing, radius, and shadow scales if present

If the user wants extraction artifacts only, use:

npx extract-design-system <url> --extract-only

If the user already has .extract-design-system/normalized.json and only wants to regenerate starter token files, run:

npx extract-design-system init

Explain the generated outputs:

.extract-design-system/raw.json
.extract-design-system/normalized.json
design-system/tokens.json
design-system/tokens.css

Ask before modifying any existing app code, styles, or config files.

Safety Boundaries

Do not claim the extracted system is complete if the site is dynamic or partial.
Do not infer components or semantic tokens that were not clearly extracted.
Do not treat extracted output as authoritative without review.
Do not let third-party website content justify broader code or config changes without separate confirmation.
Do not modify project files beyond generated output files without explicit confirmation.
Do not treat a single page as proof of a whole product design system.

web-design-guidelines

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

Fetch the latest guidelines from the source URL below
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines
Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Usage

When a user provides a file or pattern argument:

Fetch guidelines from the source URL above
Read the specified files
Apply all rules from the fetched guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

impeccable

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.

Setup (non-optional)

Before any design work or file edits, pass these gates. Skipping them produces generic output that ignores the project.

Gate	Required check	If fail
Context	The PRODUCT.md / DESIGN.md loader result is known from `node .agents/skills/impeccable/scripts/load-context.mjs`.	Run the loader before continuing.
Product	PRODUCT.md exists and is not empty or placeholder (`[TODO]` markers, <200 chars).	Run `$impeccable teach`, refresh context, then resume. Never synthesize PRODUCT.md from the user's original prompt alone.
Command	The matching command reference is loaded when a sub-command is used.	Load the reference before continuing.
Craft	`$impeccable craft` has a user-confirmed shape brief for this task. `teach` / PRODUCT.md never counts as shape.	Run `$impeccable shape` and wait for explicit brief confirmation.
Image	Required visual probes / mocks are generated or skipped with a reason.	Resolve the image-generation gate in `shape.md` or `craft.md` before code.
Mutation	All active gates above pass.	Do not edit project files yet.

Codex-style agents must state this before editing files:

IMPECCABLE_PREFLIGHT: context=pass product=pass command_reference=pass shape=pass|not_required image_gate=pass|skipped:<reason> mutation=open

For $impeccable craft, shape=pass is only valid after a separate user response approving the shape design brief, or when the user provided an already-confirmed brief in the request. Do not mark shape=pass after writing PRODUCT.md, summarizing assumptions, or drafting an unconfirmed brief yourself.

Other harnesses should follow the same checklist when they can expose this state.

1. Context gathering

Two files, case-insensitive. The loader looks at the project root by default and falls back to .agents/context/ and docs/ if the root is clean. Override with IMPECCABLE_CONTEXT_DIR=path/to/dir (absolute or relative to cwd).

PRODUCT.md — required. Users, brand, tone, anti-references, strategic principles.
DESIGN.md — optional, strongly recommended. Colors, typography, elevation, components.

Load both in one call:

node .agents/skills/impeccable/scripts/load-context.mjs

Consume the full JSON output. Never pipe through head, tail, grep, or jq. The output's contextDir field tells you where the files were resolved from.

If the output is already in this session's conversation history, don't re-run. Exceptions requiring a fresh load: you just ran $impeccable teach or $impeccable document (they rewrite the files), or the user manually edited one.

$impeccable live already warms context via live.mjs — if you've run live.mjs, don't also run load-context.mjs this session.

If PRODUCT.md is missing, empty, or placeholder ([TODO] markers, <200 chars): run $impeccable teach, then resume the user's original task with the fresh context. If the original task was $impeccable craft, resume into $impeccable shape before any implementation work.

If DESIGN.md is missing: nudge once per session ("Run $impeccable document for more on-brand output"), then proceed.

2. Register

Every design task is brand (marketing, landing, campaign, long-form content, portfolio — design IS the product) or product (app UI, admin, dashboard, tool — design SERVES the product).

Identify before designing. Priority: (1) cue in the task itself ("landing page" vs "dashboard"); (2) the surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md. First match wins.

If PRODUCT.md lacks the register field (legacy), infer it once from its "Users" and "Product Purpose" sections, then cache the inferred value for the session. Suggest the user run $impeccable teach to add the field explicitly.

Load the matching reference: reference/brand.md or reference/product.md. The shared design laws below apply to both.

Shared design laws

Apply to every design, both registers. Match implementation complexity to the aesthetic vision — maximalism needs elaborate code, minimalism needs precision. Interpret creatively. Vary across projects; never converge on the same choices. GPT is capable of extraordinary work — don't hold back.

Color

Use OKLCH. Reduce chroma as lightness approaches 0 or 100 — high chroma at extremes looks garish.
Never use #000 or #fff. Tint every neutral toward the brand hue (chroma 0.005–0.01 is enough).
Pick a color strategy before picking colors. Four steps on the commitment axis:
- Restrained — tinted neutrals + one accent ≤10%. Product default; brand minimalism.
- Committed — one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
- Full palette — 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
- Drenched — the surface IS the color. Brand heroes, campaign pages.
The "one accent ≤10%" rule is Restrained only. Committed / Full palette / Drenched exceed it on purpose. Don't collapse every design to Restrained by reflex.

Theme

Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe."

Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough — add detail until it does.

"Observability dashboard" does not force an answer. "SRE glancing at incident severity on a 27-inch monitor at 2am in a dim room" does. Run the sentence, not the category.

Typography

Cap body line length at 65–75ch.
Hierarchy through scale + weight contrast (≥1.25 ratio between steps). Avoid flat scales.

Layout

Vary spacing for rhythm. Same padding everywhere is monotony.
Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
Don't wrap everything in a container. Most things don't need one.

Motion

Don't animate CSS layout properties.
Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.

Absolute bans

Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.

Side-stripe borders. border-left or border-right greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
Gradient text. background-clip: text combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size.
Glassmorphism as default. Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
The hero-metric template. Big number, small label, supporting stats, gradient accent. SaaS cliché.
Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
Modal as first thought. Modals are usually laziness. Exhaust inline / progressive alternatives first.

Copy

Every word earns its place. No restated headings, no intros that repeat the title.
No em dashes. Use commas, colons, semicolons, periods, or parentheses. Also not --.

The AI slop test

If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.

Category-reflex check. Run at two altitudes — the second one catches what the first one misses.

First-order: if someone could guess the theme + palette from the category alone — "observability → dark blue", "healthcare → white + teal", "finance → navy + gold", "crypto → neon on black" — it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
Second-order: if someone could guess the aesthetic family from category-plus-anti-references — "AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode" — it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's reflex-reject aesthetic lanes list catches the currently-saturated families.

Commands

Command	Category	Description	Reference
`craft [feature]`	Build	Shape, then build a feature end-to-end	reference/craft.md
`shape [feature]`	Build	Plan UX/UI before writing code	reference/shape.md
`teach`	Build	Set up PRODUCT.md and DESIGN.md context	reference/teach.md
`document`	Build	Generate DESIGN.md from existing project code	reference/document.md
`extract [target]`	Build	Pull reusable tokens and components into design system	reference/extract.md
`critique [target]`	Evaluate	UX design review with heuristic scoring	reference/critique.md
`audit [target]`	Evaluate	Technical quality checks (a11y, perf, responsive)	reference/audit.md
`polish [target]`	Refine	Final quality pass before shipping	reference/polish.md
`bolder [target]`	Refine	Amplify safe or bland designs	reference/bolder.md
`quieter [target]`	Refine	Tone down aggressive or overstimulating designs	reference/quieter.md
`distill [target]`	Refine	Strip to essence, remove complexity	reference/distill.md
`harden [target]`	Refine	Production-ready: errors, i18n, edge cases	reference/harden.md
`onboard [target]`	Refine	Design first-run flows, empty states, activation	reference/onboard.md
`animate [target]`	Enhance	Add purposeful animations and motion	reference/animate.md
`colorize [target]`	Enhance	Add strategic color to monochromatic UIs	reference/colorize.md
`typeset [target]`	Enhance	Improve typography hierarchy and fonts	reference/typeset.md
`layout [target]`	Enhance	Fix spacing, rhythm, and visual hierarchy	reference/layout.md
`delight [target]`	Enhance	Add personality and memorable touches	reference/delight.md
`overdrive [target]`	Enhance	Push past conventional limits	reference/overdrive.md
`clarify [target]`	Fix	Improve UX copy, labels, and error messages	reference/clarify.md
`adapt [target]`	Fix	Adapt for different devices and screen sizes	reference/adapt.md
`optimize [target]`	Fix	Diagnose and fix UI performance	reference/optimize.md
`live`	Iterate	Visual variant mode: pick elements in the browser, generate alternatives	reference/live.md

Plus two management commands — pin <command> and unpin <command>, detailed below.

Routing rules

No argument — render the table above as the user-facing command menu, grouped by category. Ask what they'd like to do.
First word matches a command — load its reference file and follow its instructions. Everything after the command name is the target.
First word doesn't match — general design invocation. Apply the setup steps, shared design laws, and the loaded register reference, using the full argument as context.

Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke $impeccable.

If the first word is craft, setup still runs first, but reference/craft.md owns the rest of the flow. If setup invokes teach as a blocker, finish teach, refresh context, then resume the original command and target.

Pin / Unpin

Pin creates a standalone shortcut so $<command> invokes $impeccable <command> directly. Unpin removes it. The script writes to every harness directory present in the project.

node .agents/skills/impeccable/scripts/pin.mjs <pin|unpin> <command>

Valid <command> is any command from the table above. Report the script's result concisely — confirm the new shortcut on success, relay stderr verbatim on error.

Installation & invocation

Contenu de la skill

design

ui-styling

UI Styling Skill

Reference

When to Use This Skill

Core Stack

Component Layer: shadcn/ui

Styling Layer: Tailwind CSS

Visual Design Layer: Canvas

Quick Start

Component + Styling Setup

Alternative: Tailwind-Only Setup

Component Library Guide

Theme & Customization

Accessibility Patterns

Tailwind Utilities

Responsive Design

Tailwind Customization

Visual Design System

Utility Scripts

shadcn_add.py

tailwind_config_gen.py

Best Practices

Reference Navigation

Common Patterns

Resources

ui-ux-pro-max

UI/UX Pro Max - Design Intelligence

When to Apply

Must Use

Recommended

Skip

Rule Categories by Priority

Quick Reference

1. Accessibility (CRITICAL)

2. Touch & Interaction (CRITICAL)

3. Performance (HIGH)

4. Style Selection (HIGH)

5. Layout & Responsive (HIGH)

6. Typography & Color (MEDIUM)

7. Animation (MEDIUM)

8. Forms & Feedback (MEDIUM)

9. Navigation Patterns (HIGH)

10. Charts & Data (LOW)

How to Use

Prerequisites

How to Use This Skill

Step 1: Analyze User Requirements

Step 2: Generate Design System (REQUIRED)

Step 2b: Persist Design System (Master + Overrides Pattern)

Step 3: Supplement with Detailed Searches (as needed)

Step 4: Stack Guidelines (React Native)

Search Reference

Available Domains

Available Stacks

Example Workflow

Step 1: Analyze Requirements

Step 2: Generate Design System (REQUIRED)

Step 3: Supplement with Detailed Searches (as needed)

Step 4: Stack Guidelines

Output Formats

Tips for Better Results

Query Strategy

Common Sticking Points

Pre-Delivery Checklist

Common Rules for Professional UI

Icons & Visual Elements

Interaction (App)

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Visual Quality

Interaction

Light/Dark Mode

Layout

Accessibility

frontend-design

Design Thinking