start-vibing 1.1.2 → 1.1.3

package/template/.claude/skills/ui-ux-audit/SKILL.md

@@ -1,254 +1,68 @@
----
-name: ui-ux-audit
-description: Automates UI/UX audits. Researches competitors, validates accessibility (WCAG 2.1), verifies responsiveness, audits design system consistency. Use when implementing any UI feature.
-allowed-tools: Read, WebSearch, WebFetch, Grep, Glob
----
-
-# UI/UX Audit - Interface Audit System
-
-## Purpose
-
-This skill automates UI/UX audits:
-
-- **Research** competitors before implementing
-- **Validate** accessibility (WCAG, contrast, touch targets)
-- **Verify** responsiveness
-- **Audit** design system consistency
-- **Document** design decisions
-
----
-
-## Workflow
-
-```
-1. IDENTIFY FEATURE → What type of UI? Mobile-first or desktop-first?
-        ↓
-2. RESEARCH COMPETITORS → 3-5 relevant competitors, screenshots
-        ↓
-3. DEFINE PATTERN → What do all do alike? Where to differentiate?
-        ↓
-4. IMPLEMENT → Follow accessibility and responsiveness checklists
-        ↓
-5. VALIDATE → Run final checklist, capture screenshots
-```
-
----
-
-## Competitor Research
-
-### Required Search Queries
-
-```
-"[UI type] design examples 2025"
-"[similar product] UI/UX"
-"[functionality] best practices"
-"[framework] [component] examples"
-```
-
-### Research Template
-
-```markdown
-## Research: [Feature Name]
-
-### Competitors Analyzed
-
-1. **[Name]** - [URL]
-    - Strong points: [list]
-    - Weak points: [list]
-
-### Market Pattern
-
-- [What everyone does alike]
-
-### Our Approach
-
-- **Decision:** [what we'll do]
-- **Justification:** [why]
-- **Differentiator:** [how we stand out]
-```
-
----
-
-## Accessibility Checklist (WCAG 2.1)
-
-### Level A (Required)
-
-- [ ] **Text contrast:** Minimum 4.5:1 normal, 3:1 large text
-- [ ] **Alt text:** All images have descriptive alt
-- [ ] **Keyboard navigation:** All interactive elements via Tab
-- [ ] **Visible focus:** Clear outline on focused elements
-- [ ] **Form labels:** All inputs have associated label
-- [ ] **Error messages:** Clear and associated to field
-
-### Level AA (Recommended)
-
-- [ ] **Resize:** Works up to 200% zoom
-- [ ] **Touch targets:** Minimum 44x44px (`h-11 w-11`)
-- [ ] **Hover/Focus:** Content visible on hover also via focus
-
----
-
-## Responsiveness Checklist
-
-### Required Viewports
-
-```typescript
-const REQUIRED_VIEWPORTS = {
-	mobile: { width: 375, height: 667 }, // iPhone SE
-	tablet: { width: 768, height: 1024 }, // iPad
-	desktop: { width: 1280, height: 800 }, // Laptop
-	fullhd: { width: 1920, height: 1080 }, // Common monitor
-};
-```
-
-### Mobile (375px)
-
-- [ ] Vertical stack layout (flex-col)
-- [ ] Hamburger menu or bottom nav
-- [ ] Touch-friendly buttons (min 44px)
-- [ ] Readable text without zoom
-- [ ] Vertical scroll only
-
-### Desktop (1280px+)
-
-- [ ] Use horizontal space
-- [ ] Expanded sidebar
-- [ ] Can increase info density
-
----
-
-## CRITICAL: Zero Horizontal Overflow
-
-> **NEVER** should there be horizontal scroll.
-
-### Required CSS Patterns
-
-```tsx
-// Main layout
-<div className="flex h-screen w-screen overflow-hidden">
-	{/* Sidebar */}
-	<aside className="w-[260px] flex-shrink-0 overflow-y-auto">...</aside>
-
-	{/* Main content */}
-	<main className="flex-1 min-w-0 overflow-hidden">...</main>
-</div>
-```
-
-### Overflow Checklist
-
-- [ ] Main container has `overflow-hidden`?
-- [ ] Sidebar has `flex-shrink-0`?
-- [ ] Main content has `min-w-0`?
-- [ ] No element with width larger than container?
-- [ ] Tested at 1920x1080?
-
----
-
-## Skeleton Loading
-
-### Rule: Every Component HAS Skeleton
-
-- [ ] Skeleton created with component
-- [ ] Same dimensions as final content
-- [ ] `animate-pulse` animation
-- [ ] Same visual structure
-
-### Structure
-
-```
-components/features/UserCard/
-├── UserCard.tsx
-└── UserCardSkeleton.tsx
-```
-
-### Template
-
-```tsx
-export function ComponentSkeleton() {
-	return (
-		<div className="animate-pulse">
-			<div className="h-4 bg-gray-200 rounded w-3/4 mb-2" />
-			<div className="h-4 bg-gray-200 rounded w-1/2" />
-		</div>
-	);
-}
-```
-
----
-
-## Design System (Tailwind)
-
-### Colors
-
-- **Primary:** `indigo-600` (buttons, links)
-- **Secondary:** `gray-600` (secondary text)
-- **Success:** `green-600`
-- **Error:** `red-600`
-- **Warning:** `yellow-600`
-
-### Spacing (4px scale)
-
-```
-p-1: 4px    p-2: 8px    p-4: 16px
-p-6: 24px   p-8: 32px   p-12: 48px
-```
-
-### Border & Shadow
-
-- **Border radius:** `rounded-lg` (8px) default
-- **Shadows:** `shadow-sm` for cards, `shadow-lg` for modals
-
----
-
-## Output Format
-
-```markdown
-## UI/UX AUDIT - Report
-
-### Feature
-
-- **Name:** [name]
-- **Type:** [form/dashboard/list/etc]
-- **Approach:** [mobile-first/desktop-first]
-
-### Competitor Research
-
-- [x] Researched 5 competitors
-- **Pattern identified:** [description]
-
-### Accessibility
-
-- [x] Contrast validated (4.5:1+)
-- [x] Touch targets 44x44px
-- [x] Alt text on images
-- [x] Labels on forms
-
-### Responsiveness
-
-- [x] Mobile (375px) - OK
-- [x] Tablet (768px) - OK
-- [x] Desktop (1280px) - OK
-- [x] FullHD (1920px) - OK
-- [x] Zero horizontal overflow
-
-### Skeleton
-
-- [x] Created
-- [x] Correct dimensions
-```
-
----
-
-## Critical Rules
-
-1. **ALWAYS research competitors** - Before implementing UI
-2. **ALWAYS validate accessibility** - WCAG 2.1 Level AA
-3. **ALWAYS test viewports** - Mobile, tablet, desktop, fullhd
-4. **NEVER horizontal overflow** - Check all viewports
-5. **ALWAYS create skeleton** - With the component
-
----
-
-## Version
-
-- **v2.0.0** - Generic template
+---
+name: ui-ux-audit
+description: Audits UI/UX for accessibility and design. Activates when implementing UI components, pages, layouts, forms, or when user mentions 'design', 'responsive', 'accessibility', 'mobile', 'component', or 'UI'.
+allowed-tools: Read, WebSearch, WebFetch, Grep, Glob
+---
+
+# UI/UX Audit
+
+## When to Use
+
+- Before implementing UI features
+- When creating new components/pages
+- When user asks about design patterns
+
+## Workflow
+
+1. **Research** - competitors, patterns
+2. **Implement** - follow accessibility checklist
+3. **Validate** - test all viewports
+
+## Accessibility Checklist (WCAG 2.1)
+
+- [ ] Text contrast: 4.5:1 minimum
+- [ ] Touch targets: 44x44px minimum
+- [ ] Keyboard navigation: all elements via Tab
+- [ ] Alt text: all images
+- [ ] Form labels: all inputs have labels
+- [ ] Visible focus: clear outline
+
+## Viewports (Required)
+
+| Name | Size | Check |
+|------|------|-------|
+| Mobile | 375x667 | Hamburger menu, vertical stack |
+| Tablet | 768x1024 | Hybrid layout |
+| Desktop | 1280x800 | Sidebar, horizontal space |
+
+## Critical: Zero Horizontal Overflow
+
+```tsx
+<div className="flex h-screen w-screen overflow-hidden">
+  <aside className="w-[260px] flex-shrink-0">...</aside>
+  <main className="flex-1 min-w-0 overflow-hidden">...</main>
+</div>
+```
+
+## Skeleton Loading
+
+Every async component needs a skeleton:
+
+```tsx
+export function ComponentSkeleton() {
+  return (
+    <div className="animate-pulse">
+      <div className="h-4 bg-gray-200 rounded w-3/4" />
+    </div>
+  );
+}
+```
+
+## Rules
+
+1. **Research competitors** before implementing
+2. **Test all viewports** before committing
+3. **Never horizontal overflow**
+4. **Create skeleton** with component
+
+See `templates/` for audit report templates.

