---
name: implement-ag-playbook-666f42aca9b4
description: Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.
disable-model-invocation: false
allowed-tools: Read, Grep, Glob, Edit, Write, Bash(npm *), Bash(npx *), Bash(ls *), Bash(cp *), Bash(mkdir *), Bash(git status), Bash(git diff *), Bash(git log *), Bash(git add *), Bash(git commit *)
---

**Usage:** `/implement-ag-playbook PLAYBOOK_NAME [MODE]`

**Examples:**
- `/implement-ag-playbook onboarding` - Implement all available prompts
- `/implement-ag-playbook login 3-frameworks` - Implement only PROMPT-3-FRAMEWORKS.md
- `/implement-ag-playbook login react` - Implement only PROMPT-REACT.md

Implement the specified playbook based on its existing PROMPT specification files.

---

## Playbook Structure Reference

Complete playbooks have this structure (see `v2/playbooks/README.md`):

```
v2/playbooks/[name]/
├── PROMPT-3-FRAMEWORKS.md    # Builds → react-example/, vue-example/, lit-example/
├── PROMPT-REACT.md           # Builds → react/
├── PROMPT-VUE.md             # Builds → vue/
├── PROMPT-LIT.md             # Builds → lit/
└── design/                   # Shared assets (mockups, icons, images)
```

**Single-Framework vs 3-Frameworks differences:**
- Different fonts (e.g., Playfair Display vs Merriweather)
- Different social icons (e.g., Apple vs Facebook)
- Different asset filenames (e.g., `logo.svg` vs `logo-3-frameworks.svg`)

---

## Phase 0: Validation

1. **Verify playbook exists**
   - Check `v2/playbooks/$ARGUMENTS/` exists
   - List available PROMPT files:
     - `PROMPT-3-FRAMEWORKS.md`
     - `PROMPT-REACT.md`
     - `PROMPT-VUE.md`
     - `PROMPT-LIT.md`
   - If MODE specified, verify that PROMPT file exists
   - If no MODE specified, ask user which to implement

2. **Read the prompt specification**
   - Read the target PROMPT file(s)
   - Extract:
     - Required components (for `agnosticui-cli add`)
     - Design specifications
     - Font requirements
     - Asset copying instructions
     - Framework-specific configurations

---

## Phase 1: Project Scaffolding

3. **Create Vite project(s)**
   - Navigate to `v2/playbooks/$ARGUMENTS/`
   - Create appropriate project(s):

   **For 3-frameworks mode:**
   ```bash
   npm create vite@latest react-example -- --template react-ts
   npm create vite@latest vue-example -- --template vue-ts
   npm create vite@latest lit-example -- --template lit-ts
   ```

   **For single-framework mode:**
   ```bash
   npm create vite@latest react -- --template react-ts   # PROMPT-REACT.md
   npm create vite@latest vue -- --template vue-ts       # PROMPT-VUE.md
   npm create vite@latest lit -- --template lit-ts       # PROMPT-LIT.md
   ```

4. **Install dependencies**
   - **React:** `npm install && npm install lucide-react lit`
   - **Vue:** `npm install && npm install lucide-vue-next lit`
   - **Lit:** `npm install && npm install lit`

5. **Initialize AgnosticUI CLI**
   - For each project:
   ```bash
   npx agnosticui-cli init --framework [react|vue|lit] --skip-prompts
   npx agnosticui-cli add [COMPONENTS from prompt]
   ```

---

## Phase 2: Configuration

6. **Copy design assets (if applicable)**
   - Check `design/` folder for assets beyond mockups
   - **Not all playbooks have assets to copy** - some only have mockups (e.g., `onboarding`)
   - If assets exist (icons, logos, background images), copy to each project's `public/` folder
   - Follow asset instructions in the PROMPT file

7. **Vue vite.config.ts**
   - Add custom element recognition for `ag-*` tags:
   ```typescript
   vue({
     template: {
       compilerOptions: {
         isCustomElement: (tag) => tag.startsWith('ag-'),
       },
     },
   })
   ```

8. **Token imports**
   - Import in each project's entry point:
   ```typescript
   import './components/ag/styles/ag-tokens.css'
   import './components/ag/styles/ag-tokens-dark.css'
   ```

9. **Font setup**
   - Add Google Fonts link to each `index.html` per PROMPT specification

10. **TypeScript configuration (Vue)**
    - If CLI-generated code causes errors, relax `tsconfig.app.json`:
    ```json
    "strict": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false
    ```

---

## Phase 3: Implementation

11. **Implement each framework**
    - Follow the PROMPT specification exactly
    - **React:** `src/App.tsx` using React wrappers + lucide-react
    - **Vue:** `src/App.vue` using Vue wrappers + lucide-vue-next
    - **Lit:** Custom element using core components + inline SVG icons

12. **Verify builds**
    - Run `npm run build` in each project
    - Fix any TypeScript or build errors
    - Test with `npm run dev`

---

## Phase 4: Verification

13. **Visual verification**
    - Run each example
    - Compare against design mockups in `design/`
    - Check responsive breakpoints
    - Verify component interactions

14. **Cross-framework consistency**
    - All implementations should behave identically
    - State management works correctly
    - Styling matches across frameworks

---

## Phase 5: Commit

15. **Stage and commit**
    - Show `git diff --stat`
    - Commit with descriptive message
    - **WAIT FOR USER APPROVAL**

---

## Key Patterns

### Icon Imports
- **React:** `import { Icon } from "lucide-react"`
- **Vue:** `import { Icon } from "lucide-vue-next"`
- **Lit:** Inline SVG templates (lucide doesn't work directly)

### Component Imports
- **React:** `./components/ag/[Component]/react/`
- **Vue:** `./components/ag/[Component]/vue/`
- **Lit:** `./components/ag/[Component]/core/`

### Event Handling
- Selection components emit `selection-change` events
- Event detail: `{ value, checked, selectedValues }`

---

## Common Issues & Fixes

| Issue | Fix |
|-------|-----|
| Vue `ag-*` warnings | Add `isCustomElement` to vite.config.ts |
| TypeScript strict errors | Relax `tsconfig.app.json` settings |
| Missing dark mode | Import both `ag-tokens.css` AND `ag-tokens-dark.css` |
| Button `isDisabled` prop | Use `disabled` not `isDisabled` |
| Timeline connector misalignment | Ensure core component has `::slotted(*) { box-sizing: border-box }` |

---

## Incomplete Playbook Warning

If a playbook is missing PROMPT files, notify the user:

> **Warning:** The `$ARGUMENTS` playbook is incomplete.
>
> **Present:** [list files]
> **Missing:** [list files]
>
> Complete playbooks should have:
> - `PROMPT-3-FRAMEWORKS.md` → `react-example/`, `vue-example/`, `lit-example/`
> - `PROMPT-REACT.md` → `react/`
> - `PROMPT-VUE.md` → `vue/`
> - `PROMPT-LIT.md` → `lit/`
>
> Would you like to:
> 1. Implement only the available prompts
> 2. Generate the missing PROMPT files first

---


---
Source attribution: AgnosticUI
Original project: https://github.com/AgnosticUI/agnosticui
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2026 Gabriel Moreira

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: AgnosticUI
Original project: https://github.com/AgnosticUI/agnosticui
Attribution basis: Upstream repository explicitly recorded in package mirror path

Fields of work: Development & Engineering, Product Management
Roles: Frontend Developer, Growth Product Manager, Product Manager
Specialties: Backend, Frontend
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: c2c06330e47429f448e6b3c9a5c2e10315b5d4557301c8cc12ef74bc2d6775d5