start-vibing 1.1.3 → 1.1.4

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

@@ -1,68 +1,254 @@
 ---
 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'.
+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
+# UI/UX Audit - Interface Audit System
 
-## When to Use
+## Purpose
 
-- Before implementing UI features
-- When creating new components/pages
-- When user asks about design patterns
+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. **Research** - competitors, patterns
-2. **Implement** - follow accessibility checklist
-3. **Validate** - test all viewports
+```
+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)
 
-- [ ] 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
+### 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
 
-## Viewports (Required)
+```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
 
-| Name | Size | Check |
-|------|------|-------|
-| Mobile | 375x667 | Hamburger menu, vertical stack |
-| Tablet | 768x1024 | Hybrid layout |
-| Desktop | 1280x800 | Sidebar, horizontal space |
+---
+
+## CRITICAL: Zero Horizontal Overflow
+
+> **NEVER** should there be horizontal scroll.
 
-## Critical: Zero Horizontal Overflow
+### Required CSS Patterns
 
 ```tsx
+// Main layout
 <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>
+	{/* 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
 
-Every async component needs a skeleton:
+### 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" />
-    </div>
-  );
+	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>
+	);
 }
 ```
 
-## Rules
+---
+
+## 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
+
+---
 
-1. **Research competitors** before implementing
-2. **Test all viewports** before committing
-3. **Never horizontal overflow**
-4. **Create skeleton** with component
+## Version
 
-See `templates/` for audit report templates.
+- **v2.0.0** - Generic template

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

@@ -1,55 +0,0 @@
-{
-  "$comment": "Maps file patterns to domain names. Configure for your project structure.",
-
-  "domains": {
-    "frontend": {
-      "patterns": [
-        "apps/front/*",
-        "apps/front/src/*",
-        "apps/front/src/app/*",
-        "apps/front/src/components/*"
-      ],
-      "description": "Frontend application"
-    },
-    "backend": {
-      "patterns": [
-        "apps/api/*",
-        "apps/api/src/*"
-      ],
-      "description": "Backend API services"
-    },
-    "infrastructure": {
-      "patterns": [
-        "common/*",
-        "common/db/*",
-        "common/config/*",
-        "common/utils/*"
-      ],
-      "description": "Shared infrastructure - logger, database, config, utilities"
-    },
-    "types": {
-      "patterns": [
-        "types/*"
-      ],
-      "description": "TypeScript type definitions"
-    },
-    "docker": {
-      "patterns": [
-        "docker/*",
-        "docker-compose.yml",
-        "apps/*/Dockerfile"
-      ],
-      "description": "Docker configuration and containerization"
-    },
-    "scripts": {
-      "patterns": [
-        "scripts/*"
-      ],
-      "description": "Utility scripts for development and deployment"
-    }
-  },
-
-  "defaultDomain": "general",
-
-  "domainFilesPath": ".claude/skills/codebase-knowledge/domains/"
-}