start-vibing 1.1.2 → 1.1.4

package/template/.claude/agents/ui-ux-reviewer.md

@@ -1,6 +1,6 @@
 ---
 name: ui-ux-reviewer
-description: "AUTOMATICALLY invoke when implementing UI/visual features. Triggers: files in 'components/', 'app/', '.tsx' with JSX, user says 'UI', 'component', 'page', 'design', 'layout'. Researches competitors, validates WCAG 2.1 accessibility, tests all viewports. MUST run BEFORE implementation of UI code."
+description: "AUTOMATICALLY invoke when implementing UI/visual features. Triggers: files in 'components/', 'app/', '.tsx' with JSX, user says 'UI', 'component', 'page', 'design', 'layout'. ENFORCES separate UIs for mobile/tablet/desktop (NOT just responsive). Researches competitors, validates WCAG 2.1 accessibility."
 model: sonnet
 tools: Read, Grep, Glob, WebSearch, WebFetch
 skills: ui-ux-audit
@@ -10,29 +10,52 @@ skills: ui-ux-audit
 
 You review UI/UX for all visual features, research competitors, and validate accessibility.
 
-## RULE: USE UI-UX-AUDIT SKILL
+## CRITICAL: SEPARATE UIs (NOT RESPONSIVE)
 
-> **MANDATORY:** Read:
-> - `.claude/skills/ui-ux-audit/SKILL.md` - Full checklist and templates
+> **MANDATORY:** Web apps MUST have **SEPARATE UIs** for each platform.
+> Do NOT just make "responsive" designs - create different layouts entirely.
 
-## WORKFLOW STATE TRACKING
+### Platform Requirements
 
-Run this command automatically after UI/UX review:
+| Platform | Width   | Layout                                           |
+| -------- | ------- | ------------------------------------------------ |
+| Mobile   | 375px   | Bottom nav, full-screen modals, pull-to-refresh  |
+| Tablet   | 768px   | Condensed dropdowns, collapsible sidebar         |
+| Desktop  | 1280px+ | Left sidebar, top navbar with search, high density |
 
-```bash
-python .claude/hooks/workflow-manager.py agent-executed --agent ui-ux-reviewer --result approved --notes "Researched 5 competitors, validated accessibility and responsiveness"
-```
+### Mobile UI (375px)
+- Bottom navigation bar (NOT hamburger menu)
+- Full-screen modal for search (with close button)
+- Pull-to-refresh functionality
+- Touch targets minimum 44x44px
+- NO horizontal scroll ever
+
+### Tablet UI (768px)
+- Condensed data in dropdowns
+- Hybrid collapsible sidebar
+- Adapted touch/click interactions
+
+### Desktop UI (1280px+)
+- Left sidebar: notifications, profile, navigation
+- Top navbar: centered search bar (Levenshtein fuzzy search)
+- Use MagicUI or shadcn components
+- Higher information density
+
+## RULE: USE UI-UX-AUDIT SKILL
+
+> **MANDATORY:** Read:
+> - `.claude/skills/ui-ux-audit/SKILL.md` - Full checklist and templates
 
 ## Workflow
 
 ```
-1. IDENTIFY → What type of UI? Mobile-first or desktop-first?
+1. IDENTIFY → What platform? Create SEPARATE layouts for each
         ↓
-2. RESEARCH → 3-5 competitors, screenshots
+2. RESEARCH → 3-5 competitors for EACH platform (mobile/desktop/tablet)
         ↓
-3. DEFINE → Market pattern, our approach
+3. DEFINE → Market pattern, our approach PER PLATFORM
         ↓
-4. VALIDATE → Accessibility and responsiveness
+4. VALIDATE → Accessibility and separate layouts
 ```
 
 ## Competitor Research