package/template/.claude/hooks/post-tool-use.py

@@ -1,155 +0,0 @@
-#!/usr/bin/env python3
-"""
-PostToolUse Hook - Track File Modifications
-
-This hook records all file modifications to workflow-state.json
-for later validation by Husky pre-commit hook.
-
-Exit codes:
-- 0: Always (tracking is non-blocking)
-"""
-
-import json
-import sys
-import os
-from datetime import datetime
-from pathlib import Path
-
-# Get project directory
-PROJECT_DIR = os.environ.get('CLAUDE_PROJECT_DIR', os.getcwd())
-WORKFLOW_STATE_PATH = Path(PROJECT_DIR) / '.claude' / 'workflow-state.json'
-
-# Tools that modify files
-FILE_MODIFY_TOOLS = {'Edit', 'Write', 'NotebookEdit'}
-FILE_DELETE_TOOLS = {'Bash'}  # rm commands
-
-# Test file patterns
-TEST_PATTERNS = ['test', 'spec', '.test.', '.spec.', '__tests__']
-
-# Doc file patterns
-DOC_PATTERNS = ['docs/', 'README', 'CHANGELOG', '.md', 'domains/']
-
-
-def load_workflow_state():
-    """Load current workflow state"""
-    if not WORKFLOW_STATE_PATH.exists():
-        return {"version": "1.0.0", "currentTask": None, "sessions": []}
-    try:
-        with open(WORKFLOW_STATE_PATH) as f:
-            return json.load(f)
-    except (json.JSONDecodeError, IOError):
-        return {"version": "1.0.0", "currentTask": None, "sessions": []}
-
-
-def save_workflow_state(state: dict):
-    """Save workflow state"""
-    WORKFLOW_STATE_PATH.parent.mkdir(parents=True, exist_ok=True)
-    with open(WORKFLOW_STATE_PATH, 'w') as f:
-        json.dump(state, f, indent=2)
-
-
-def is_test_file(path: str) -> bool:
-    """Check if file is a test file"""
-    return any(p in path.lower() for p in TEST_PATTERNS)
-
-
-def is_doc_file(path: str) -> bool:
-    """Check if file is a documentation file"""
-    return any(p in path.lower() for p in DOC_PATTERNS)
-
-
-def main():
-    # Read hook input from stdin
-    try:
-        hook_input = json.load(sys.stdin)
-    except json.JSONDecodeError:
-        sys.exit(0)
-
-    tool_name = hook_input.get('tool_name', '')
-    tool_input = hook_input.get('tool_input', {})
-    tool_result = hook_input.get('tool_result', {})
-
-    # Only track file modification tools
-    if tool_name not in FILE_MODIFY_TOOLS:
-        sys.exit(0)
-
-    # Get file path
-    file_path = tool_input.get('file_path', tool_input.get('notebook_path', ''))
-
-    if not file_path:
-        sys.exit(0)
-
-    # Skip workflow state file itself
-    if 'workflow-state.json' in file_path:
-        sys.exit(0)
-
-    # Load state
-    state = load_workflow_state()
-
-    # If no current task, just exit (pre-tool-use should have blocked)
-    if not state.get('currentTask'):
-        sys.exit(0)
-
-    task = state['currentTask']
-
-    # Determine action type
-    # For Write tool, check if file existed
-    action = 'modified'
-    if tool_name == 'Write':
-        # Assume created if not in modified list
-        existing = [m['path'] for m in task.get('modifiedFiles', [])]
-        if file_path not in existing:
-            action = 'created'
-
-    # Normalize path
-    file_path = file_path.replace('\\', '/')
-
-    # Check if file was approved
-    approved_files = task.get('approvedFiles', [])
-    was_approved = any(
-        file_path.endswith(af) or file_path == af or
-        (af.endswith('*') and file_path.startswith(af[:-1]))
-        for af in approved_files
-    )
-
-    # Record modification
-    modification = {
-        'path': file_path,
-        'action': action,
-        'timestamp': datetime.now().isoformat(),
-        'approved': was_approved
-    }
-
-    if 'modifiedFiles' not in task:
-        task['modifiedFiles'] = []
-
-    # Update or add
-    existing_paths = [m['path'] for m in task['modifiedFiles']]
-    if file_path in existing_paths:
-        idx = existing_paths.index(file_path)
-        task['modifiedFiles'][idx] = modification
-    else:
-        task['modifiedFiles'].append(modification)
-
-    # Track test files
-    if is_test_file(file_path):
-        if 'testsCreated' not in task:
-            task['testsCreated'] = []
-        if file_path not in task['testsCreated']:
-            task['testsCreated'].append(file_path)
-
-    # Track doc files
-    if is_doc_file(file_path):
-        if 'docsUpdated' not in task:
-            task['docsUpdated'] = []
-        if file_path not in task['docsUpdated']:
-            task['docsUpdated'].append(file_path)
-
-    # Save state
-    save_workflow_state(state)
-
-    sys.exit(0)
-
-
-if __name__ == '__main__':
-    main()

