Feature/UI style guide

.claude/commands/archon/archon-ui-consistency-review.md

@@ -0,0 +1,59 @@
+---
+description: Analyze UI components for reusability, Radix usage, primitives, and styling consistency
+argument-hint: <feature path, component path, or directory>
+allowed-tools: Read, Grep, Glob, Write, Bash
+thinking: auto
+---
+
+# UI Consistency Review for Archon
+
+**Review scope**: $ARGUMENTS
+
+## Process
+
+### Step 1: Load Standards
+Read `PRPs/ai_docs/UI_STANDARDS.md` - This is the single source of truth for all rules, patterns, and scans.
+
+### Step 2: Find Files
+Glob all `.tsx` files in the provided path.
+
+### Step 3: Run Automated Scans
+Execute ALL scans from **UI_STANDARDS.md - AUTOMATED SCAN REFERENCE** section:
+- Critical scans (dynamic classes, non-responsive grids, native HTML, unconstrained scroll)
+- High priority scans (keyboard support, dark mode, hardcoded patterns, min-w-0)
+- Medium priority scans (TypeScript, color mismatches, props validation)
+
+### Step 4: Deep Analysis
+For each file, check against ALL rules from **UI_STANDARDS.md sections 1-8**:
+1. TAILWIND V4 - Static classes, tokens
+2. LAYOUT & RESPONSIVE - Grids, scroll, truncation
+3. THEMING - Dark mode variants
+4. RADIX UI - Primitives usage
+5. PRIMITIVES LIBRARY - Card, PillNavigation, styles.ts
+6. ACCESSIBILITY - Keyboard, ARIA, focus
+7. TYPESCRIPT & API CONTRACTS - Types, props, consistency
+8. FUNCTIONAL LOGIC - UI actually works
+
+**For primitives** (files in `/features/ui/primitives/`):
+- Verify all props affect rendering
+- Check color variant objects have: checked, glow, focusRing, hover
+- Validate prop implementations match interface
+
+### Step 5: Generate Report
+Save to `PRPs/reviews/ui-consistency-review-[feature].md` with:
+- Overall scores (use **UI_STANDARDS.md - SCORING VIOLATIONS**)
+- Component-by-component analysis
+- Violations with file:line, current code, required fix
+- Prioritized action items
+
+### Step 6: Create PRP
+Use `/prp-claude-code:prp-claude-code-create ui-consistency-fixes-[feature]` if violations found.
+
+**PRP should reference:**
+- The review report
+- Specific UI_STANDARDS.md sections violated
+- Automated scan commands to re-run for validation
+
+---
+
+**Note**: Do NOT duplicate rules/patterns from UI_STANDARDS.md. Just reference section numbers.

.gitignore

@@ -5,6 +5,7 @@ __pycache__
 PRPs/local
 PRPs/completed/
 PRPs/stories/
+PRPs/reviews/
 /logs/
 .zed
 tmp/

CLAUDE.md

@@ -209,11 +209,15 @@ See `python/.env.example` for complete list
 
 ### Add a new UI component in features directory
 
+**IMPORTANT**: Review UI design standards in `@PRPs/ai_docs/UI_STANDARDS.md` before creating UI components.
+
 1. Use Radix UI primitives from `src/features/ui/primitives/`
 2. Create component in relevant feature folder under `src/features/[feature]/components/`
 3. Define types in `src/features/[feature]/types/`
 4. Use TanStack Query hook from `src/features/[feature]/hooks/`
 5. Apply Tron-inspired glassmorphism styling with Tailwind
+6. Follow responsive design patterns (mobile-first with breakpoints)
+7. Ensure no dynamic Tailwind class construction (see UI_STANDARDS.md Section 2)
 
 ### Add or modify MCP tools
 

CONTRIBUTING.md

@@ -365,12 +365,21 @@ Test these things using both the UI and the MCP server. This process will be sim
    archon-ui-main/src/pages/YourPage.tsx
    ```
 
-2. **Testing Your Changes**
+2. **UI Design Standards**
+
+   Before creating or modifying UI components, review the design standards:
+   - **UI Standards**: `PRPs/ai_docs/UI_STANDARDS.md` - Complete Tailwind v4, Radix, and responsive design patterns
+   - **Style Guide**: Enable in Settings → scroll to "Feature Flags" → Enable "Style Guide Page"
+     - Access at http://localhost:3737/style-guide
+     - View all available primitives, colors, layouts, and component patterns
+   - **UI Consistency Review**: Run `/archon:archon-ui-consistency-review <path>` to automatically check your components for compliance
+
+3. **Testing Your Changes**
 
    ```bash
    # Using Make (if installed)
    make test-fe
-   
+
    # Or manually
    cd archon-ui-main && npm run test
 
@@ -381,11 +390,11 @@ Test these things using both the UI and the MCP server. This process will be sim
    npm run test:ui
    ```
 
-3. **Development Server**
+4. **Development Server**
    ```bash
    # Using Make for hybrid mode (if installed)
    make dev  # Backend in Docker, frontend local
-   
+
    # Or manually for faster iteration
    cd archon-ui-main && npm run dev
    # Still connects to Docker backend services