@@ -171,10 +194,49 @@ Skeleton checklist:
 **STATUS:** [APPROVED/NEEDS WORK]
 ```
 
+## Input Validation (ALL INPUTS)
+
+Every input field MUST have real-time visual validation:
+
+```tsx
+// Border colors
+valid:   "border-green-500"
+invalid: "border-red-500"
+neutral: "border-gray-300"
+```
+
+### Requirements
+- Error checklist below input (items disappear when fixed)
+- Autofill detection (onInput + onAnimationStart)
+- Prevent wrong data types (email in nickname field)
+- Validate on blur AND on input
+
+```tsx
+<div className="mt-1 text-sm text-red-500">
+  {errors.map(error => (
+    <div key={error}>• {error}</div>
+  ))}
+</div>
+```
+
+## UI Polish Requirements
+
+| Requirement                | Implementation                              |
+| -------------------------- | ------------------------------------------- |
+| Page transitions           | Framer Motion subtle animations             |
+| No page headers with title | Remove redundant utility headers            |
+| No page scroll with layout | Main container `overflow-hidden`            |
+| Hidden scrollbars          | Custom CSS, but scroll still works          |
+| Scroll indicators          | Arrow icons when more content exists        |
+| Featured carousel          | Carousel section for featured content       |
+| Database seeding           | Seed visual data + test users on init       |
+
 ## Critical Rules
 
-1. **ALWAYS research competitors** - Before implementing
-2. **ALWAYS validate accessibility** - WCAG 2.1 Level AA
-3. **ALWAYS test viewports** - All 4 required
-4. **NEVER horizontal overflow** - Check all viewports
-5. **ALWAYS create skeleton** - With the component
+1. **ALWAYS create SEPARATE UIs** - Mobile/Tablet/Desktop (NOT responsive)
+2. **ALWAYS research competitors** - Before implementing (per platform)
+3. **ALWAYS validate accessibility** - WCAG 2.1 Level AA
+4. **ALWAYS validate ALL inputs** - Real-time visual feedback
+5. **NEVER horizontal overflow** - Check all viewports
+6. **ALWAYS create skeleton** - With the component
+7. **ALWAYS use Framer Motion** - Subtle transitions

package/template/.claude/commands/feature.md

@@ -1,102 +1,48 @@
-# /feature - Iniciar Nova Feature
-
----
-
-command: feature
-description: Inicia o fluxo completo para uma nova feature
-usage: /feature [descricao da feature]
-
----
-
-## PASSO 1: INICIAR WORKFLOW (OBRIGATORIO)
-
-**EXECUTE IMEDIATAMENTE antes de qualquer outra acao:**
-
-```bash
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" start-task --type feature --description "$ARGUMENTS"
-```
-
-Se o comando acima falhar, informe o usuario e NAO prossiga.
-
----
-
-## PASSO 2: EXECUTAR ANALYZER
-
-Leia o arquivo `.claude/agents/analyzer.md` e execute as instrucoes.
-
-Ao final, execute:
-
-```bash
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" agent-executed --agent analyzer --result approved
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" approve-files --files "[arquivos identificados]"
-```
-
-**IMPORTANTE:** Sem aprovar arquivos, os hooks bloqueiarao qualquer edicao!
-
----
-
-## PASSO 3: FLUXO DE AGENTES
-
-Execute na ordem (leia cada arquivo .md antes):
-
-| Ordem | Agente            | Arquivo                              | Quando    |
-| ----- | ----------------- | ------------------------------------ | --------- |
-| 1     | analyzer          | `.claude/agents/analyzer.md`         | Sempre    |
-| 2     | ui-ux-reviewer    | `.claude/agents/ui-ux-reviewer.md`   | Se tem UI |
-| 3     | documenter        | `.claude/agents/documenter.md`       | Sempre    |
-| 4     | **[IMPLEMENTAR]** | -                                    | -         |
-| 5     | tester            | `.claude/agents/tester.md`           | Sempre    |
-| 6     | security-auditor  | `.claude/agents/security-auditor.md` | Sempre    |
-| 7     | quality-checker   | `.claude/agents/quality-checker.md`  | Sempre    |
-| 8     | final-validator   | `.claude/agents/final-validator.md`  | Sempre    |
-
-Apos cada agente, registre:
-
-```bash
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" agent-executed --agent [nome] --result approved
-```
-
----
-
-## PASSO 4: QUALITY GATES
-
-```bash
-bun run typecheck && bun run lint && bun run test && bun run test:e2e && bun run build
-```
-
-Registre cada resultado:
-
-```bash
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" quality-gate --gate typecheck --passed true
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" quality-gate --gate lint --passed true
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" quality-gate --gate build --passed true
-```
-
----
-
-## PASSO 5: VALIDACAO FINAL
-
-```bash
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" final-validation --result approved --ready-to-commit true
-```
-
----
-
-## PASSO 6: COMMIT (se solicitado)
-
-Apos commit bem-sucedido:
-
-```bash
-python "$CLAUDE_PROJECT_DIR/.claude/hooks/workflow-manager.py" complete-task --commit-hash [HASH]
-```
-
----
-
-## CRITERIOS DE SUCESSO
-
-- [ ] Workflow iniciado via workflow-manager
-- [ ] Analyzer executado e arquivos aprovados
-- [ ] Agentes executados na ordem
-- [ ] Testes criados (unit + E2E se UI)
-- [ ] Quality gates passando
-- [ ] Final validation aprovada
+# /feature - Iniciar Nova Feature
+
+---
+
+command: feature
+description: Inicia o fluxo completo para uma nova feature
+usage: /feature [descricao da feature]
+
+---
+
+## Fluxo de Desenvolvimento
+
+Execute na ordem (use Task tool para invocar cada agente):
+
+| Ordem | Agente            | Arquivo                              | Quando    |
+| ----- | ----------------- | ------------------------------------ | --------- |
+| 1     | analyzer          | `.claude/agents/analyzer.md`         | Sempre    |
+| 2     | ui-ux-reviewer    | `.claude/agents/ui-ux-reviewer.md`   | Se tem UI |
+| 3     | documenter        | `.claude/agents/documenter.md`       | Sempre    |
+| 4     | **[IMPLEMENTAR]** | -                                    | -         |
+| 5     | tester            | `.claude/agents/tester.md`           | Sempre    |
+| 6     | security-auditor  | `.claude/agents/security-auditor.md` | Sempre    |
+| 7     | quality-checker   | `.claude/agents/quality-checker.md`  | Sempre    |
+| 8     | final-validator   | `.claude/agents/final-validator.md`  | Sempre    |
+| 9     | commit-manager    | `.claude/agents/commit-manager.md`   | Sempre    |
+
+---
+
+## Quality Gates
+
+```bash
+bun run typecheck && bun run lint && bun run test && bun run test:e2e && bun run build
+```
+
+---
+
+## Critérios de Sucesso
+
+- [ ] Analyzer executado antes da implementação
+- [ ] Agentes executados na ordem
+- [ ] Testes criados (unit + E2E se UI)
+- [ ] Todos quality gates passaram
+- [ ] Documentação atualizada
+- [ ] Security audit aprovado
+- [ ] Commit convencional criado
+
+- [ ] Quality gates passando
+- [ ] Final validation aprovada

package/template/.claude/config/README.md

@@ -1,30 +1,30 @@
-# Project Configuration
-
-This directory contains project-specific configuration files that agents read to adapt their behavior to your project.
-
-## Files
-
-| File | Purpose |
-|------|---------|
-| `project-config.json` | Main project configuration (stack, structure, commands) |
-| `domain-mapping.json` | Maps file patterns to knowledge domains |
-| `quality-gates.json` | Quality check commands |
-| `testing-config.json` | Testing framework and conventions |
-| `security-rules.json` | Security audit rules |
-
-## How Agents Use These
-
-1. **analyzer** - Reads `project-config.json` for structure, `domain-mapping.json` for domains
-2. **tester** - Reads `testing-config.json` for frameworks and conventions
-3. **security-auditor** - Reads `security-rules.json` for security patterns
-4. **quality-checker** - Reads `quality-gates.json` for commands
-5. **domain-updater** - Reads `domain-mapping.json` for file-to-domain mapping
-
-## Customizing for Your Project
-
-1. Update `project-config.json` with your stack and commands
-2. Update `domain-mapping.json` with your project structure
-3. Update `testing-config.json` with your test conventions
-4. Update `security-rules.json` with your auth framework
-
-The agents will automatically adapt to your configuration.
+# Project Configuration
+
+This directory contains project-specific configuration files that agents read to adapt their behavior to your project.
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `project-config.json` | Main project configuration (stack, structure, commands) |
+| `domain-mapping.json` | Maps file patterns to knowledge domains |
+| `quality-gates.json` | Quality check commands |
+| `testing-config.json` | Testing framework and conventions |
+| `security-rules.json` | Security audit rules |
+
+## How Agents Use These
+
+1. **analyzer** - Reads `project-config.json` for structure, `domain-mapping.json` for domains
+2. **tester** - Reads `testing-config.json` for frameworks and conventions
+3. **security-auditor** - Reads `security-rules.json` for security patterns
+4. **quality-checker** - Reads `quality-gates.json` for commands
+5. **domain-updater** - Reads `domain-mapping.json` for file-to-domain mapping
+
+## Customizing for Your Project
+
+1. Update `project-config.json` with your stack and commands
+2. Update `domain-mapping.json` with your project structure
+3. Update `testing-config.json` with your test conventions
+4. Update `security-rules.json` with your auth framework
+
+The agents will automatically adapt to your configuration.

package/template/.claude/config/project-config.json

@@ -1,53 +1,53 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$comment": "Project-specific configuration. Agents read this to adapt to your project.",
-
-  "stack": {
-    "runtime": "bun",
-    "language": "typescript",
-    "strictMode": true,
-    "database": "mongodb",
-    "orm": "mongoose",
-    "validation": "zod",
-    "container": "docker"
-  },
-
-  "structure": {
-    "apps": "apps/",
-    "shared": "common/",
-    "types": "types/",
-    "tests": "tests/",
-    "docs": "docs/"
-  },
-
-  "pathAliases": {
-    "$types/*": "./types/*",
-    "@common/*": "./common/*",
-    "@common": "./common/index.ts",
-    "@db/*": "./common/db/*",
-    "@db": "./common/db/index.ts",
-    "@apps/*": "./apps/*"
-  },
-
-  "commands": {
-    "typecheck": "bun run typecheck",
-    "lint": "bun run lint",
-    "test": "bun run test",
-    "testE2e": "bun run test:e2e",
-    "build": "bun run build",
-    "dev": "bun run dev",
-    "dockerBuild": "docker compose build",
-    "dockerUp": "docker compose up"
-  },
-
-  "conventions": {
-    "branchPrefix": {
-      "feature": "feature/",
-      "bugfix": "fix/",
-      "refactor": "refactor/"
-    },
-    "commitFormat": "conventional",
-    "typesLocation": "types/",
-    "noTypesInSrc": true
-  }
-}
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$comment": "Project-specific configuration. Agents read this to adapt to your project.",
+
+  "stack": {
+    "runtime": "bun",
+    "language": "typescript",
+    "strictMode": true,
+    "database": "mongodb",
+    "orm": "mongoose",
+    "validation": "zod",
+    "container": "docker"
+  },
+
+  "structure": {
+    "apps": "apps/",
+    "shared": "common/",
+    "types": "types/",
+    "tests": "tests/",
+    "docs": "docs/"
+  },
+
+  "pathAliases": {
+    "$types/*": "./types/*",
+    "@common/*": "./common/*",
+    "@common": "./common/index.ts",
+    "@db/*": "./common/db/*",
+    "@db": "./common/db/index.ts",
+    "@apps/*": "./apps/*"
+  },
+
+  "commands": {
+    "typecheck": "bun run typecheck",
+    "lint": "bun run lint",
+    "test": "bun run test",
+    "testE2e": "bun run test:e2e",
+    "build": "bun run build",
+    "dev": "bun run dev",
+    "dockerBuild": "docker compose build",
+    "dockerUp": "docker compose up"
+  },
+
+  "conventions": {
+    "branchPrefix": {
+      "feature": "feature/",
+      "bugfix": "fix/",
+      "refactor": "refactor/"
+    },
+    "commitFormat": "conventional",
+    "typesLocation": "types/",
+    "noTypesInSrc": true
+  }
+}

package/template/.claude/config/quality-gates.json

@@ -1,46 +1,46 @@
-{
-  "$comment": "Quality gate commands. Agents use these to run checks.",
-
-  "gates": {
-    "typecheck": {
-      "command": "bun run typecheck",
-      "description": "TypeScript type checking",
-      "required": true,
-      "order": 1
-    },
-    "lint": {
-      "command": "bun run lint",
-      "description": "ESLint code linting",
-      "required": true,
-      "order": 2
-    },
-    "unitTests": {
-      "command": "bun run test",
-      "description": "Unit tests with Vitest",
-      "required": true,
-      "order": 3
-    },
-    "e2eTests": {
-      "command": "bun run test:e2e",
-      "description": "E2E tests with Playwright",
-      "required": false,
-      "order": 4
-    },
-    "build": {
-      "command": "bun run build",
-      "description": "Production build",
-      "required": true,
-      "order": 5
-    },
-    "dockerBuild": {
-      "command": "docker compose build",
-      "description": "Docker image build",
-      "required": false,
-      "order": 6
-    }
-  },
-
-  "runAll": "bun run typecheck && bun run lint && bun run test && bun run build",
-
-  "skipGatesForTypes": ["config", "docs"]
-}
+{
+  "$comment": "Quality gate commands. Agents use these to run checks.",
+
+  "gates": {
+    "typecheck": {
+      "command": "bun run typecheck",
+      "description": "TypeScript type checking",
+      "required": true,
+      "order": 1
+    },
+    "lint": {
+      "command": "bun run lint",
+      "description": "ESLint code linting",
+      "required": true,
+      "order": 2
+    },
+    "unitTests": {
+      "command": "bun run test",
+      "description": "Unit tests with Vitest",
+      "required": true,
+      "order": 3
+    },
+    "e2eTests": {
+      "command": "bun run test:e2e",
+      "description": "E2E tests with Playwright",
+      "required": false,
+      "order": 4
+    },
+    "build": {
+      "command": "bun run build",
+      "description": "Production build",
+      "required": true,
+      "order": 5
+    },
+    "dockerBuild": {
+      "command": "docker compose build",
+      "description": "Docker image build",
+      "required": false,
+      "order": 6
+    }
+  },
+
+  "runAll": "bun run typecheck && bun run lint && bun run test && bun run build",
+
+  "skipGatesForTypes": ["config", "docs"]
+}

package/template/.claude/config/security-rules.json

@@ -1,45 +1,45 @@
-{
-  "$comment": "Security rules. Used by security-auditor agent.",
-
-  "authentication": {
-    "framework": "session-based",
-    "userIdSource": "ctx.user._id",
-    "protectedProcedure": "protectedProcedure",
-    "sessionStore": "mongodb"
-  },
-
-  "validation": {
-    "library": "zod",
-    "requireOnAllRoutes": true
-  },
-
-  "sensitivePatterns": {
-    "forbidden": [
-      "input.userId",
-      "input.user_id",
-      "req.body.userId",
-      "passwordHash",
-      "password:"
-    ],
-    "files": ["auth/", "api/", "server/", "routers/"]
-  },
-
-  "cryptography": {
-    "passwordHashing": "bcrypt",
-    "minSaltRounds": 10,
-    "tokenGeneration": "crypto.randomBytes"
-  },
-
-  "cookies": {
-    "httpOnly": true,
-    "secure": true,
-    "sameSite": "strict"
-  },
-
-  "owaspChecks": {
-    "a01_brokenAccessControl": true,
-    "a02_cryptographicFailures": true,
-    "a03_injection": true,
-    "a07_authenticationFailures": true
-  }
-}
+{
+  "$comment": "Security rules. Used by security-auditor agent.",
+
+  "authentication": {
+    "framework": "session-based",
+    "userIdSource": "ctx.user._id",
+    "protectedProcedure": "protectedProcedure",
+    "sessionStore": "mongodb"
+  },
+
+  "validation": {
+    "library": "zod",
+    "requireOnAllRoutes": true
+  },
+
+  "sensitivePatterns": {
+    "forbidden": [
+      "input.userId",
+      "input.user_id",
+      "req.body.userId",
+      "passwordHash",
+      "password:"
+    ],
+    "files": ["auth/", "api/", "server/", "routers/"]
+  },
+
+  "cryptography": {
+    "passwordHashing": "bcrypt",
+    "minSaltRounds": 10,
+    "tokenGeneration": "crypto.randomBytes"
+  },
+
+  "cookies": {
+    "httpOnly": true,
+    "secure": true,
+    "sameSite": "strict"
+  },
+
+  "owaspChecks": {
+    "a01_brokenAccessControl": true,
+    "a02_cryptographicFailures": true,
+    "a03_injection": true,
+    "a07_authenticationFailures": true
+  }
+}