start-vibing 1.1.2 → 1.1.4

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

@@ -1,254 +1,254 @@
----
-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: 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

package/template/.claude/config/domain-mapping.json

@@ -1,26 +0,0 @@
-{
-  "$comment": "Maps file patterns to domain names. Used by domain-updater and analyzer agents.",
-
-  "domains": {
-    "rpc-explorer": {
-      "patterns": ["apps/rpc-explorer/*"],
-      "description": "RPC node discovery and testing"
-    },
-    "rpc-proxy": {
-      "patterns": ["apps/rpc-proxy/*"],
-      "description": "Intelligent RPC proxy with load balancing"
-    },
-    "infrastructure": {
-      "patterns": ["common/*", "docker-compose.yml", "Dockerfile*"],
-      "description": "Shared infrastructure and configuration"
-    },
-    "types": {
-      "patterns": ["types/*"],
-      "description": "Shared TypeScript type definitions"
-    }
-  },
-
-  "defaultDomain": "general",
-
-  "domainFilesPath": ".claude/skills/codebase-knowledge/domains/"
-}

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()