Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.
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.mdImplement the specified playbook based on its existing PROMPT specification files.
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:
logo.svg vs logo-3-frameworks.svg)Verify playbook exists
v2/playbooks/$ARGUMENTS/ existsPROMPT-3-FRAMEWORKS.mdPROMPT-REACT.mdPROMPT-VUE.mdPROMPT-LIT.mdRead the prompt specification
agnosticui-cli add)Create Vite project(s)
v2/playbooks/$ARGUMENTS/For 3-frameworks mode:
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:
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
Install dependencies
npm install && npm install lucide-react litnpm install && npm install lucide-vue-next litnpm install && npm install litInitialize AgnosticUI CLI
npx agnosticui-cli init --framework [react|vue|lit] --skip-prompts
npx agnosticui-cli add [COMPONENTS from prompt]
Copy design assets (if applicable)
design/ folder for assets beyond mockupsonboarding)public/ folderVue vite.config.ts
ag-* tags:vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('ag-'),
},
},
})
Token imports
import './components/ag/styles/ag-tokens.css'
import './components/ag/styles/ag-tokens-dark.css'
Font setup
index.html per PROMPT specificationTypeScript configuration (Vue)
tsconfig.app.json:"strict": false,
"noUnusedLocals": false,
"noUnusedParameters": false
Implement each framework
src/App.tsx using React wrappers + lucide-reactsrc/App.vue using Vue wrappers + lucide-vue-nextVerify builds
npm run build in each projectnpm run devVisual verification
design/Cross-framework consistency
git diff --statimport { Icon } from "lucide-react"import { Icon } from "lucide-vue-next"./components/ag/[Component]/react/./components/ag/[Component]/vue/./components/ag/[Component]/core/selection-change events{ value, checked, selectedValues }| 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 } |
If a playbook is missing PROMPT files, notify the user:
Warning: The
$ARGUMENTSplaybook 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:
- Implement only the available prompts
- Generate the missing PROMPT files first