{
  "id": "page:docs-reference-repos-nextlevelbuilder-ui-ux-pro-max-skill-research",
  "_kind": "Page",
  "_file": "wiki/docs/reference-repos/nextlevelbuilder/ui-ux-pro-max-skill/research.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/reference-repos/nextlevelbuilder/ui-ux-pro-max-skill/research.md",
    "sourceKind": "repo-docs",
    "title": "nextlevelbuilder/ui-ux-pro-max-skill",
    "displayName": "nextlevelbuilder/ui-ux-pro-max-skill",
    "slug": "docs/reference-repos/nextlevelbuilder/ui-ux-pro-max-skill/research",
    "articlePath": "wiki/docs/reference-repos/nextlevelbuilder/ui-ux-pro-max-skill/research.md",
    "article": "\n# nextlevelbuilder/ui-ux-pro-max-skill\r\n\r\n- **Full name**: nextlevelbuilder/ui-ux-pro-max-skill\r\n- **Description**: An AI SKILL that provides design intelligence for building professional UI/UX across multiple platforms\r\n- **Stars**: 63,594\r\n- **License**: MIT\r\n- **Last pushed**: 2026-04-03\r\n- **Topics**: ai-skills, claude, claude-code, codex, cursor-ai, react, tailwindcss, ui-design, uikit, windsurf-ai\r\n- **Fork**: No\r\n- **Source**: gh-search\r\n\r\n## Archetype\r\n\r\n**domain-skill-pack** -- A comprehensive UI/UX design intelligence system with 161 reasoning rules, 67 UI styles, design system generation, color palettes, typography pairing, and landing page patterns. Ships as a Claude Code plugin with CLI installer (`uipro-cli`).\r\n\r\n## Structure\r\n\r\n```\r\n.claude-plugin/       # Plugin manifest\r\n.claude/              # Claude Code integration\r\ncli/                  # NPM CLI installer (uipro-cli)\r\nsrc/ui-ux-pro-max/\r\n  data/               # CSV knowledge bases\r\n    products.csv      # 161 product categories\r\n    styles.csv        # 67 UI styles\r\n    colors.csv        # Color palettes\r\n    typography.csv    # Font pairings\r\n    landing.csv       # Landing page patterns\r\n    charts.csv        # Chart recommendations\r\n    icons.csv         # Icon set recommendations\r\n    design.csv        # Design system rules\r\n    ui-reasoning.csv  # Reasoning rules\r\n    ux-guidelines.csv # UX guidelines\r\n  templates/          # Platform-specific templates\r\n    base/             # Base templates\r\n    platforms/        # Per-platform variants\r\n  scripts/            # Build/sync scripts\r\nskill.json            # Skill manifest\r\ndocs/                 # Documentation\r\n```\r\n\r\n## Key Techniques\r\n\r\n1. **Multi-domain BM25 search** -- 5 parallel searches across product types, styles, colors, patterns, typography to build a complete design system recommendation\r\n2. **Reasoning engine** -- JSON condition rules that match product type to UI category, apply style priorities, filter anti-patterns by industry\r\n3. **Design system generation** -- Full design system (pattern, style, colors, typography, effects, anti-patterns, pre-delivery checklist) from a single natural language description\r\n4. **CSV knowledge bases** -- All design intelligence stored as searchable CSVs rather than embedded in prompts\r\n5. **Platform-aware templates** -- Separate templates for different frameworks (React, Vue, etc.)\r\n\r\n---\r\n\r\n## Processes\r\n\r\n### 1. UI/UX Design System Generation (specializations/frontend/ui-ux-design-system-generation)\r\n\r\nA process that takes a product description and generates a complete, tailored design system through multi-domain parallel search and reasoning.\r\n\r\n**Phases:**\r\n1. Parse product description and extract domain signals (industry, audience, brand tone)\r\n2. Parallel search across 5 knowledge domains: product type matching, style recommendations, color palette selection, landing page patterns, typography pairing\r\n3. Reasoning engine applies style priorities, filters anti-patterns, processes decision rules\r\n4. Generate complete design system: pattern, style, colors, typography, effects, anti-patterns, pre-delivery checklist\r\n5. Breakpoint for human review of generated design system\r\n6. Apply design system to scaffold project structure with platform-appropriate templates\r\n\r\n**Key insight from repo:** The multi-domain parallel search pattern (5 independent CSV searches merged by a reasoning engine) is a strong fit for babysitter's `ctx.parallel.all()`.\r\n\r\n### 2. UI/UX Audit and Quality Gate (specializations/frontend/ui-ux-audit)\r\n\r\nA process that audits an existing UI implementation against design best practices, accessibility standards, and anti-patterns.\r\n\r\n**Phases:**\r\n1. Scan project for UI components and extract current design patterns\r\n2. Check accessibility compliance (WCAG AA minimum contrast, focus states, prefers-reduced-motion)\r\n3. Validate against anti-patterns for the detected industry/domain\r\n4. Check responsive breakpoints (375px, 768px, 1024px, 1440px)\r\n5. Generate pre-delivery checklist with pass/fail status\r\n6. Breakpoint with findings report for human review\r\n\r\n## Plugin Ideas\r\n\r\n### 1. Design Intelligence Knowledge Base (Category: Knowledge Management)\r\n\r\nA babysitter plugin that ships searchable CSV knowledge bases for UI/UX design decisions. The plugin provides:\r\n- Product-to-style matching (161 categories)\r\n- Color palette recommendations by industry\r\n- Typography pairing suggestions (57 combinations)\r\n- Landing page pattern library (24 patterns)\r\n- Anti-pattern databases by industry\r\n\r\n**install.md**: Copies CSV data files to plugin state directory, registers a `design-intelligence` task kind that processes can use to query the knowledge base.\r\n\r\n### 2. Design System Linter Hook (Category: Quality Assurance & Testing)\r\n\r\nA babysitter plugin that adds a `pre-commit` hook checking UI code against design system rules. Validates:\r\n- No emoji-as-icon patterns (should use SVG icon libraries)\r\n- cursor-pointer on clickable elements\r\n- Hover state transitions in 150-300ms range\r\n- Color contrast ratios meet WCAG AA\r\n- Responsive breakpoint coverage\r\n\r\n**install.md**: Installs pre-commit hook that runs design linting on changed `.tsx`/`.vue`/`.svelte` files.\r\n\r\n## Library Mapping\r\n\r\n| Extractable Process | Library Status | Action | Existing Path | Target Placement |\r\n|-------------------|----------------|--------|---------------|------------------|\r\n| UI/UX Design System Generation | NEW | Multi-domain parallel search with reasoning engine for complete design system generation | - | specializations/frontend/ui-ux-design-system-generation.js |\r\n| UI/UX Audit and Quality Gate | NEW | Design system validation with accessibility compliance and anti-pattern checking | - | specializations/frontend/ui-ux-audit.js |\r\n| Multi-Domain Parallel Search Pattern | NEW | Parallel knowledge base searches with reasoning engine merge | - | specializations/shared/multi-domain-parallel-search.js |\r\n| Design Intelligence Knowledge Query | NEW | CSV-based design knowledge lookup and recommendation system | - | specializations/frontend/design-intelligence-query.js |\r\n\r\n## Plugin Marketplace Mapping\r\n\r\n| Plugin Idea | Marketplace Status | Action | Existing Plugin | Target Placement |\r\n|-------------|-------------------|--------|-----------------|------------------|\r\n| Design Intelligence Knowledge Base | NEW | CSV knowledge bases for UI/UX design decisions with searchable data | - | plugins/a5c/marketplace/plugins/design-intelligence/ |\r\n| Design System Linter | NEW | Pre-commit hook for UI code validation against design system rules | - | plugins/a5c/marketplace/plugins/design-system-linter/ |\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-reference-repos",
      "to": "page:docs-reference-repos-nextlevelbuilder-ui-ux-pro-max-skill-research",
      "kind": "contains_page"
    }
  ]
}