package/template/.claude/hooks/pre-tool-use.py

@@ -1,159 +0,0 @@
-#!/usr/bin/env python3
-"""
-PreToolUse Hook - File Modification Enforcement
-
-This hook blocks file modifications unless:
-1. The analyzer agent has approved the file
-2. The file is in the approvedFiles list in workflow-state.json
-
-Exit codes:
-- 0: Allow the operation
-- 2: Block the operation (shows stderr to Claude)
-"""
-
-import json
-import sys
-import os
-from datetime import datetime
-from pathlib import Path
-
-# Get project directory
-PROJECT_DIR = os.environ.get('CLAUDE_PROJECT_DIR', os.getcwd())
-WORKFLOW_STATE_PATH = Path(PROJECT_DIR) / '.claude' / 'workflow-state.json'
-
-# Tools that modify files
-FILE_MODIFY_TOOLS = {'Edit', 'Write', 'NotebookEdit'}
-
-# Files always allowed (config, etc)
-ALWAYS_ALLOWED = {
-    '.claude/workflow-state.json',
-    '.claude/hooks/',
-    'package-lock.json',
-    'node_modules/',
-}
-
-# Files always blocked
-ALWAYS_BLOCKED = {
-    '.env',
-    '.env.local',
-    '.env.production',
-    'credentials.json',
-    'secrets/',
-}
-
-
-def load_workflow_state():
-    """Load current workflow state"""
-    if not WORKFLOW_STATE_PATH.exists():
-        return None
-    try:
-        with open(WORKFLOW_STATE_PATH) as f:
-            return json.load(f)
-    except (json.JSONDecodeError, IOError):
-        return None
-
-
-def is_file_approved(file_path: str, state: dict) -> tuple[bool, str]:
-    """Check if file is approved for modification"""
-
-    # Normalize path
-    file_path = file_path.replace('\\', '/')
-
-    # Always blocked files
-    for blocked in ALWAYS_BLOCKED:
-        if blocked in file_path:
-            return False, f"BLOCKED: {file_path} is in the always-blocked list (sensitive file)"
-
-    # Always allowed files
-    for allowed in ALWAYS_ALLOWED:
-        if allowed in file_path:
-            return True, "Allowed (system file)"
-
-    # No active task - block all modifications
-    if not state or not state.get('currentTask'):
-        return False, f"""BLOCKED: No active task in workflow-state.json
-
-To modify files, you must first:
-1. Start a task via orchestrator agent
-2. Run analyzer agent to approve files for modification
-3. The file '{file_path}' must be in the approvedFiles list
-
-Current state: No task active. Start with orchestrator first."""
-
-    task = state['currentTask']
-    approved_files = task.get('approvedFiles', [])
-
-    # Check if analyzer has run
-    agents = task.get('agents', {})
-    analyzer = agents.get('analyzer', {})
-
-    if not analyzer.get('executed'):
-        return False, f"""BLOCKED: Analyzer agent has not executed yet
-
-To modify '{file_path}', you must:
-1. Run the analyzer agent first
-2. Analyzer will determine which files can be modified
-3. Add approved files to workflow-state.json
-
-Current task: {task.get('description', 'Unknown')}
-Analyzer status: Not executed"""
-
-    # Check if file is in approved list
-    for approved in approved_files:
-        # Support glob patterns
-        if approved.endswith('*'):
-            if file_path.startswith(approved[:-1]):
-                return True, f"Approved (matches pattern: {approved})"
-        elif approved == file_path or file_path.endswith(approved):
-            return True, f"Approved by analyzer"
-
-    return False, f"""BLOCKED: File not in approved list
-
-File: {file_path}
-Task: {task.get('description', 'Unknown')}
-
-Approved files for this task:
-{chr(10).join(f'  - {f}' for f in approved_files) if approved_files else '  (none)'}
-
-To modify this file, run analyzer again and add it to approvedFiles."""
-
-
-def main():
-    # Read hook input from stdin
-    try:
-        hook_input = json.load(sys.stdin)
-    except json.JSONDecodeError:
-        # Can't parse input, allow by default
-        sys.exit(0)
-
-    tool_name = hook_input.get('tool_name', '')
-    tool_input = hook_input.get('tool_input', {})
-
-    # Only check file modification tools
-    if tool_name not in FILE_MODIFY_TOOLS:
-        sys.exit(0)
-
-    # Get file path from tool input
-    file_path = tool_input.get('file_path', tool_input.get('notebook_path', ''))
-
-    if not file_path:
-        sys.exit(0)
-
-    # Load workflow state
-    state = load_workflow_state()
-
-    # Check if file is approved
-    approved, message = is_file_approved(file_path, state)
-
-    if approved:
-        # Log the approval (optional verbose output)
-        # print(f"✓ {message}", file=sys.stderr)
-        sys.exit(0)
-    else:
-        # Block with error message
-        print(message, file=sys.stderr)
-        sys.exit(2)
-
-
-if __name__ == '__main__':
-    main()