メニュー
Standard agent workflow pattern: explore→plan→code→verify→commit. Use when starting any coding task, feature implementation, or bug fix. Triggers: "workflow", "implement", "feature", "fix", "task".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Playwright E2E testing and responsive screenshot testing across 12 viewports. Use when writing E2E tests, taking screenshots, or verifying layouts. Triggers: "playwright", "e2e", "responsive", "screenshot", "viewport", "mobile", "tablet", "desktop".
Comprehensive testing strategies for web UI — unit, integration, E2E, property-based, accessibility, visual regression, and performance testing with Vitest, Playwright, fast-check, and axe-core. Use when writing tests, debugging failures, improving coverage, or setting up test infrastructure. Triggers: "test", "vitest", "unit", "integration", "e2e", "coverage", "mock", "snapshot", "axe", "playwright", "fast-check", "tdd".
Modern CSS features: anchor positioning, container queries, native nesting, @scope, view transitions, popover API, @starting-style, color-mix. Use when building modern UI with cutting-edge CSS. Triggers: "css", "modern", "anchor", "container", "nesting", "popover", "transition".
Fan-out/fan-in patterns for parallel agent work. Writer/reviewer pattern, conflict resolution, quality verification across parallel sessions. Use when working on multi-file changes or large migrations. Triggers: "parallel", "fan-out", "migration", "batch", "multi-file".
Browser debugging workflows for Chrome DevTools, Firefox DevTools, and AI agent debugging. Use when debugging UI issues, inspecting elements, analyzing performance, or troubleshooting rendering problems in the browser. Triggers: "debug", "devtools", "inspect", "console", "network", "performance", "memory", "render", "layout", "css issue", "js error".
WCAG 2.2 AA compliance, axe-core auditing, ARIA patterns, keyboard navigation. Use when auditing, writing, or reviewing web UI code for accessibility. Triggers: "accessibility", "a11y", "aria", "wcag", "axe", "screen reader".
| name | agent-workflow |
| description | Standard agent workflow pattern: explore→plan→code→verify→commit. Use when starting any coding task, feature implementation, or bug fix. Triggers: "workflow", "implement", "feature", "fix", "task". |
| category | agent-patterns |
The recommended workflow for all AI agents working on this codebase. Follows a five-phase pattern that ensures quality and verification.
Read files, understand patterns, identify affected modules.
# List project structure
ls -la src/ tests/ scripts/
# Search for patterns
grep -r "function" src/ --include='*.js'
# Read key files
cat src/utils/format.js
Key: Use subagents for investigation to keep main context clean.
Create a detailed implementation plan. Reference specific files, line numbers, and existing patterns.
## Implementation Plan
1. Modify `src/components/Button.js` (lines 45-60)
2. Add test in `tests/unit/button.test.js`
3. Update `DESIGN.md` with new token
4. Run `bash scripts/quality-gate.sh`
Implement changes adhering to conventions. Write tests first where applicable.
# Run tests first
bun vitest run
# Implement changes
# ... code ...
# Run tests again
bun vitest run
Run quality gates. Fix any failures before proceeding.
bash scripts/quality-gate.sh
bash scripts/roast-scorer.sh
Use conventional commit format. Include test results in commit message.
git add .
git commit -m "feat: add new Button component with variants"
For small, well-scoped tasks (typo fixes, variable renames, single-line changes), skip the plan phase and implement directly.
| Strategy | Example | Signal |
|---|---|---|
| Tests | bun vitest run | Pass/fail |
| Build | bun run build | Exit code |
| Lint | bash scripts/quality-gate.sh | Structured output |
| Screenshot | Visual comparison | Diff analysis |