メニュー
TypeScript React frontend workflow for components, state, routing, typecheck, tests, builds, and browser smoke evidence.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | ts-react-frontend |
| description | TypeScript React frontend workflow for components, state, routing, typecheck, tests, builds, and browser smoke evidence. |
Use this skill when changing React components, hooks, routes, client state, styling, build configuration, or frontend tests. For user-visible changes, typecheck, build, and unit tests are not enough; include real-browser smoke or screenshot evidence before claiming acceptance.
Harness/workflows/ts-react-frontend.mdHarness/PROGRESS.md and current task tasks/<id>/PLAN.mddata-testid hooks for critical inputs, buttons, filters, rows, empty/error/loading states, and other targetable UI states.tasks/<id>/PLAN.md when tracking a plan item.Return changed files, UI behavior summary, commands run, browser or test evidence, and unresolved risks. Include selectors added or verified for CDP/Playwright/manual checks.
Update Harness/tasks/<task-id>/PLAN.md only when executing a tracked task or recording required validation evidence.
Use Harness/specs/runtime/dispatch.md when independent frontend tasks can run in parallel, such as components, tests, and browser checks.
Built-in browser automation and E2E verification workflow. Use for Claude /wf-browser, Codex $wf-browser or /skills wf-browser, Browser Use, Playwright, Chrome DevTools/CDP, screenshots, forms, UI verification, and browser-visible acceptance.
Codex compatibility: use $wf-help or /skills wf-help in Codex to show the Harness WF command table. Claude Code and OpenCode use the direct /wf-help command.
Use for /wf-max in Claude Code, $wf-max or /skills wf-max in Codex. WF-MAX is explicit only — the user must type /wf-max, $wf-max, or /skills wf-max.
Use when work needs bounded subagent coordination, parallel read-only exploration, independent review gates, broad context partitioning, or controlled handoffs.
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
Source-backed CLI invocation guide for Claude Code, Codex, and OpenCode automation. Use when invoking peer CLIs, writing batch tests, collecting cache telemetry, debugging command-line flags, or documenting cross-runtime agent usage for Harness workflows.