New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Implement Ag Playbook

by AgnosticUI in AgnosticUI/agnosticui

Implement a playbook from its PROMPT specification files. An agent skill from AgnosticUI/agnosticui.

Apache-2.0Auto-check passedFrontend & Design

Install Implement Ag Playbook

skills CLI
$ npx skills add AgnosticUI/agnosticui --skill implement-ag-playbook -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install AgnosticUI/agnosticui implement-ag-playbook --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/AgnosticUI/agnosticui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/implement-ag-playbook .claude/skills/implement-ag-playbook && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implement-ag-playbook
GitHub stars
827
Token cost
~1.7k tokens
SKILL.md length
529 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
Apache-2.0

At a glance

Implement a playbook from its PROMPT specification files. An agent skill from AgnosticUI/agnosticui.

  • Works in 6 steps: Validation → Project Scaffolding → Configuration → …
  • Frontend & Design work in your project
  • SKILL.md covers Playbook Structure Reference, Phase 0: Validation, Phase 1: Project Scaffolding and Phase 2: Configuration, plus 6 more sections
  • Calls npm, npx and git

What it does

Implement Ag Playbook is an agent skill from AgnosticUI/agnosticui. Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with React, Vue.js and npm. The repository describes itself as: AgnosticUI Local (v2) is a CLI-based UI component library that copies components directly into your project. Works with AI tools, agent-driven UIs, and prompt-ready workflows. The licence is Apache-2.0.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/implement-ag-playbook”

Requirements

  • Node.js
  • Pre-approved tools (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 *)

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Validation
  2. Project Scaffolding
  3. Configuration
  4. Implementation
  5. Verification
  6. Commit

What it can do on your machine

Read from SKILL.md and the folder at commit c028c27. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Grep
    • Glob
    • Edit
    • Write
    • Bash(npm *)
    • Bash(npx *)
    • Bash(ls *)
    • Bash(cp *)
    • Bash(mkdir *)

    …and 5 more on the same allowed-tools line.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • npx
    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, npx and git, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implement Ag Playbook loads about 1.7k tokens when it runs. Until then it costs about 46 tokens; SKILL.md has 529 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~46
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from AgnosticUI/agnosticui at commit c028c27, republished under its Apache-2.0 licence (© AgnosticUI). 529 words, ~1,681 tokens.

Download SKILL.mdSave it as .claude/skills/implement-ag-playbook/SKILL.md (or your agent's skills folder).
name
implement-ag-playbook
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.
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 *)
disable-model-invocation
false

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

  1. 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

  2. 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

  3. 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

  1. 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

  2. Vue vite.config.ts

    • Add custom element recognition for ag-* tags:
    typescript
    vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('ag-'),
    },
  },
})

  3. 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'

  4. Font setup

    • Add Google Fonts link to each index.html per PROMPT specification

  5. TypeScript configuration (Vue)

    • If CLI-generated code causes errors, relax tsconfig.app.json:
    json
    "strict": false,
"noUnusedLocals": false,
"noUnusedParameters": false
Show full SKILL.md (251 more words)Show less

Phase 3: Implementation

  1. 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

  2. Verify builds

    • Run npm run build in each project
    • Fix any TypeScript or build errors
    • Test with npm run dev

Phase 4: Verification

  1. Visual verification

    • Run each example
    • Compare against design mockups in design/
    • Check responsive breakpoints
    • Verify component interactions

  2. Cross-framework consistency

    • All implementations should behave identically
    • State management works correctly
    • Styling matches across frameworks

Phase 5: Commit

  1. 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

IssueFix
Vue ag-* warningsAdd isCustomElement to vite.config.ts
TypeScript strict errorsRelax tsconfig.app.json settings
Missing dark modeImport both ag-tokens.css AND ag-tokens-dark.css
Button isDisabled propUse disabled not isDisabled
Timeline connector misalignmentEnsure 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

© AgnosticUI, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/implement-ag-playbook of AgnosticUI/agnosticui.

Open the folder on GitHubat commit c028c27

Compare with similar skills

Implement Ag Playbook next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implement Ag Playbook compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implement Ag Playbook this skillAgnosticUI/agnosticui827—~1.7kAutomated safety check: PassApache-2.0
Kb Web ScanningCommunity-Access/accessibility-agents422—~1.2kAutomated safety check: PassMIT
Light Frontend DesignLight0305/Light-skills641—~3.1kAutomated safety check: PassMIT
Antigravity ManagerDraculabo/AntigravityManager2.4k—~793Automated safety check: PassCustom licence
Vuetify Skilldlogue/vite-vuetify-ts-starter1811 repos~1.9kAutomated safety check: PassMIT
Tanstack Querybskimball/tanstack-hono1191 repos~5.4kAutomated safety check: PassMIT

