{
  "skills": [
    {
      "id": "skl_accent_allocator",
      "name": "accent-allocator",
      "plugin": "cwc-design",
      "description": "Automated accent allocation for new subagent*.com sites: a census parser over the real SITES[] registry (workers/subagentdomains/src/index.ts, 94 entries / 83 unique hexes as of 2026-07-09), the family's real hex/255 P3 derivation, and a deterministic largest-hue-gap proposer that emits N visually-spread AccentSpec candidates avoiding every taken hex — validated against the sibling fleet-design-system skill's AccentSpecSchema by reference, not a mirror. Use when the user wants to \"pick an accent\" for a new site, \"allocate accents\" for a fleet-expansion batch, compute a hex's display-p3 value, or census which accents are already taken. Do NOT use for validating an already-chosen batch (that's the collision GATE — plugins/cwc-deploy/skills/fleet-expansion/scripts/check-accents.sh — this skill proposes, the gate validates), for editing the six legacy hand-tuned shared kit tokens in workers/_shared/kit/css.ts (they deliberately do NOT follow the hex/255 formula), or for the token drift check (sibling fleet-design-system skill).",
      "summary": "Automated accent allocation for new subagent*.com sites: a census parser over the real SITES[] registry (workers/subagentdomains/src/index.ts, 94 entries / 83 unique hexes as of 2026-07-09), the family's real hex/255 P3 derivation, and a deterministic largest-hue-gap proposer that emits N visuall...",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/accent-allocator/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_accent_allocator"
    },
    {
      "id": "skl_agent_dx_cli_scale",
      "name": "agent-dx-cli-scale",
      "plugin": "cwc-design",
      "description": "A scoring scale for evaluating how well a CLI is designed for AI agents, based on the \"Rewrite Your CLI for AI Agents\" principles.",
      "summary": "A scoring scale for evaluating how well a CLI is designed for AI agents, based on the \"Rewrite Your CLI for AI Agents\" principles.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/agent-dx-cli-scale/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_agent_dx_cli_scale"
    },
    {
      "id": "skl_animation",
      "name": "animation",
      "plugin": "cwc-design",
      "description": "Produce the \"Animation\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation) using Motion (motion.dev, npm package \"motion\", CDN-loadable with zero build step — https://cdn.jsdelivr.net/npm/motion@12.42.2/+esm), not hand-rolled CSS keyframes. Covers Motion's real capabilities: independent transforms (x/y/rotate/scale via animate()), scroll-linked animation (scroll()+ScrollTimeline), native gestures (whileHover/whileTap/drag), layout animation, spring physics (type:\"spring\"), exit animation (keep-in-DOM-until-exit pattern), timeline sequences (variants+stagger), and motion values (live-derived state). Two output modes: (1) frontend Workers animation — real Motion-driven CSS/JS running live in a Cloudflare Worker-served page; (2) rendered-video-loop content — a sequence of still images (e.g. higgsfield-generated frames) played back as a looping filmstrip, for cases where the content itself is pre-rendered art rather than DOM elements. Visual language for both modes is this family's own real entity-graph / node-link \"galaxy\" style (glowing cyan/green nodes, thin connecting edges on black — see plugins/cwc-design/generated/ and the real deck.ts hero-band/close-band illustrations), not invented per-project. Use when the user wants a real animation/motion artifact, references Motion/motion.dev, wants a claude.ai/design-style Animation output, or wants the Global Workspace storyboard turned into actual running motion. Do NOT use for static Prototype/Wireframe mockups (sibling skills) or the fleet's own baseline `@view-transition`/reduced-motion CSS rules (fleet-design-system's \"Do's and Don'ts\") — though every animation this skill produces MUST still respect `prefers-reduced-motion`.",
      "summary": "Produce the \"Animation\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation) using Motion (motion.dev, npm package \"motion\", CDN-loadable with zero build step — https://cdn.jsdelivr.net/npm/motion@12.42.2/+esm), not hand-rolled CSS keyframes.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/animation/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_animation"
    },
    {
      "id": "skl_architecture_wireframes",
      "name": "architecture-wireframes",
      "plugin": "cwc-design",
      "description": "CRUD operations on the family's architecture diagram / wireframe set across TWO render targets — Figma/FigJam (via the official Figma MCP server) and, since 2026-07-05, the native Swift `FleetGraphView` in src/coworkers (the coworker-PLUGIN dependency layer: which cwc-* plugin depends on which, generated from plugins/cwc-*/DEPENDENCIES.json into schemas/fleet-graph.json — see schemas/FLEET-GRAPH.md). Use when the user wants an architecture diagram, system visualization, wireframe, or FigJam board created, read back, updated, or retired — \"diagram the fleet\", \"visualize the plugin architecture\", \"update the architecture board\", \"screenshot the wireframe\", \"add the new primitive to the diagram\" — or when a Swift change touches FleetGraphView and needs a design-system QA sign-off before it ships (8-token conformance, Liquid Glass conventions, GlassEffectContainer grouping, WCAG contrast) — or pastes a figma.com URL for one of this family's boards. Pairs with cwc-engineering (system facts: workers, crates, schema; also owns fleet-graph-build.py) and cwc-data (warehouse facts) as the sources of what to draw. Do NOT use for the 8-token Hardware Buddy character-pack loop (that's the sibling design-playbook skill), and do NOT invent architecture — every box and edge must be a real worker, plugin, coworker, or API that exists in the repo.",
      "summary": "CRUD operations on the family's architecture diagram / wireframe set across TWO render targets — Figma/FigJam (via the official Figma MCP server) and, since 2026-07-05, the native Swift `FleetGraphView` in src/coworkers (the coworker-PLUGIN dependency layer: which cwc-* plugin depends on which, g...",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/architecture-wireframes/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_architecture_wireframes"
    },
    {
      "id": "skl_data_shape_svg",
      "name": "data-shape-svg",
      "plugin": "cwc-design",
      "description": "Render a real, source-verified SVG diagram — a pipeline/system architecture diagram (every node a real function/stage that exists in the codebase, grep-verified before drawing) or a data-shape /exploration diagram (every stat a real, computed number, never invented). Generalizes the pipeline-architecture-diagram pattern first built for agenttables.com (workers/agenttables/src/ pipeline-viz.ts) into a reusable methodology. For data-shape diagrams specifically, consumes the structured JSON produced by the sibling plugin cwc-data-engineering's `parquet-shape-profiler` skill (DatasetShapeProfile: row/column counts, per-column type, null rate, numeric percentiles or categorical top-values) — this skill owns turning that structured, already-computed data into SVG markup; it does NOT compute statistics itself. Use when the user wants an architecture diagram of real code, a visualization of a dataset's shape/structure, or a \"what does the data look like\" exploration diagram. Do NOT use for the fleet's own system/plugin architecture (sibling `architecture-wireframes` skill's territory — Figma/FigJam boards, a different scope) or for computing the underlying data statistics yourself (that's cwc-data-engineering's job; this skill only visualizes numbers it's handed).",
      "summary": "Render a real, source-verified SVG diagram — a pipeline/system architecture diagram (every node a real function/stage that exists in the codebase, grep-verified before drawing) or a data-shape /exploration diagram (every stat a real, computed number, never invented).",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/data-shape-svg/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_data_shape_svg"
    },
    {
      "id": "skl_dependency_graph_sync",
      "name": "dependency-graph-sync",
      "plugin": "cwc-design",
      "description": "Keep the DESIGN VIEW of the fleet's dependency graph — the subagentdevices.com/architecture SVG node-link map (hand-maintained ARCH_NODES/ARCH_EDGES_* arrays) and the Figma architecture board (wireframes.json ledger) — in sync with the GENERATED source of truth, workers/build-graph.json. Use when a cross-site fetch is added or removed, a new worker/site ships or one is retired, the user asks \"is the architecture map current\", \"check map drift\", \"arch drift\", \"sync the diagram\", \"does the map match reality\", after scripts/build-graph.py regenerates, or before publishing/screenshotting any architecture visual. Do NOT use for creating or CRUD-ing boards themselves (sibling architecture-wireframes skill), for build/deploy staleness of workers against kit changes (scripts/worker-build.sh — cwc-engineering/cwc-deploy territory), or for live health of fetch targets alone (build-graph.py --check-refs covers that without this skill).",
      "summary": "Keep the DESIGN VIEW of the fleet's dependency graph — the subagentdevices.com/architecture SVG node-link map (hand-maintained ARCH_NODES/ARCH_EDGES_* arrays) and the Figma architecture board (wireframes.json ledger) — in sync with the GENERATED source of truth, workers/build-graph.json.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/dependency-graph-sync/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_dependency_graph_sync"
    },
    {
      "id": "skl_design_playbook",
      "name": "design-playbook",
      "plugin": "cwc-design",
      "description": "Design coworker playbook — work the 8-token design system and ship Claude Hardware Buddy character packs through the gated publish loop. Use when the user wants design tokens, a token lint (WCAG contrast), a buddy character pack built from tokens, or a pack published (which requires operator approval on the buddy device). Trigger on \"design tokens\", \"lint the palette\", \"build a buddy pack\", \"publish the pack\", or follow-up design work after /design.",
      "summary": "Design coworker playbook — work the 8-token design system and ship Claude Hardware Buddy character packs through the gated publish loop.",
      "gated": 1,
      "source_path": "plugins/cwc-design/skills/design-playbook/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_design_playbook"
    },
    {
      "id": "skl_document",
      "name": "document",
      "plugin": "cwc-design",
      "description": "Produce the \"Document\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation): research briefs, synthesis reports, accessibility audits, and design critiques — anything whose output IS a written document, not a visual mockup. Use when the user wants to plan/synthesize user research, run a WCAG audit, get structured design feedback on a mockup, or produce any design-related written report. Do NOT use for a live wireframe/layout artifact (sibling `wireframe` skill) or for slide decks (sibling `slides` skill).",
      "summary": "Produce the \"Document\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation): research briefs, synthesis reports, accessibility audits, and design critiques — anything whose output IS a written document, not a visual mockup.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/document/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_document"
    },
    {
      "id": "skl_fleet_design_system",
      "name": "fleet-design-system",
      "plugin": "cwc-design",
      "description": "Owns the real, deployed CSS design system shared by 66 subagent*.com Workers (workers/_shared/kit/css.ts + shell.ts), its live showcase (subagentcowork.com/design-system), its per-technique adoption evidence (subagentdevices.com), a typed/tested drift check against subagentcoworkers.com/deck, and a portable JSON export for attaching/creating this same design system on claude.ai/design or other cross-surface consumers (e.g. Claude Cowork on web). Use when the user wants \"design system\", \"design tokens\", \"fleet CSS\", to add a new site's accent, to check whether a site matches the design system, to sync the deck with the kit, or to attach/export this design system to a claude.ai/design project (Prototype/Slides/Document/ Wireframe/Animation). Do NOT use for editing workers/_shared/kit/*.ts itself (a fleet-wide hash-relock event — that's cwc-deploy/cwc-engineering territory), the Hardware Buddy 8-token character-pack system (sibling design-playbook skill), or the architecture SVG map (sibling dependency-graph-sync skill).",
      "summary": "Owns the real, deployed CSS design system shared by 66 subagent*.com Workers (workers/_shared/kit/css.ts + shell.ts), its live showcase (subagentcowork.com/design-system), its per-technique adoption evidence (subagentdevices.com), a typed/tested drift check against subagentcoworkers.com/deck, and...",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/fleet-design-system/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_fleet_design_system"
    },
    {
      "id": "skl_ink",
      "name": "ink",
      "plugin": "cwc-design",
      "description": "Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render/ink, building terminal UIs from JSON, creating terminal component catalogs, or rendering AI-generated specs in the terminal.",
      "summary": "Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/ink/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_ink"
    },
    {
      "id": "skl_liquid_icon",
      "name": "liquid-icon",
      "plugin": "cwc-design",
      "description": "Generate a macOS/iOS app icon in the fleet's Liquid-Glass / entity-graph brand style and compose it into an .icns wired into an .app bundle. Two stages: (1) generate the icon ART with the higgsfield-generate skill (the `higgsfield` CLI — free-tier models flux_2 / grok_image / flux_kontext work; gpt_image_2 / nano_banana need a paid plan), brand = black ground + cyan #51c4ff + green #7bd88f + a glowing node-link graph; (2) build the .icns deterministically via `scripts/build-icns.sh` (sips + iconutil + PlistBuddy — macOS built-ins, no deps) and set CFBundleIconFile. Use when the user asks for an app icon, a Liquid-Glass icon, a logo for a Swift app, or to (re)brand a .app's Dock icon. Trigger on \"app icon\", \"liquid glass icon\", \"logo for the app\", \"brand the app icon\", \"Icon Composer\". Do NOT use for in-app SwiftUI glass styling (that's the app's own `.glassEffect` code) or for non-icon marketing art (use higgsfield-generate直接).",
      "summary": "Generate a macOS/iOS app icon in the fleet's Liquid-Glass / entity-graph brand style and compose it into an .icns wired into an .app bundle.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/liquid-icon/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_liquid_icon"
    },
    {
      "id": "skl_preview_verify_deploy",
      "name": "preview-verify-deploy",
      "plugin": "cwc-design",
      "description": "Verify a Cloudflare Worker change in a real browser before shipping it — start the Worker via this repo's committed `.claude/launch.json` (named, persistent `wrangler dev` configs, one per Worker; not a temporary scratchpad config), reload, check console/network for errors, assert DOM state via `preview_eval` (screenshots are known-unreliable in this harness — they render solid black after any non-zero scroll, a tool-level rendering bug independently confirmed twice this repo's history), then `wrangler deploy` via Desktop Commander and curl-verify the live result. Use this any time a change touches something a Worker actually renders/serves (HTML, CSS, client-side script, an API route) — not for backend-only or non-previewable changes. Sibling to `plugins/cwc-engineering/skills/preview-layout-verify` (layout-measurement invariants only, clipping/collision/overflow) — that skill's invariant sweep is a good deep-dive once a page loads; this skill owns the outer loop (start → verify → deploy → confirm) and the two compose: run this skill's loop, and if the change is layout-shaped, drop into that skill's invariant sweep during the \"verify\" step.",
      "summary": "Verify a Cloudflare Worker change in a real browser before shipping it — start the Worker via this repo's committed `.claude/launch.json` (named, persistent `wrangler dev` configs, one per Worker; not a temporary scratchpad config), reload, check console/network for errors, assert DOM state via `...",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/preview-verify-deploy/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_preview_verify_deploy"
    },
    {
      "id": "skl_prototype",
      "name": "prototype",
      "plugin": "cwc-design",
      "description": "Produce the \"Prototype\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation): a high-fidelity, interactive artifact, plus the UX microcopy that makes it feel real (CTAs, error messages, empty states, confirmation dialogs). Use when the user wants a working interactive mockup, needs copy for a specific interface moment, or wants to see the fleet design system's own live interactive reference (subagentcowork.com/design-system's accent picker). Do NOT use for a static layout without interactivity (sibling `wireframe` skill) or for a written report (sibling `document` skill).",
      "summary": "Produce the \"Prototype\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation): a high-fidelity, interactive artifact, plus the UX microcopy that makes it feel real (CTAs, error messages, empty states, confirmation dialogs).",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/prototype/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_prototype"
    },
    {
      "id": "skl_session_record_html",
      "name": "session-record-html",
      "plugin": "cwc-design",
      "description": "Scaffold a standalone HTML session-record file, in the family's shared design tokens, so any coworker or agent can leave a durable, visual record of what it completed in a session — for human recall, not machine consumption. Use when the user says \"record this session\", \"write up what we did\", \"create a session record\", \"document this session as an artifact\", or asks for a visual summary of completed work to look back on later. Do NOT use for the live coworkers-console dashboard itself (index.html + serve.py — a different, API-backed artifact), and do NOT fabricate content — every fact in the record must be something the session actually verified, not a plausible-sounding summary.",
      "summary": "Scaffold a standalone HTML session-record file, in the family's shared design tokens, so any coworker or agent can leave a durable, visual record of what it completed in a session — for human recall, not machine consumption.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/session-record-html/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_session_record_html"
    },
    {
      "id": "skl_slides",
      "name": "slides",
      "plugin": "cwc-design",
      "description": "Produce the \"Slides\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation), grounded in the one real slide deck already in this repo family — subagentcoworkers.com/deck, a real 12-slide investor deck with a semantic per-slide accent system. Use when the user wants to build a pitch/investor deck, a slide-based presentation, or wants a new deck to follow the same real conventions (eyebrow labels, per-slide accent, slide-number counter, keyboard navigation). Do NOT use for a single static document (sibling `document` skill) or for the deck's own token block maintenance (that's `fleet-design-system`'s drift-check territory — see below).",
      "summary": "Produce the \"Slides\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation), grounded in the one real slide deck already in this repo family — subagentcoworkers.com/deck, a real 12-slide investor deck with a semantic per-slide accent system.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/slides/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_slides"
    },
    {
      "id": "skl_tdd_red_green_refactor",
      "name": "tdd-red-green-refactor",
      "plugin": "cwc-design",
      "description": "Enforces a disciplined Red-Green-Refactor (TDD) workflow in TypeScript/Node.js. Use this whenever creating new features, fixing bugs, or migrating logic to ensure high-quality, verifiable implementations.",
      "summary": "Enforces a disciplined Red-Green-Refactor (TDD) workflow in TypeScript/Node.js.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/tdd/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_tdd_red_green_refactor"
    },
    {
      "id": "skl_typed_service_contracts",
      "name": "typed-service-contracts",
      "plugin": "cwc-design",
      "description": "Architecture standard for building robust, type-safe TypeScript services using the \"Spec and Handler\" pattern. Use when building CLIs, libraries, or complex business logic.",
      "summary": "Architecture standard for building robust, type-safe TypeScript services using the \"Spec and Handler\" pattern.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/typed-service-contracts/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_typed_service_contracts"
    },
    {
      "id": "skl_wireframe",
      "name": "wireframe",
      "plugin": "cwc-design",
      "description": "Produce the \"Wireframe\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation): layout + component structure before visual polish. Three modes — audit an existing layout for token/naming consistency, document a component's variants/states/props, or extend the system with a new pattern — plus a full developer-handoff spec (measurements, states, breakpoints, edge cases) once a wireframe is ready to leave design. Use when the user wants to wireframe a screen, audit a design system for consistency, document a component, design a new pattern, or generate a handoff spec. Do NOT use for high-fidelity interactive mockups (sibling `prototype` skill) or for editing `workers/_shared/kit/*.ts` itself (sibling `fleet-design-system` skill's territory).",
      "summary": "Produce the \"Wireframe\" project shape (one of claude.ai/design's 5 canonical shapes — Prototype/Slides/Document/Wireframe/Animation): layout + component structure before visual polish.",
      "gated": 0,
      "source_path": "plugins/cwc-design/skills/wireframe/SKILL.md",
      "created_at": "2026-07-10 18:13:13",
      "cite_as": "https://subagentskills.com/api/skills/skl_wireframe"
    }
  ]
}