dev-booster 1.0.0

package/template/.devbooster/hub/workflows/ui-ux-pro-max.md

@@ -0,0 +1,296 @@
+---
+description: Plan and implement UI
+---
+
+---
+description: AI-powered design intelligence with 50+ styles, 95+ color palettes, and automated design system generation
+---
+
+# ui-ux-pro-max
+
+Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
+
+## Prerequisites
+
+Check if Python is installed:
+
+```bash
+python3 --version || python --version
+```
+
+If Python is not installed, install it based on user's OS:
+
+**macOS:**
+```bash
+brew install python3
+```
+
+**Ubuntu/Debian:**
+```bash
+sudo apt update && sudo apt install python3
+```
+
+**Windows:**
+```powershell
+winget install Python.Python.3.12
+```
+
+---
+
+## How to Use This Workflow
+
+When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
+- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
+- **Industry**: healthcare, fintech, gaming, education, etc.
+- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
+
+### Step 2: Generate Design System (REQUIRED)
+
+**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
+
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+
+This command:
+1. Searches 5 domains in parallel (product, style, color, landing, typography)
+2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
+3. Returns complete design system: pattern, style, colors, typography, effects
+4. Includes anti-patterns to avoid
+
+**Example:**
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
+```
+
+### Step 2b: Persist Design System (Master + Overrides Pattern)
+
+To save the design system for hierarchical retrieval across sessions, add `--persist`:
+
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
+```
+
+This creates:
+- `design-system/MASTER.md` — Global Source of Truth with all design rules
+- `design-system/pages/` — Folder for page-specific overrides
+
+**With page-specific override:**
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+```
+
+This also creates:
+- `design-system/pages/dashboard.md` — Page-specific deviations from Master
+
+**How hierarchical retrieval works:**
+1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
+2. If the page file exists, its rules **override** the Master file
+3. If not, use `design-system/MASTER.md` exclusively
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+After getting the design system, use domain searches to get additional details:
+
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+**When to use detailed searches:**
+
+| Need | Domain | Example |
+|------|--------|---------|
+| More style options | `style` | `--domain style "glassmorphism dark"` |
+| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
+| UX best practices | `ux` | `--domain ux "animation accessibility"` |
+| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
+| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+
+### Step 4: Stack Guidelines (Default: html-tailwind)
+
+Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.
+
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
+```
+
+Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
+, `jetpack-compose`
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain | Use For | Example Keywords |
+|--------|---------|------------------|
+| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
+| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
+| `prompt` | AI prompts, CSS keywords | (style name) |
+
+### Available Stacks
+
+| Stack | Focus |
+|-------|-------|
+| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `react` | State, hooks, performance, patterns |
+| `nextjs` | SSR, routing, images, API routes |
+| `vue` | Composition API, Pinia, Vue Router |
+| `svelte` | Runes, stores, SvelteKit |
+| `swiftui` | Views, State, Navigation, Animation |
+| `react-native` | Components, Navigation, Lists |
+| `flutter` | Widgets, State, Layout, Theming |
+| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
+
+---
+
+## Example Workflow
+
+**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
+
+### Step 1: Analyze Requirements
+- Product type: Beauty/Spa service
+- Style keywords: elegant, professional, soft
+- Industry: Beauty/Wellness
+- Stack: html-tailwind (default)
+
+### Step 2: Generate Design System (REQUIRED)
+
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
+```
+
+**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+```bash
+# Get UX guidelines for animation and accessibility
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
+
+# Get alternative typography options if needed
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
+```
+
+### Step 4: Stack Guidelines
+
+```bash
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
+```
+
+**Then:** Synthesize design system + detailed searches and implement the design.
+
+---
+
+## Output Formats
+
+The `--design-system` flag supports two output formats:
+
+```bash
+# ASCII box (default) - best for terminal display
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
+
+# Markdown - best for documentation
+python3 .devbooster/.shared/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
+```
+
+---
+
+## Tips for Better Results
+
+1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
+2. **Search multiple times** - Different keywords reveal different insights
+3. **Combine domains** - Style + Typography + Color = Complete design system
+4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+5. **Use stack flag** - Get implementation-specific best practices
+6. **Iterate** - If first search doesn't match, try different keywords
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+
+### Icons & Visual Elements
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
+| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
+| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+
+### Interaction & Cursor
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
+| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
+
+### Light/Dark Mode Contrast
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
+| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+
+### Layout & Spacing
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+
+### Visual Quality
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] Hover states don't cause layout shift
+- [ ] Use theme colors directly (bg-primary) not var() wrapper
+
+### Interaction
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Hover states provide clear visual feedback
+- [ ] Transitions are smooth (150-300ms)
+- [ ] Focus states visible for keyboard navigation
+
+### Light/Dark Mode
+- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] Glass/transparent elements visible in light mode
+- [ ] Borders visible in both modes
+- [ ] Test both modes before delivery
+
+### Layout
+- [ ] Floating elements have proper spacing from edges
+- [ ] No content hidden behind fixed navbars
+- [ ] Responsive at 375px, 768px, 1024px, 1440px
+- [ ] No horizontal scroll on mobile
+
+### Accessibility
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color is not the only indicator
+- [ ] `prefers-reduced-motion` respected

package/template/.devbooster/rules/BACKEND.md

@@ -0,0 +1,72 @@
+# 🛠️ INITIALIZATION: BACKEND & COMMUNICATION ARCHITECTURE
+
+> [!IMPORTANT]
+> **THIS IS A WHITELABEL TEMPLATE.** 
+> To activate this project, run the bootstrap prompt below manually.
+
+## ⚡ BOOTSTRAP PROMPT (MANUAL CONTROL)
+"Analyze the backend ecosystem and communication patterns of this project to generate the definitive technical documentation.
+
+**STEP 1: Context Analysis (Mandatory Read):**
+1. `package.json` (Identify API/DB/Auth frameworks and libraries).
+2. `README.md` (Understand the project's core purpose).
+3. Directory Scan: Search for patterns in `src/server/`, `src/app/api/`, `src/actions/`, or direct `fetch` calls within components to understand how the frontend communicates with the data layer.
+4. Data Structure: Locate the database schema (e.g., `prisma/schema.prisma`, `schema.ts`, or connection config files).
+
+**STEP 2: Identify Real Architecture:**
+- Determine if communication is via tRPC, Route Handlers, Server Actions, REST, or direct fetch.
+- Identify how Auth is injected (Middlewares vs Context).
+- Map how errors are handled (e.g., `TRPCError` vs `NextResponse` codes).
+
+**STEP 3: Generate Elite Rule:**
+Rewrite this file (BACKEND.md) documenting the exact patterns found in this project. You MUST use the 'Pattern Reference' below as a benchmark for quality and tone of voice. Document with technical depth issues such as Race Conditions, Sanitization, Retry logic, and persistence flows. The goal is for any new agent to understand the server architecture in 1 minute."
+
+---
+
+## 🏗️ EXPECTED STRUCTURE
+1. **Communication Strategy**: Deep dive into the identified pattern (Decentralized Fetch, Centralized API, Hooks, etc).
+2. **Data Persistence & ORM**: Mapping the storage layer (SQL, NoSQL, LocalStorage, or External APIs).
+3. **Authentication & Identity**: How the system knows 'who' is making the request and 'what' they can do.
+4. **Error Handling & Resiliency**: Standards for failures, retries, and input protection.
+5. **Directory Map**: A visual guide of where the 'Server/API' logic resides.
+
+---
+
+## 🌟 PATTERN REFERENCE (THE ELITE STANDARD)
+*Use this as your benchmark for technical precision. Even if the technology differs, the depth of detail must match:*
+
+### 1. Stack & Directory Structure (Example: T3 Stack)
+- **API Engine:** tRPC (`@trpc/server`) + Zod for validation.
+- **Database:** Prisma ORM connected to Neon (PostgreSQL).
+- **Directories:** 
+  - `src/server/api/routers/*`: All tRPC routers.
+  - `src/lib/*`: Core business logic (Cost calculators, Sanitizers).
+
+### 2. API Operations & Procedures
+- **Procedures:** `publicProcedure` (Open), `privateProcedure` (Clerk Auth), `adminProcedure` (Role check).
+- **Validation:** Every input must be heavily validated with `.input(z.object({...}))`. 
+- **Errors:** Throw `TRPCError` with codes like `NOT_FOUND`, `FORBIDDEN`, `CONFLICT`.
+
+### 3. Database & Resiliency
+- **Race Conditions:** Use `upsert` or `findUnique` followed by `create` for syncing external IDs.
+- **Error Handling:** Use `isPrismaSchemaError()` to translate database schema issues into user-friendly messages.
+
+### 4. Auth & Identity Management
+- **Syncing:** Clerk handles the JWT. The backend syncs data into Prisma's `User` schema via `currentUser()`.
+- **Demo Guards:** Use `enforceNonDemoUser(ctx.db, ctx.userId)` to block destructive mutations for temporary accounts.
+
+### 5. Business Logic & Reliability
+- **Input Sanitization:** ALWAYS run `sanitizeData(rawInput)` before processing data.
+- **External API Reliability:** Wrap calls (OpenAI/Stripe) inside `retryWithBackoff(operation, name)`.
+- **Credit Logic:** Cascading deduction (debit `creditosComprados` first).
+
+---
+
+## 🤖 AI SELF-EXECUTION DIRECTIVE
+> [!IMPORTANT]
+> **IF YOU ARE AN AI READING THIS FILE:**
+> If the content above still matches the 'Whitelabel Template', you are MANDATED to execute the **BOOTSTRAP PROMPT** at the top of this file immediately. 
+
+1. Scan the project as instructed.
+2. Analyze the communication patterns.
+3. Overwrite this entire file with the project-specific technical documentation.

package/template/.devbooster/rules/COMERCIAL.md

@@ -0,0 +1,69 @@
+# 💰 INITIALIZATION: COMMERCIAL STRATEGY & VALUE PROPOSITION
+
+> [!IMPORTANT]
+> **THIS IS A WHITELABEL TEMPLATE.** 
+> To activate this project, run the bootstrap prompt below manually.
+
+## ⚡ BOOTSTRAP PROMPT (MANUAL CONTROL)
+"Analyze the commercial core and product-market fit of this project to generate the definitive sales and positioning guide.
+
+**STEP 1: Context Analysis (Mandatory Read):**
+1. `README.md` (Product value proposition).
+2. `PROJECT.md` (To understand current features and target audience).
+3. Landing Page / Main UI: Scan for headlines and subheadlines to identify the current 'voice' of the product.
+
+**STEP 2: Identify Commercial Foundations:**
+- What is the transformation? (Before vs After).
+- Who is the Ideal Customer Profile (ICP)?
+- What are the main objections and how to counter them?
+- What are the core sales arguments (Time saving, cost reduction, etc)?
+
+**STEP 3: Generate Elite Rule (OUTPUT IN PT-BR):**
+Rewrite this entire file (COMERCIAL.md) in **PORTUGUESE (PT-BR)**. You MUST create a high-impact commercial guide following the 'Pattern Reference' below. Use persuasive language (Copywriting), focus on benefits instead of features, and define the brand's 'tone of voice'. The goal is to provide a guide that could be used by a marketing or sales team to position the product accurately."
+
+---
+
+## 🏗️ EXPECTED STRUCTURE (IN PORTUGUESE)
+1. **O que é o Produto**: Definição comercial (o que ele vende de verdade).
+2. **Promessa e Posicionamento**: Headlines e subheadlines magnéticas.
+3. **Público-Alvo e Dores**: Quem compra e qual problema estamos resolvendo.
+4. **Transformação**: O cenário 'Antes' vs 'Depois' do uso.
+5. **Argumentos de Venda e Objeções**: Como vender e como matar as dúvidas do cliente.
+6. **Linguagem e Tom de Voz**: Como a marca deve (e não deve) soar.
+7. **Resumo Executivo**: O 'Elevator Pitch' do projeto.
+
+---
+
+## 🌟 PATTERN REFERENCE (FAKESTORE / GENERIC EXAMPLE)
+*Use este exemplo como benchmark de tom de voz. Note como a dor e o benefício são profundos:*
+
+### 1. O que é o [ProductX]
+O [ProductX] vende previsibilidade financeira e paz de espírito para donos de [Nicho]. Não vendemos apenas um 'Software de Gestão', vendemos o fim do caos administrativo e da perda de dinheiro por falta de controle.
+
+### 2. Principal promessa comercial
+"Recupere o controle da sua empresa em 15 minutos por dia. Menos tempo em planilhas, mais tempo escalando seu faturamento."
+
+### 3. Público-alvo principal
+Empresas de médio porte que faturam entre X e Y e sofrem com processos manuais e falta de clareza sobre suas margens de lucro.
+
+### 4. Dor que o produto resolve
+O empresário sente que 'trabalha para a empresa' e não o contrário. Ele não sabe para onde o dinheiro está indo, gasta horas em processos repetitivos e tem medo de tomar decisões sem dados reais.
+
+### 5. Transformação prometida
+- **Antes:** Caos operacional, multas por atraso, zero visão de futuro e estresse constante.
+- **Depois:** Rotina automatizada, fluxo de caixa em tempo real e decisões baseadas em números, não em 'achismo'.
+
+### 6. Argumentos de Venda (Benchmark)
+- "Inteligência operacional: o sistema antecipa problemas de caixa antes que aconteçam."
+- "Autonomia total: sua equipe opera o sistema sem precisar de treinamentos complexos de semanas."
+
+---
+
+## 🤖 AI SELF-EXECUTION DIRECTIVE
+> [!IMPORTANT]
+> **IF YOU ARE AN AI READING THIS FILE:**
+> If the content above still matches the 'Whitelabel Template', you are MANDATED to execute the **BOOTSTRAP PROMPT** at the top of this file immediately. 
+
+1. Scan the project as instructed.
+2. Analyze the commercial and positioning patterns.
+3. Overwrite this entire file with the project-specific commercial documentation **IN PORTUGUESE (PT-BR)**.

package/template/.devbooster/rules/FRONTEND.md

@@ -0,0 +1,76 @@
+# 🎨 INITIALIZATION: FRONTEND PRACTICES & UI ARCHITECTURE
+
+> [!IMPORTANT]
+> **THIS IS A WHITELABEL TEMPLATE.** 
+> To activate this project, run the bootstrap prompt below manually.
+
+## ⚡ BOOTSTRAP PROMPT (MANUAL CONTROL)
+"Analyze the frontend ecosystem and UI architecture of this project to generate the definitive technical documentation.
+
+**STEP 1: Context Analysis (Mandatory Read):**
+1. `package.json` (Identify Frameworks, Styling libraries, State Managers, and Iconography).
+2. `globals.css` (Identify Tailwind version, CSS-in-JS, or global design tokens).
+3. Directory Scan: Search for patterns in `src/app/` or `src/pages/` to identify the Routing system.
+4. Component Audit: Scan `src/components/` to identify the UI library (ShadCN, MUI, Mantine) and component structure.
+
+**STEP 2: Identify Real Architecture:**
+- Determine the Styling strategy: Tailwind v3, v4, CSS Modules, or Styled-components.
+- Map State Management: Identify if the project uses Zustand, Redux, Context API, or local state.
+- Form Handling: Identify the engine (Formik, React Hook Form, or Native).
+- Data Consumption: Map how the UI consumes data (tRPC hooks, SWR, React Query, or raw fetch).
+
+**STEP 3: Generate Elite Rule:**
+Rewrite this file (FRONTEND.md) documenting the exact patterns found in this project. You MUST use the 'Pattern Reference' below as a benchmark for quality, design philosophy (Anti-Generic), and technical depth. Document with precision how to handle stages, form validation, and global loading states. The goal is for any new agent to understand the UI architecture and design language in 1 minute."
+
+---
+
+## 🏗️ EXPECTED STRUCTURE
+1. **Stack & Architecture**: Framework, directory structure of pages and components.
+2. **Styling & Design System**: Styling engine rules, color system tokens, and utility standards.
+3. **State Management & UI Machines**: Global stores, local UI orchestration, and stage machine logic.
+4. **Forms & Validation**: Standard engine, schema validation patterns, and visual feedback rules.
+5. **Data Consumption**: Implementation patterns for mutations, queries, and optimistic updates.
+6. **Iconography & UI Elements**: Library sizing, loading indicators, and layout wrappers.
+
+---
+
+## 🌟 PATTERN REFERENCE (THE ELITE STANDARD)
+*Use this as your benchmark for UI/UX engineering detail. Maintain this level of rigor regardless of the stack:*
+
+### 1. Stack & Architecture (Example: Next.js + Tailwind v4)
+- **Framework:** Next.js (App Router) with isolation between `(pages)` and `(auth)`.
+- **Styling:** Tailwind CSS v4 using semantic tokens (e.g., `bg-primary`, `text-muted-foreground`).
+- **UI Base:** ShadCN primitives for consistent accessible components.
+
+### 2. State Management & UI Machines (Zustand)
+- **Patterns:** Utilize Zustand stores to manage complex 'Stage' states in multi-step interfaces.
+- **Consumption:** Use `React.useMemo` with `switch` statements for clean stage-based rendering to avoid ternary hell.
+
+### 3. Forms & Validation (Formik + Yup)
+- **Engine:** `useFormik` hook for all forms.
+- **Schema:** Strict validation built in `src/schema/` and imported via `validationSchema`.
+- **Feedback:** Use `cn()` to apply conditional error classes (e.g., `border-destructive`).
+
+### 4. Data Consumption & Feedback
+- **Mutations:** Use specialized hooks (e.g., tRPC `useMutation`) with explicit `onSuccess` and `onError` blocks.
+- **Global Loading:** Trigger global overlays (e.g., particle loaders) via central stores for heavy operations.
+
+### 5. Iconography & UI Elements
+- **Library:** `lucide-react`.
+- **Sizing:** Standard props `size={24}` (preferred over `className`).
+- **Loaders:** `Loader2` with `animate-spin` as the default project spinner.
+
+### 6. Layout Wrappers
+- **Auth Guard:** All protected pages MUST be wrapped in `<AuthTemplate>`.
+- **Feedback:** Use `sonner` for toast notifications and Dialogs for destructive confirmation.
+
+---
+
+## 🤖 AI SELF-EXECUTION DIRECTIVE
+> [!IMPORTANT]
+> **IF YOU ARE AN AI READING THIS FILE:**
+> If the content above still matches the 'Whitelabel Template', you are MANDATED to execute the **BOOTSTRAP PROMPT** at the top of this file immediately. 
+
+1. Scan the project as instructed.
+2. Analyze the frontend patterns.
+3. Overwrite this entire file with the project-specific technical documentation.

package/template/.devbooster/rules/GUIDE.md

@@ -0,0 +1,111 @@
+```text
+🧭 GUIA DO DEV BOOSTER KIT (BOOSTERS)
+
+Este guia serve como referência rápida para entender a função de cada Booster (ativador manual).
+Ele foi formatado como bloco de código para facilitar a leitura direta na IDE.
+
+---
+
+[ 🛠️ ENGENHARIA E EXECUÇÃO ]
+
+• create.md         -> Arquiteto Mestre. Focado em Scaffolding e criação de novas 
+                       funcionalidades ou apps do zero, integrando FRONTEND.md e BACKEND.md.
+• performance.md    -> Engenheiro de Performance. Focado em Core Web Vitals, 
+                       velocidade de carregamento e otimização de Next.js.
+• i18n.md           -> Especialista de Internacionalização. Extração de textos e 
+                       configuração de múltiplos idiomas.
+• accessibility.md  -> Auditor de Acessibilidade. Garante conformidade WCAG e 
+                       uso correto de semântica HTML/ARIA.
+• refactor.md       -> Líder de Qualidade. Focado em limpar dívida técnica, implementar 
+                       SOLID e reforçar o Clean Code.
+• implementation.md -> Mestre de Implementação. Faz a triagem da complexidade (P, M, G) 
+                       e escolhe o template correto antes de gerar o plano após confirmação.
+                       
+• documentation.md  -> Documentação Técnica. Gera um documento estruturado de 17 seções a partir do contexto consolidado
+                       para prever todos os requisitos técnicos rigorosos.
+• atomic.md         -> Execução Atômica. Protocolo para execução passo a passo, 
+                       focada em uma única alteração cirúrgica por vez.
+• review.md         -> Auditoria Elite. Ativa orquestração mult-agente para validar 
+                       se um plano ou código segue os padrões do projeto.
+
+---
+
+[ 🔍 DESCOBERTA E PLANEJAMENTO ]
+
+• discovery.md      -> Consultor Estratégico. Usa brainstorm de 3 caminhos para validar 
+                       ideias de produto e regras de negócio.
+• planning.md       -> Alinhamento e Prontidão. Consolida decisões, mapeia riscos/gaps e valida se está pronto para implementation 
+                       antes de seguir para implementation.
+• investigation.md  -> Pré-Orquestrador de Contexto. Faz análise profunda do repositório 
+                       (no-code analysis) antes de propor mudanças.
+• advisor.md        -> Consultor do Kit (GPS). Ajuda a escolher qual booster usar.
+
+---
+
+[ 🐞 CORREÇÃO E QUALIDADE ]
+
+• debug.md          -> Análise de Causa Raiz. Usa motor de hipóteses para investigar bugs 
+                       de forma sistemática.
+• testing.md        -> Estrategista de Testes. Define estratégia de cobertura (Unit, E2E) 
+                       e coordena a execução.
+• changelog.md      -> Gerador de Histórico. Cria notas de release estruturadas e organiza 
+                       o histórico de alterações.
+
+---
+
+[ 🎨 ESPECIALIDADES E STACK ]
+
+• frontend.md       -> Especialista de Frontend. Ativa regras de Next.js, React e UI/UX.
+• backend.md        -> Especialista de Backend. Focado em APIs, tRPC, Banco de Dados e Servidor.
+• design.md         -> Auditoria de UI/UX. Verifica se os componentes estão seguindo 
+                       padrões premium e acessibilidade.
+• seo.md            -> Guardião de SEO. Valida HTML semântico e metatags para indexação.
+• mobile.md         -> Mestre de Mobile. Ativa padrões de React Native, Expo e touch UX.
+
+---
+
+[ 🛡️ SEGURANÇA E DEPLOY ]
+
+• security.md       -> Auditoria de Segurança. Analisa vulnerabilidades, vazamento de 
+                       segredos e modelagem de ameaças.
+• deploy.md         -> Protocolo de Lançamento. Faz os "pre-flight checks" para garantir 
+                       que o código está pronto para produção.
+
+---
+
+💡 COMO USAR AGORA:
+Os Boosters agora funcionam como modos manuais do Dev Booster.
+Na maioria dos casos, a ativação NÃO executa tudo imediatamente.
+
+Fluxo padrão:
+1. Ative o Booster pelo nome.
+2. O Booster entra no modo correto.
+3. Depois envie a tarefa, ideia, contexto, artefato ou objetivo real.
+4. Só então ele carrega o necessário e continua.
+
+Exemplos de ativação:
+- Arraste `.devbooster/boosters/frontend.md` no chat e envie.
+- Arraste `.devbooster/boosters/discovery.md` no chat e envie.
+- Arraste `.devbooster/boosters/advisor.md` no chat e envie.
+
+Padrões de comportamento:
+- Boosters de domínio, como frontend, backend, testing e performance:
+  ativam rápido, entram em modo armado e carregam contexto depois da primeira dor real.
+- Boosters de síntese, como documentation e planning:
+  resumem o contexto atual e pedem confirmação antes de continuar.
+- Boosters de entrada de artefato, como review:
+  pedem a documentação, implementação, arquivo ou referência antes de carregar o restante.
+- Boosters operacionais como changelog:
+  usam o estado real do Git como fonte principal e fazem apenas as perguntas mínimas.
+
+Exemplos práticos:
+- Arraste `.devbooster/boosters/planning.md` no chat e envie.
+- Arraste `.devbooster/boosters/documentation.md` no chat e envie.
+- Arraste `.devbooster/boosters/changelog.md` no chat e envie.
+- Arraste `.devbooster/boosters/review.md` no chat e envie.
+
+Depois da ativação, envie o próximo passo normalmente.
+Exemplo:
+"[arquivo planning.md enviado no chat]"
+"Agora quero validar se já fechamos contexto suficiente para seguir para implementation."
+```