Agent skill · Frontend

implement-ag-playbook

Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.

AgnosticUIgithub.com/AgnosticUIGitHub ↗
claude-codecan modify filesApache-2.0
Install
npx skills add AgnosticUI/agnosticui --skill implement-ag-playbook --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 7 KB
Bundled scripts: none
Allowed tools: ReadGrepGlobEditWriteBash(npm*)Bash(npx*)Bash(ls*)Bash(cp
Path: .claude/skills/implement-ag-playbook/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 822
Language: TypeScript

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

**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-L

What's inside
Steps it walks through
  1. Playbook Structure Reference
  2. Phase 0: Validation
  3. Phase 1: Project Scaffolding
  4. Phase 2: Configuration
  5. Phase 3: Implementation
  6. Phase 4: Verification
  7. Phase 5: Commit
  8. Key Patterns
  9. Icon Imports
  10. Component Imports
  11. Event Handling
  12. Common Issues & Fixes
  13. Incomplete Playbook Warning
Commands it runs
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
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
npx agnosticui-cli init --framework [react|vue|lit] --skip-prompts
npx agnosticui-cli add [COMPONENTS from prompt]
More from agnosticui
All skills →
implement-github-featureDesign and implement a new feature or component from a GitHub issue. Use for net-new functionality…Frontendfix-github-issueFix a GitHub issue by number. Use when asked to fix GitHub issues.Otherupdate-component-docsUpdate component documentation when code changesFrontend
About this skill
What does the implement-ag-playbook skill do?

Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.

How do I install it?

Run `npx skills add AgnosticUI/agnosticui --skill implement-ag-playbook --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From AgnosticUI/agnosticui, a repository with 822 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.