Similar skills

  • Kb Web Scanning

    Community-Access/accessibility-agents

    Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

    422 GitHub stars~1.2k tokensUpdated 15 days ago
    Frontend & DesignAuto-check passed

  • Light Frontend Design

    Light0305/Light-skills

    Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…

    641 GitHub stars~3.1k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Antigravity Manager

    Draculabo/AntigravityManager

    Comprehensive guide to Antigravity Manager architecture, workflows, and development.

    2.4k GitHub stars~793 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Vuetify Skilld

    logue/vite-vuetify-ts-starter

    Vue Material Component Framework. An agent skill from logue/vite-vuetify-ts-starter.

    181 GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed

  • Tanstack Query

    bskimball/tanstack-hono

    Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.

    119 GitHub starsUsed in 1 repo~5.4k tokens
    Frontend & DesignAuto-check passed

  • Frontend Code Review

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要审查前端代码（React/Vue/Next.js/TypeScript/Tailwind等）、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景：前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

    235 GitHub stars~614 tokensUpdated 5 mo ago
    Frontend & DesignAuto-check passed

More from AgnosticUI/agnosticui

  • Implement GitHub Feature

    AgnosticUI/agnosticui

    Design and implement a new feature or component from a GitHub issue.

    827 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

  • Update Component Docs

    AgnosticUI/agnosticui

    Update component documentation when code changes. An agent skill from AgnosticUI/agnosticui.

    827 GitHub stars~607 tokensUpdated 3 mo ago
    Auto-check passed

  • Check Accessibility

    AgnosticUI/agnosticui

    Review component for accessibility issues. An agent skill from AgnosticUI/agnosticui.

    827 GitHub stars~635 tokensUpdated 3 mo ago
    Auto-check passed

  • Fix GitHub Issue

    AgnosticUI/agnosticui

    Fix a GitHub issue by number. An agent skill from AgnosticUI/agnosticui.

    827 GitHub stars~751 tokensUpdated 3 mo ago
    Auto-check passed

  • Explain Code

    AgnosticUI/agnosticui

    Explain what code does in plain English

    827 GitHub starsUsed in 1 repo~507 tokens
    Auto-check passed

Works with

Categories

Questions about Implement Ag Playbook

What does Implement Ag Playbook do?

Implement a playbook from its PROMPT specification files. An agent skill from AgnosticUI/agnosticui. Implement Ag Playbook is an agent skill from AgnosticUI/agnosticui. Implement a playbook from its PROMPT specification files.

When should I use Implement Ag Playbook?

Implement Ag Playbook fits situations like: frontend & Design work in your project.

How do I install Implement Ag Playbook in Claude Code?

Run `npx skills add AgnosticUI/agnosticui --skill implement-ag-playbook -a claude-code`. Or copy the skill folder (.claude/skills/implement-ag-playbook in AgnosticUI/agnosticui) into .claude/skills/implement-ag-playbook in your project. Claude Code loads it when a task matches its description.

How do I install Implement Ag Playbook in Codex?

Run `npx skills add AgnosticUI/agnosticui --skill implement-ag-playbook -a codex`. Or copy the skill folder (.claude/skills/implement-ag-playbook in AgnosticUI/agnosticui) into .agents/skills/implement-ag-playbook in your project. Codex loads it when a task matches its description.

Can I use Implement Ag Playbook in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AgnosticUI/agnosticui --skill implement-ag-playbook -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implement-ag-playbook, .gemini/skills/implement-ag-playbook, .github/skills/implement-ag-playbook and .opencode/skills/implement-ag-playbook in your project.

What does Implement Ag Playbook need to run?

Going by SKILL.md and its folder, Implement Ag Playbook needs the command-line tools its instructions call (npm, npx and git). Our summary lists: Node.js. Its frontmatter pre-approves these 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 *).

Does Implement Ag Playbook access the network?

SKILL.md contains no URLs. Its commands use npm, npx and git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Implement Ag Playbook safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Implement Ag Playbook use?

Implement Ag Playbook is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Implement Ag Playbook use?

About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Implement Ag Playbook?

Skills that share tags, products or a category with Implement Ag Playbook: Kb Web Scanning (Community-Access/accessibility-agents, 422 stars), Light Frontend Design (Light0305/Light-skills, 641 stars), Antigravity Manager (Draculabo/AntigravityManager, 2.4k stars) and Vuetify Skilld (logue/vite-vuetify-ts-starter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implement Ag Playbook?

AgnosticUI (a GitHub organization) maintains it in AgnosticUI/agnosticui, which has 827 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on June 30, 2026.

Source: AgnosticUI/agnosticui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.