Unified team skill for interactive component crafting. Vanilla JS + CSS interactive components with zero dependencies. Research -> interaction design -> build -> a11y test. Uses team-worker agent architecture with roles/ for domain logic. Coordinator orchestrates pipeline with GC loops and sync points. Triggers on "team interactive craft", "interactive component".
72%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
Low
Low-risk findings worth noting
Fix and improve this skill with Tessl
tessl review fix ./.codex/skills/team-interactive-craft/SKILL.mdSystematic interactive component pipeline: research -> interaction design -> build -> a11y test. Built on team-worker agent architecture -- all worker roles share a single agent definition with role-specific Phase 2-4 loaded from roles/<role>/role.md.
Skill(skill="team-interactive-craft", args="task description")
|
SKILL.md (this file) = Router
|
+--------------+--------------+
| |
no --role flag --role <name>
| |
Coordinator Worker
roles/coordinator/role.md roles/<name>/role.md
|
+-- analyze -> dispatch -> spawn workers -> STOP
|
+-------+-------+-------+-------+
v v v v
[team-worker agents, each loads roles/<role>/role.md]
researcher interaction-designer builder a11y-tester| Role | Path | Prefix | Inner Loop |
|---|---|---|---|
| coordinator | roles/coordinator/role.md | -- | -- |
| researcher | roles/researcher/role.md | RESEARCH-* | false |
| interaction-designer | roles/interaction-designer/role.md | INTERACT-* | false |
| builder | roles/builder/role.md | BUILD-* | true |
| a11y-tester | roles/a11y-tester/role.md | A11Y-* | false |
Parse $ARGUMENTS:
--role <name> -> Read roles/<name>/role.md, execute Phase 2-4--role -> roles/coordinator/role.md, execute entry routerCoordinator is a PURE ORCHESTRATOR. It coordinates, it does NOT do.
Before calling ANY tool, apply this check:
| Tool Call | Verdict | Reason |
|---|---|---|
spawn_agent, wait_agent, close_agent, send_message, followup_task | ALLOWED | Orchestration |
list_agents | ALLOWED | Agent health check |
request_user_input | ALLOWED | User interaction |
mcp__ccw-tools__team_msg | ALLOWED | Message bus |
Read/Write on .workflow/.team/ files | ALLOWED | Session state |
Read on roles/, commands/, specs/ | ALLOWED | Loading own instructions |
Read/Grep/Glob on project source code | BLOCKED | Delegate to worker |
Edit on any file outside .workflow/ | BLOCKED | Delegate to worker |
Bash("ccw cli ...") | BLOCKED | Only workers call CLI |
Bash running build/test/lint commands | BLOCKED | Delegate to worker |
If a tool call is BLOCKED: STOP. Create a task, spawn a worker.
No exceptions for "simple" tasks. Even a single-file read-and-report MUST go through spawn_agent.
IC.workflow/.team/IC-<date>-<slug>/ccw cli --mode analysis (read-only), ccw cli --mode write (modifications)mcp__ccw-tools__team_msg(session_id=<session-id>, ...)Coordinator spawns workers using this template:
spawn_agent({
agent_type: "team_worker",
task_name: "<task-id>",
fork_turns: "none",
message: `## Role Assignment
role: <role>
role_spec: <skill_root>/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
requirement: <task-description>
inner_loop: <true|false>
Read role_spec file (<skill_root>/roles/<role>/role.md) to load Phase 2-4 domain instructions.
## Task Context
task_id: <task-id>
title: <task-title>
description: <task-description>
pipeline_phase: <pipeline-phase>
## Upstream Context
<prev_context>`
})After spawning, use wait_agent({ timeout_ms: 1800000 }) to collect results. If result.timed_out, send STATUS_CHECK via followup_task (wait 3 min), then FINALIZE with interrupt (wait 3 min), then mark timed_out and close agents. Use close_agent({ target }) each worker.
Interactive craft is a technical pipeline where research informs interaction design, which guides implementation. Builder needs creative problem-solving for vanilla JS constraints, a11y-tester needs thorough analysis.
| Role | reasoning_effort | Rationale |
|---|---|---|
| researcher | high | Deep analysis of existing interactive patterns and browser APIs |
| interaction-designer | high | Creative state machine and event flow design |
| builder | high | Complex vanilla JS implementation with GPU animation and touch handling |
| a11y-tester | high | Thorough accessibility audit must catch all keyboard/screen reader issues |
Researcher findings must reach interaction-designer via coordinator's upstream context:
// After RESEARCH-001 completes, coordinator sends findings to interaction-designer
spawn_agent({
agent_type: "team_worker",
task_name: "INTERACT-001",
fork_turns: "none",
message: `## Upstream Context
Research findings: <session>/research/interaction-inventory.json
Browser API audit: <session>/research/browser-api-audit.json
Pattern reference: <session>/research/pattern-reference.json`
})| Command | Action |
|---|---|
check / status | View execution status graph |
resume / continue | Advance to next step |
.workflow/.team/IC-<date>-<slug>/
+-- .msg/
| +-- messages.jsonl # Team message bus
| +-- meta.json # Pipeline config + GC state
+-- research/ # Researcher output
| +-- interaction-inventory.json
| +-- browser-api-audit.json
| +-- pattern-reference.json
+-- interaction/ # Interaction designer output
| +-- blueprints/
| +-- {component-name}.md
+-- build/ # Builder output
| +-- components/
| +-- {name}.js
| +-- {name}.css
+-- a11y/ # A11y tester output
| +-- a11y-audit-{NNN}.md
+-- wisdom/ # Cross-task knowledge| Intent | API | Example |
|---|---|---|
| Queue supplementary info (don't interrupt) | send_message | Send research findings to running interaction-designer |
| Assign build from reviewed blueprints | followup_task | Assign BUILD task after blueprint review |
| Check running agents | list_agents | Verify agent health during resume |
Use list_agents({}) in handleResume and handleComplete:
// Reconcile session state with actual running agents
const running = list_agents({})
// Compare with tasks.json active_agents
// Reset orphaned tasks (in_progress but agent gone) to pendingWorkers are spawned with task_name: "<task-id>" enabling direct addressing:
send_message({ target: "INTERACT-001", message: "..." }) -- send research findings to interaction-designerfollowup_task({ target: "BUILD-001", message: "..." }) -- assign implementation from interaction blueprintclose_agent({ target: "A11Y-001" }) -- cleanup after a11y audit| Scenario | Resolution |
|---|---|
| Unknown command | Error with available command list |
| Role not found | Error with role registry |
| Session corruption | Attempt recovery, fallback to manual |
| Fast-advance conflict | Coordinator reconciles on next callback |
| Completion action fails | Default to Keep Active |
| GC loop stuck > 2 rounds | Escalate to user: accept / retry / terminate |
catlog22/Claude-Code-Workflow
07491b0
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.