@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/en/Common/commands/uiux-audit.md

@@ -0,0 +1,189 @@
+---
+description: Complete UI/UX/Accessibility Audit
+argument-hint: [arguments]
+---
+
+# Complete UI/UX/Accessibility Audit
+
+You are the UI/UX Orchestrator. You must perform a complete interface audit by sequentially engaging the 3 experts: Accessibility, UX/Ergonomics, then UI Design.
+
+## Arguments
+$ARGUMENTS
+
+Arguments:
+- (Optional) URL or path to page/component to audit
+- (Optional) WCAG level: AA or AAA (default: AAA)
+
+Example: `/common:uiux-audit src/pages/Dashboard.tsx AAA`
+
+## MISSION
+
+### Step 1: Accessibility Audit (A11y Expert)
+
+#### 1.1 Automated audit
+```bash
+# Run if available
+npx axe-cli {URL}
+npx pa11y {URL}
+# Or check Lighthouse
+```
+
+#### 1.2 Manual WCAG 2.2 AAA verification
+
+**Perceivable**
+- [ ] Images with alt text
+- [ ] Semantic structure (h1-h6, landmarks)
+- [ ] Contrast ≥ 7:1 (AAA)
+- [ ] Reflow at 320px
+
+**Operable**
+- [ ] Complete keyboard navigation
+- [ ] No keyboard trap
+- [ ] Visible focus (≥ 2px)
+- [ ] Touch targets ≥ 44px
+
+**Understandable**
+- [ ] lang on html
+- [ ] Labels on inputs
+- [ ] Clear error messages
+
+**Robust**
+- [ ] Correct ARIA
+- [ ] aria-live for dynamic
+
+### Step 2: UX/Ergonomics Audit (UX Expert)
+
+#### 2.1 Nielsen Heuristics
+
+| Heuristic | Score (1-5) | Observations |
+|-----------|-------------|--------------|
+| System status visibility | | |
+| Real world match | | |
+| User control | | |
+| Consistency | | |
+| Error prevention | | |
+| Recognition vs recall | | |
+| Flexibility | | |
+| Minimalism | | |
+| Error recovery | | |
+| Help | | |
+
+#### 2.2 Journey analysis
+
+- Friction points identified
+- Cognitive load evaluated
+- Interaction patterns consistent?
+
+### Step 3: UI Design Audit (UI Expert)
+
+#### 3.1 Design System
+
+- Tokens consistent?
+- States complete?
+- Responsive correct?
+
+#### 3.2 Visual consistency
+
+- Uniform typography?
+- Systematic spacing?
+- Consistent iconography?
+
+### Step 4: Synthesis and Prioritization
+
+```
+══════════════════════════════════════════════════════════════
+🎨 UI/UX/A11Y AUDIT REPORT
+══════════════════════════════════════════════════════════════
+
+Page/Component: {name}
+Date: {date}
+Target level: WCAG 2.2 AAA + Lighthouse 100/100
+
+──────────────────────────────────────────────────────────────
+📊 GLOBAL SCORES
+──────────────────────────────────────────────────────────────
+
+| Domain | Score | Status |
+|--------|-------|--------|
+| Accessibility | /100 | ✅/❌ |
+| UX/Ergonomics | /100 | ✅/❌ |
+| UI Design | /100 | ✅/❌ |
+| **Global** | **/100** | |
+
+Lighthouse:
+| Performance | Accessibility | Best Practices | SEO |
+|-------------|---------------|----------------|-----|
+| /100 | /100 | /100 | /100 |
+
+──────────────────────────────────────────────────────────────
+❌ CRITICAL ISSUES (Blocking)
+──────────────────────────────────────────────────────────────
+
+### A11y
+| # | WCAG Criterion | Description | Remediation |
+|---|----------------|-------------|-------------|
+
+### UX
+| # | Heuristic | Description | Remediation |
+|---|-----------|-------------|-------------|
+
+### UI
+| # | Aspect | Description | Remediation |
+|---|--------|-------------|-------------|
+
+──────────────────────────────────────────────────────────────
+⚠️ MAJOR ISSUES (Important)
+──────────────────────────────────────────────────────────────
+
+{Similar table}
+
+──────────────────────────────────────────────────────────────
+ℹ️ SUGGESTED IMPROVEMENTS
+──────────────────────────────────────────────────────────────
+
+{Similar table}
+
+──────────────────────────────────────────────────────────────
+✅ POSITIVE POINTS
+──────────────────────────────────────────────────────────────
+
+- {good practice 1}
+- {good practice 2}
+
+──────────────────────────────────────────────────────────────
+🎯 PRIORITIZED ACTION PLAN
+──────────────────────────────────────────────────────────────
+
+### Priority 1 - Critical (immediate)
+1. [ ] {action}
+2. [ ] {action}
+
+### Priority 2 - Major (this week)
+1. [ ] {action}
+2. [ ] {action}
+
+### Priority 3 - Improvements (backlog)
+1. [ ] {action}
+2. [ ] {action}
+
+──────────────────────────────────────────────────────────────
+📋 ARBITRATIONS MADE
+──────────────────────────────────────────────────────────────
+
+In case of conflict between recommendations:
+1. AAA Accessibility (non-negotiable)
+2. Lighthouse 100/100
+3. UX over UI
+4. Mobile-first
+5. Design system consistency
+```
+
+## Arbitration Rules
+
+| Priority | Rule |
+|----------|------|
+| 1 | AAA Accessibility non-negotiable |
+| 2 | Lighthouse 100/100 mandatory |
+| 3 | UX > Aesthetics |
+| 4 | Mobile-first |
+| 5 | Design system consistency |

