start-vibing 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "start-vibing",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Setup Claude Code agents, skills, and hooks in your project. Smart copy that preserves your custom domains and configurations.",
   "type": "module",
   "bin": {

package/template/.claude/README.md

@@ -1,76 +1,55 @@
-# Claude Development System
+# Configuracao de Agentes - AI Builder
 
-This directory contains the complete agent configuration for an automated development workflow.
+Este diretorio contem a configuracao completa do sistema de agentes
+para o fluxo de desenvolvimento do AI Builder.
 
 ---
 
-## Structure
+## Estrutura
 
 ```
 .claude/
-├── CLAUDE.md              # Agent context
-├── settings.json          # Global settings
-├── README.md              # This file
+├── CLAUDE.md              # Contexto geral para agentes
+├── settings.json          # Configuracoes globais
+├── README.md              # Este arquivo
 │
-├── agents/                # Specialized subagents
-│   ├── orchestrator.md    # Coordinates flow
-│   ├── analyzer.md        # Analyzes impact
-│   ├── research.md        # Researches best practices
-│   ├── documenter.md      # Creates documentation
-│   ├── tester.md          # Creates and runs tests
-│   ├── security-auditor.md # Security audits
-│   ├── ui-ux-reviewer.md  # UI/UX reviews
-│   ├── quality-checker.md # Quality checks
-│   ├── final-validator.md # Final validation
-│   ├── domain-updater.md  # Updates domain knowledge
-│   └── commit-manager.md  # Manages commits
+├── agents/                # Subagentes especializados
+│   ├── orchestrator.md    # Coordena o fluxo
+│   ├── analyzer.md        # Analisa impacto
+│   ├── documenter.md      # Cria documentacao
+│   ├── tester.md          # Cria e executa testes
+│   ├── security-auditor.md # Audita seguranca
+│   ├── ui-ux-reviewer.md  # Revisa UI/UX
+│   ├── quality-checker.md # Verifica qualidade
+│   └── final-validator.md # Validacao final
 │
-├── skills/                # Skill systems with cache
-│   ├── codebase-knowledge/
-│   ├── research-cache/
-│   ├── docs-tracker/
-│   ├── test-coverage/
-│   ├── security-scan/
-│   ├── ui-ux-audit/
-│   ├── quality-gate/
-│   ├── final-check/
-│   └── workflow-state/
+├── hooks/                 # Hooks de seguranca
+│   └── security-check.js  # Bloqueia acoes perigosas
 │
-├── config/                # Project-specific configuration
-│   ├── project-config.json
-│   ├── domain-mapping.json
-│   ├── quality-gates.json
-│   ├── testing-config.json
-│   └── security-rules.json
-│
-├── hooks/                 # Automation hooks
-│   ├── user-prompt-submit.py
-│   └── security-check.js
-│
-└── commands/              # Slash commands
-    ├── feature.md
-    ├── fix.md
-    ├── validate.md
-    └── research.md
+└── commands/              # Slash commands customizados
+    ├── feature.md         # /feature - nova feature
+    ├── fix.md             # /fix - corrigir bug
+    ├── validate.md        # /validate - validacao completa
+    └── research.md        # /research - pesquisar topico
 ```
 
 ---
 
-## Agents
+## Agentes
 
-### Hierarchy
+### Hierarquia
 
 ```
                     ┌─────────────────┐
                     │  ORCHESTRATOR   │
-                    │  (coordinator)  │
+                    │  (coordenador)  │
                     └────────┬────────┘
                              │
         ┌────────────────────┼────────────────────┐
         │                    │                    │
    ┌────▼────┐          ┌────▼────┐          ┌────▼────┐
    │ANALYZER │          │ TESTER  │          │ UI/UX   │
-   │(impact) │          │ (tests) │          │REVIEWER │
+   │(impacto)│          │(testes) │          │REVIEWER │
    └─────────┘          └─────────┘          └─────────┘
         │                    │                    │
    ┌────▼────┐          ┌────▼────┐          ┌────▼────┐
@@ -81,137 +60,149 @@ This directory contains the complete agent configuration for an automated develo
                     ┌────────▼────────┐
                     │ FINAL VALIDATOR │
                     │  (veto power)   │
-                    └────────┬────────┘
-                             │
-                    ┌────────▼────────┐
-                    │ DOMAIN UPDATER  │
-                    │ (updates docs)  │
-                    └────────┬────────┘
-                             │
-                    ┌────────▼────────┐
-                    │ COMMIT MANAGER  │
-                    │    (final)      │
                     └─────────────────┘
 ```
 
-### Functions
-
-| Agent            | Function                    | Can Veto? |
-| ---------------- | --------------------------- | --------- |
-| orchestrator     | Coordinates flow            | No        |
-| analyzer         | Analyzes change impact      | No        |
-| research         | Researches best practices   | No        |
-| documenter       | Creates documentation       | No        |
-| tester           | Creates and runs tests      | No        |
-| security-auditor | Validates security          | **YES**   |
-| ui-ux-reviewer   | Reviews UI/UX               | No        |
-| quality-checker  | Runs quality gates          | No        |
-| final-validator  | Final validation checklist  | **YES**   |
-| domain-updater   | Updates domain knowledge    | No        |
-| commit-manager   | Creates commits             | No        |
+### Funcoes
+
+| Agente           | Funcao                           | Pesquisa?                               | Pode Vetar? |
+| ---------------- | -------------------------------- | --------------------------------------- | ----------- |
+| orchestrator     | Coordena fluxo, delega tarefas   | **SIM** - best practices gerais         | Nao         |
+| analyzer         | Analisa impacto de mudancas      | **SIM** - arquitetura, migracoes        | Nao         |
+| documenter       | Cria/atualiza documentacao       | **SIM** - padroes de docs               | Nao         |
+| tester           | Cria e executa testes            | **SIM** - padroes de teste, edge cases  | Nao         |
+| security-auditor | Valida seguranca                 | **SIM** - OWASP, CVEs, vulnerabilidades | **SIM**     |
+| ui-ux-reviewer   | Pesquisa competidores, valida UI | **SIM** - competidores, UX, WCAG        | Nao         |
+| quality-checker  | Roda typecheck/lint/build        | **SIM** - solucoes para erros           | Nao         |
+| final-validator  | Checklist final completo         | **SIM** - valida que outros pesquisaram | **SIM**     |
+
+### TODOS os Agentes Pesquisam
+
+Cada agente tem a obrigacao de pesquisar best practices antes de agir:
+
+```
+orchestrator    → Pesquisa padroes de arquitetura e implementacao
+analyzer        → Pesquisa riscos e migracoes
+documenter      → Pesquisa padroes de documentacao
+tester          → Pesquisa edge cases e padroes de teste
+security-auditor → Pesquisa OWASP, CVEs, vulnerabilidades conhecidas
+ui-ux-reviewer  → Pesquisa competidores, UX patterns, WCAG
+quality-checker → Pesquisa solucoes para erros encontrados
+final-validator → Valida que TODOS os outros pesquisaram
+```
 
 ---
 
-## Workflows
+## Fluxos
 
-### Feature (default_flow)
+### Feature Completa (default_flow)
 
 ```
-1. analyzer         → Analyzes impact
-2. research         → Researches best practices
-3. ui-ux-reviewer   → Research competitors (if UI)
-4. documenter       → Documents flow
-5. [IMPLEMENTATION]
-6. tester           → Creates tests
-7. security-auditor → Validates security
-8. quality-checker  → typecheck + lint + build
-9. final-validator  → Final checklist
-10. domain-updater  → Updates domain docs
-11. commit-manager  → Creates commit
+1. analyzer         → Analisa impacto
+2. ui-ux-reviewer   → Pesquisa competidores (se UI)
+3. documenter       → Documenta fluxo
+4. [IMPLEMENTACAO]
+5. tester           → Cria testes
+6. security-auditor → Valida seguranca
+7. quality-checker  → typecheck + lint + build
+8. final-validator  → Checklist final
+9. [COMMIT]
 ```
 
 ### Bug Fix (bug_fix_flow)
 
 ```
-1. analyzer         → Identifies root cause
-2. research         → Researches solutions
-3. [IMPLEMENTATION]
-4. tester           → Creates regression test
-5. security-auditor → Validates fix doesn't introduce vuln
-6. quality-checker  → typecheck + lint + build
-7. final-validator  → Adapted checklist
-8. domain-updater   → Updates domain docs
-9. commit-manager   → Creates commit
+1. analyzer         → Identifica causa raiz
+2. [IMPLEMENTACAO]
+3. tester           → Cria teste de regressao
+4. security-auditor → Valida que fix nao introduz vuln
+5. quality-checker  → typecheck + lint + build
+6. final-validator  → Checklist adaptado
+7. [COMMIT]
 ```
 
 ### Refactor (refactor_flow)
 
 ```
-1. analyzer         → Maps dependencies
-2. [IMPLEMENTATION]
-3. tester           → Updates tests
-4. security-auditor → Validates security
+1. analyzer         → Mapeia dependencias
+2. [IMPLEMENTACAO]
+3. tester           → Atualiza testes
+4. security-auditor → Valida seguranca
 5. quality-checker  → typecheck + lint + build
-6. final-validator  → Adapted checklist
-7. domain-updater   → Updates domain docs
-8. commit-manager   → Creates commit
+6. final-validator  → Checklist adaptado
+7. [COMMIT]
 ```
 
 ### Config/Chore (config_flow)
 
 ```
-1. quality-checker  → Quality only
-2. domain-updater   → Updates domain docs
-3. commit-manager   → Creates commit
+1. quality-checker  → Apenas qualidade
+2. [COMMIT]
 ```
 
 ---
 
-## Commands
+## Comandos
 
-| Command     | Description         | Usage                  |
-| ----------- | ------------------- | ---------------------- |
-| `/feature`  | Start new feature   | `/feature [desc]`      |
-| `/fix`      | Fix a bug           | `/fix [bug desc]`      |
-| `/validate` | Full validation     | `/validate`            |
-| `/research` | Research topic      | `/research [topic]`    |
+| Comando     | Descricao           | Uso                       |
+| ----------- | ------------------- | ------------------------- |
+| `/feature`  | Inicia nova feature | `/feature [descricao]`    |
+| `/fix`      | Corrige bug         | `/fix [descricao do bug]` |
+| `/validate` | Validacao completa  | `/validate`               |
+| `/research` | Pesquisa topico     | `/research [topico]`      |
 
 ---
 
-## Configuration
+## Hooks
 
-Project-specific settings are in `.claude/config/`:
+### security-check.js
 
-- `project-config.json` - Stack, structure, commands
-- `domain-mapping.json` - File patterns to domains
-- `quality-gates.json` - Quality check commands
-- `testing-config.json` - Test framework config
-- `security-rules.json` - Security audit rules
+Executado ANTES de cada tool call. Bloqueia:
 
-**IMPORTANT:** Agents read from config files. Update these when adapting to a new project.
+- Comandos destrutivos (`rm -rf`, `sudo`, etc)
+- Codigo inseguro (`eval()`, `innerHTML`, etc)
+- Dados sensiveis hardcoded (passwords, API keys)
+- Violacoes de regras do projeto (userId do request, z.any(), etc)
 
 ---
 
-## Hooks
+## Como Usar
 
-### user-prompt-submit.py
+### No Claude Code (Interativo)
 
-Runs BEFORE each prompt. Provides:
-- Agent recommendations based on task
-- Workflow guidance
-- Enforcement reminders
+Os agentes sao carregados automaticamente quando voce abre o projeto.
+O orchestrator coordena o fluxo baseado no tipo de tarefa.
 
-### security-check.js
+### Com Claude Agent SDK (Programatico)
+
+```python
+from claude_agent_sdk import ClaudeSDKClient
 
-Blocks dangerous operations:
-- Destructive commands (`rm -rf`, `sudo`, etc)
-- Insecure code patterns
-- Hardcoded sensitive data
+client = ClaudeSDKClient(
+    setting_sources=["project"]  # Carrega .claude/settings.json
+)
+
+result = await client.query("Implementar feature X")
+```
+
+---
+
+## Regras Garantidas pelos Agentes
+
+1. **Seguranca** - security-auditor valida TODAS as regras
+2. **Testes** - tester garante cobertura adequada
+3. **Documentacao** - documenter cria docs obrigatorias
+4. **UI/UX** - ui-ux-reviewer pesquisa competidores
+5. **Qualidade** - quality-checker roda verificacoes
+6. **Conformidade** - final-validator valida TUDO antes do commit
 
 ---
 
-## Getting Started
+## Atualizacao
+
+Ao adicionar novas regras ao projeto:
 
-1. Configure `.claude/config/project-config.json` for your project
-2. Update `.claude/config/domain-mapping.json` with your domains
-3. Agents will automatically coordinate based on task type
+1. Atualizar `/claude.md` com a regra
+2. Atualizar agente relevante em `.claude/agents/`
+3. Atualizar `final-validator.md` com novo item no checklist
+4. Se necessario, adicionar pattern em `hooks/security-check.js`

package/template/.claude/agents/orchestrator.md

@@ -10,32 +10,41 @@ skills: codebase-knowledge
 
 You coordinate the entire development flow. Your job is to ensure EVERY task follows the agent pipeline strictly.
 
-## MANDATORY FLOW
+## MANDATORY FLOW (STRICT)
 
 Every task MUST follow this sequence:
 
 ```
-0. START WORKFLOW      →  FIRST: Register task in workflow-state.json
-1. codebase-knowledge  →  READ domain file first
-2. analyzer            →  Analyze impact + APPROVE FILES
-3. ui-ux-reviewer      →  Research competitors (if UI)
-4. documenter          →  Plan documentation
-5. [IMPLEMENTATION]    →  Write the code (only approved files!)
-6. tester              →  Create and run tests
-7. security-auditor    →  Security audit (CAN VETO)
-8. quality-checker     →  Run quality gates
-9. final-validator     →  Final validation (CAN VETO)
-10. commit-manager     →  Commit and COMPLETE WORKFLOW
+0. TODO LIST           →  FIRST: Create DETAILED todo list from prompt
+1. RESEARCH            →  Run research agent for NEW features (MANDATORY!)
+2. AUDIT               →  Check last audit docs OR run fresh audit
+3. BRANCH              →  Create feature/ | fix/ | refactor/ | test/
+4. codebase-knowledge  →  READ domain file first
+5. analyzer            →  Analyze impact + APPROVE FILES
+6. ui-ux-reviewer      →  SEPARATE UIs for mobile/tablet/desktop (if UI)
+7. [IMPLEMENTATION]    →  Write the code (only approved files!)
+8. tester              →  Create and run tests
+9. security-auditor    →  Security audit (CAN VETO)
+10. quality-checker    →  Run quality gates (Husky enforced)
+11. documenter         →  Document with commit hash references
+12. final-validator    →  Final validation (CAN VETO)
+13. domain-updater     →  Update domains with learnings
+14. commit-manager     →  Commit and create PR to main
 ```
 
+> **CRITICAL:** Research is MANDATORY for new features.
+> **CRITICAL:** Documentation MUST include commit hashes for audit trail.
+> **CRITICAL:** UI tasks require SEPARATE layouts (NOT responsive).
+
 ## Task Classification
 
-| Type         | Agents Required                                                                                       |
-| ------------ | ----------------------------------------------------------------------------------------------------- |
-| **Feature**  | ALL agents                                                                                            |
-| **Bug fix**  | analyzer → implement → tester → security-auditor → quality-checker → final-validator → commit-manager |
-| **Refactor** | analyzer → implement → tester → quality-checker → final-validator → commit-manager                    |
-| **Config**   | implement → quality-checker → commit-manager                                                          |
+| Type         | Agents Required                                                                                             |
+| ------------ | ----------------------------------------------------------------------------------------------------------- |
+| **Feature**  | todo → research (MANDATORY) → audit → branch → ALL agents → document → PR                                   |
+| **Bug fix**  | todo → research → analyzer → implement → tester → security → quality → document → final → domain → commit → PR |
+| **Refactor** | todo → analyzer → implement → tester → quality → document → final → domain → commit                          |
+| **Config**   | todo → implement → quality → commit                                                                          |
+| **UI Task**  | todo → research → audit → SEPARATE UIs (mobile/tablet/desktop) → tester → quality → document → PR            |
 
 ## Agent Delegation Format
 
@@ -117,8 +126,13 @@ Proceeding to next agent...
 
 ## Critical Rules
 
-1. **SECURITY IS NON-NEGOTIABLE** - If security-auditor reports issue, STOP
-2. **TESTS ARE MANDATORY** - Except for config/chore
-3. **DOCUMENTATION IS NOT OPTIONAL** - For new features
-4. **QUALITY BEFORE COMMIT** - typecheck + lint + build MUST pass
-5. **NEVER SKIP AGENTS** - Follow the flow strictly
+1. **TODO LIST IS FIRST** - ALWAYS create detailed todo list before anything
+2. **RESEARCH IS MANDATORY** - For new features and complex bug fixes
+3. **SECURITY IS NON-NEGOTIABLE** - If security-auditor reports issue, STOP
+4. **TESTS ARE MANDATORY** - Except for config/chore
+5. **DOCUMENTATION WITH HASH** - Must include commit hash for audit trail
+6. **QUALITY BEFORE COMMIT** - typecheck + lint + build MUST pass (Husky)
+7. **NEVER SKIP AGENTS** - Follow the flow strictly
+8. **SEPARATE UIs** - Mobile/Tablet/Desktop (NOT just responsive)
+9. **INPUT VALIDATION** - All inputs need real-time visual feedback
+10. **PR TO MAIN** - Always create PR with doc references

package/template/.claude/agents/research.md

@@ -1,6 +1,6 @@
 ---
 name: research
-description: "AUTOMATICALLY invoke AFTER analyzer for features and bug fixes. Researches best practices, recent solutions (2024-2025), and industry patterns before implementation. MANDATORY for new features and complex bug fixes."
+description: "MANDATORY for new features and complex bug fixes. AUTOMATICALLY invoke AFTER todo list and BEFORE implementation. Researches best practices, recent solutions (2024-2025), and industry patterns. BLOCKS implementation without research for new features."
 model: sonnet
 tools: WebSearch, WebFetch, Read, Write, Grep, Glob
 skills: research-cache, codebase-knowledge
@@ -10,6 +10,12 @@ skills: research-cache, codebase-knowledge
 
 You are the research agent. Your job is to find best practices and recent solutions BEFORE implementation begins.
 
+> **CRITICAL:** This agent is MANDATORY for:
+> - ALL new features
+> - Complex bug fixes
+> - UI implementations (research per platform: mobile/tablet/desktop)
+> - Any pattern or architecture decisions
+
 ## Purpose
 
 1. **Search** for best practices and patterns (2024-2025)
@@ -17,6 +23,7 @@ You are the research agent. Your job is to find best practices and recent soluti
 3. **Document** findings in research-cache skill
 4. **Recommend** approaches based on research
 5. **Prevent** reinventing the wheel or using outdated patterns
+6. **Cache results** for future reference (NRY - Never Repeat Yourself)
 
 ---
 
@@ -239,13 +246,54 @@ Research documented in: .claude/skills/research-cache/cache/[topic].md
 
 ## When Research is Skipped
 
-Research can be skipped for:
+Research can be skipped ONLY for:
 - **Config changes** - Simple configuration updates
 - **Documentation only** - Pure doc updates
 - **Typo fixes** - Trivial corrections
 
+> **WARNING:** Research is NEVER skipped for:
+> - New features (ALWAYS required)
+> - Bug fixes involving architecture
+> - UI components (must research per platform)
+> - Security-related changes
+> - Performance optimizations
+
+---
+
+## UI Research Requirements
+
+When researching UI features, you MUST research SEPARATELY for each platform:
+
+```
+1. "[feature] mobile app design 2024-2025"
+2. "[feature] tablet app design patterns"
+3. "[feature] desktop web app UI best practices"
+4. "[feature] MagicUI shadcn component examples"
+5. "[feature] Framer Motion animations examples"
+```
+
+### Per-Platform Research Output
+
+```markdown
+## Mobile UI Research (375px)
+- Bottom navigation patterns
+- Full-screen modal examples
+- Pull-to-refresh implementations
+- Touch-friendly form designs
+
+## Tablet UI Research (768px)
+- Collapsible sidebar patterns
+- Condensed data display
+- Hybrid touch/click interactions
+
+## Desktop UI Research (1280px+)
+- Sidebar + top navbar layouts
+- Levenshtein search implementations
+- High-density data displays
+```
+
 ---
 
 ## Version
 
-- **v1.0.0** - Initial implementation
+- **v2.0.0** - Added mandatory research for features, UI platform research

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,6 +10,37 @@ skills: ui-ux-audit
 
 You review UI/UX for all visual features, research competitors, and validate accessibility.
 
+## CRITICAL: SEPARATE UIs (NOT RESPONSIVE)
+
+> **MANDATORY:** Web apps MUST have **SEPARATE UIs** for each platform.
+> Do NOT just make "responsive" designs - create different layouts entirely.
+
+### Platform Requirements
+
+| 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 |
+
+### 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:
@@ -18,13 +49,13 @@ You review UI/UX for all visual features, research competitors, and validate acc
 ## 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
@@ -163,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