package/Dev/i18n/en/Common/commands/uiux-component-spec.md

@@ -0,0 +1,264 @@
+---
+description: Complete Component Specification UI/UX/A11y
+argument-hint: [arguments]
+---
+
+# Complete Component Specification UI/UX/A11y
+
+You are the UI/UX Orchestrator. You must produce a complete component specification by engaging the 3 experts: UX for behavior, UI for visuals, A11y for accessibility.
+
+## Arguments
+$ARGUMENTS
+
+Arguments:
+- Component name to specify
+- (Optional) Usage context
+
+Example: `/common:uiux-component-spec Button` or `/common:uiux-component-spec "Trip Card" context:"Tourism SaaS"`
+
+## MISSION
+
+### Step 1: UX Analysis (UX Expert)
+
+Define behavior and usage:
+- Component objective
+- Main use cases
+- Expected interactions
+- Functional states
+
+### Step 2: UI Specification (UI Expert)
+
+Define visuals:
+- Anatomy and structure
+- Variants
+- Visual states
+- Tokens used
+- Responsive
+
+### Step 3: A11y Specification (A11y Expert)
+
+Define accessibility:
+- HTML semantics
+- ARIA attributes
+- Keyboard navigation
+- Screen reader announcements
+
+### Step 4: Synthesis
+
+```
+══════════════════════════════════════════════════════════════
+📦 COMPONENT SPECIFICATION: {NAME}
+══════════════════════════════════════════════════════════════
+
+Category: Atom | Molecule | Organism
+Date: {date}
+Version: 1.0
+
+──────────────────────────────────────────────────────────────
+🧠 BEHAVIOR (UX)
+──────────────────────────────────────────────────────────────
+
+### Objective
+{Description of role and value for user}
+
+### Use Cases
+| Case | Context | Expected Behavior |
+|------|---------|-------------------|
+| Primary | {context} | {behavior} |
+| Secondary | {context} | {behavior} |
+
+### Functional States
+| State | Trigger | Behavior |
+|-------|---------|----------|
+| default | Initial | {behavior} |
+| loading | Action in progress | {behavior} |
+| success | Action succeeded | {behavior} |
+| error | Failure | {behavior} |
+| empty | No data | {behavior} |
+
+### User Feedback
+| Action | Feedback | Delay |
+|--------|----------|-------|
+| Click | {feedback} | Immediate |
+| Hover | {feedback} | Immediate |
+| Submit | {feedback} | < 200ms |
+
+──────────────────────────────────────────────────────────────
+🎨 VISUAL (UI)
+──────────────────────────────────────────────────────────────
+
+### Anatomy
+```
+┌─────────────────────────────────┐
+│ [Icon]  Label         [Action] │
+│         Description            │
+└─────────────────────────────────┘
+```
+
+- **Slot 1**: {description}
+- **Slot 2**: {description}
+
+### Dimensions
+| Property | Mobile | Tablet | Desktop |
+|----------|--------|--------|---------|
+| min-width | {val} | {val} | {val} |
+| height | {val} | {val} | {val} |
+| padding | {val} | {val} | {val} |
+
+### Variants
+| Variant | Usage | Visual Differences |
+|---------|-------|-------------------|
+| primary | Main CTA | {tokens} |
+| secondary | Secondary action | {tokens} |
+| ghost | Tertiary action | {tokens} |
+| destructive | Deletion | {tokens} |
+
+### Visual States
+| State | Background | Border | Text | Other |
+|-------|------------|--------|------|-------|
+| default | --color-{x} | --color-{x} | --color-{x} | |
+| hover | --color-{x} | --color-{x} | --color-{x} | cursor: pointer |
+| focus | --color-{x} | --color-{x} | --color-{x} | outline: 2px |
+| active | --color-{x} | --color-{x} | --color-{x} | transform |
+| disabled | --color-{x} | --color-{x} | --color-{x} | opacity: 0.5 |
+| loading | --color-{x} | --color-{x} | --color-{x} | spinner |
+
+### Micro-interactions
+| Trigger | Animation | Duration | Easing |
+|---------|-----------|----------|--------|
+| hover | {effect} | 150ms | ease-out |
+| click | {effect} | 100ms | ease-in |
+| focus | {effect} | 0ms | - |
+
+### Tokens Used
+```css
+/* Colors */
+--color-primary-500
+--color-neutral-100
+--color-error-500
+
+/* Typography */
+--font-size-sm
+--font-weight-medium
+
+/* Spacing */
+--spacing-2
+--spacing-4
+
+/* Other */
+--radius-md
+--shadow-sm
+--transition-fast
+```
+
+──────────────────────────────────────────────────────────────
+♿ ACCESSIBILITY (A11y)
+──────────────────────────────────────────────────────────────
+
+### HTML Semantics
+```html
+<button type="button" class="{component}">
+  <!-- Use native element -->
+</button>
+```
+
+### ARIA Attributes
+| Attribute | Value | Condition |
+|-----------|-------|-----------|
+| aria-label | "{text}" | If icon only |
+| aria-describedby | "{id}" | If description |
+| aria-disabled | "true" | If disabled |
+| aria-busy | "true" | If loading |
+
+### Keyboard Navigation
+| Key | Action |
+|-----|--------|
+| Tab | Focus on element |
+| Enter | Activate |
+| Space | Activate |
+| Escape | Cancel (if applicable) |
+
+### Focus Management
+- **Initial focus**: Automatic via tabindex
+- **Focus style**: outline 2px solid, offset 2px, ratio ≥ 3:1
+- **Trap**: Not applicable (not a modal)
+
+### Contrast (AAA)
+| Element | Required Ratio | Current Ratio |
+|---------|----------------|---------------|
+| Label text | ≥ 7:1 | ✅ {ratio} |
+| Icon | ≥ 3:1 | ✅ {ratio} |
+| Border | ≥ 3:1 | ✅ {ratio} |
+
+### Screen Reader Announcements
+| Moment | Announcement |
+|--------|--------------|
+| Focus | "{label}, button" |
+| Loading | "Loading" |
+| Success | "Action successful" |
+| Error | "Error: {message}" |
+
+### Touch Target
+- Minimum size: 44×44px ✅
+- Spacing: ≥ 8px ✅
+
+──────────────────────────────────────────────────────────────
+💻 IMPLEMENTATION
+──────────────────────────────────────────────────────────────
+
+### Props Interface (TypeScript)
+```typescript
+interface {Component}Props {
+  /** Visual variant */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+  /** Component size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Left icon */
+  leftIcon?: ReactNode;
+  /** Right icon */
+  rightIcon?: ReactNode;
+  /** Click handler */
+  onClick?: () => void;
+  /** Content */
+  children: ReactNode;
+}
+```
+
+### Usage Example
+```tsx
+<Button
+  variant="primary"
+  size="md"
+  leftIcon={<PlusIcon />}
+  onClick={handleClick}
+>
+  Add
+</Button>
+```
+
+──────────────────────────────────────────────────────────────
+✅ VALIDATION CHECKLIST
+──────────────────────────────────────────────────────────────
+
+### UX
+- [ ] Clear objective defined
+- [ ] All functional states documented
+- [ ] User feedback specified
+
+### UI
+- [ ] All variants defined
+- [ ] All visual states specified
+- [ ] Responsive documented
+- [ ] Tokens only (no hardcode)
+
+### A11y
+- [ ] Correct HTML semantics
+- [ ] Minimal and correct ARIA
+- [ ] Complete keyboard navigation
+- [ ] AAA contrasts verified
+- [ ] Touch targets ≥ 44px
+```

package/Dev/i18n/en/Common/commands/uiux-orchestrator.md

@@ -0,0 +1,98 @@
+---
+description: UI/UX Orchestrator
+argument-hint: [arguments]
+---
+
+# UI/UX Orchestrator
+
+You are the UI/UX Orchestrator. You must coordinate the 3 experts to deliver exceptional interfaces.
+
+## Arguments
+$ARGUMENTS
+
+Arguments:
+- Request type: component, audit, flow, tokens
+- Objective or description
+
+Example: `/common:uiux-orchestrator component "Date picker"` or `/common:uiux-orchestrator audit "Checkout page"`
+
+## MISSION
+
+### Step 1: Analyze the request
+
+Identify:
+- Expected deliverable type
+- Expert(s) to involve
+- Order of intervention
+
+### Step 2: Delegate to experts
+
+| Type | Experts | Order |
+|------|---------|-------|
+| New component | UI → UX → A11y | Sequential |
+| Audit | A11y → UX → UI | Sequential |
+| User flow | UX → UI → A11y | Sequential |
+| Design tokens | UI only | Direct |
+
+### Step 3: Consolidate and arbitrate
+
+In case of conflict, apply priority rules:
+1. AAA Accessibility (non-negotiable)
+2. Lighthouse 100/100
+3. UX > Aesthetics
+4. Mobile-first
+5. Design system consistency
+
+### Step 4: Deliver synthesis
+
+```
+══════════════════════════════════════════════════════════════
+📋 UI/UX SYNTHESIS: {TOPIC}
+══════════════════════════════════════════════════════════════
+
+Type: {Component | Audit | Flow | Tokens}
+Date: {date}
+
+──────────────────────────────────────────────────────────────
+🧠 UX
+──────────────────────────────────────────────────────────────
+
+{UX contributions summary}
+
+──────────────────────────────────────────────────────────────
+🎨 UI
+──────────────────────────────────────────────────────────────
+
+{UI contributions summary}
+
+──────────────────────────────────────────────────────────────
+♿ ACCESSIBILITY
+──────────────────────────────────────────────────────────────
+
+{A11y contributions summary}
+
+──────────────────────────────────────────────────────────────
+⚖️ ARBITRATIONS
+──────────────────────────────────────────────────────────────
+
+| Conflict | Decision | Justification |
+|----------|----------|---------------|
+| {conflict} | {decision} | {rule applied} |
+
+──────────────────────────────────────────────────────────────
+✅ VALIDATION CHECKLIST
+──────────────────────────────────────────────────────────────
+
+- [ ] WCAG 2.2 AAA compliant
+- [ ] Lighthouse 100/100 preserved
+- [ ] Mobile-first respected
+- [ ] Only tokens (no hardcode)
+- [ ] All 3 experts consulted
+
+──────────────────────────────────────────────────────────────
+🎯 NEXT STEPS
+──────────────────────────────────────────────────────────────
+
+1. {priority action}
+2. {next action}
+```