メニュー
Read-before-write discipline. Search for patterns and understand existing code before modifying files. Use when editing existing files, adding features to an existing codebase, or creating new components.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Batch project dependency changes and install once. Use when starting a new feature, scaffolding a project, or when any npm/pnpm package installation is needed.
Step-by-step task tracking via the TODO_WRITE marker. Use when executing any multi-step task, follow-up request, or build workflow.
Pre-planning procedure for new tasks. Visualize end state, identify structure, and anticipate problems before coding. Use when starting a new feature, scaffolding a project, or planning a multi-file change.
Fix-verify iteration loop for dependency, build, and runtime errors. Use when installing packages, running dev servers, fixing build errors, or verifying that code compiles and runs.
Concise output formatting for the Hatchway platform UI. Use when generating any response during task execution.
Visual design thinking for production-ready UI. Use when building new pages, components, or styling any user-facing interface.
| name | context-awareness |
| description | Read-before-write discipline. Search for patterns and understand existing code before modifying files. Use when editing existing files, adding features to an existing codebase, or creating new components. |
| user-invocable | false |
Understand the codebase before changing it. Read first, write second.
Task: "Add a user avatar component"
Before creating UserAvatar.tsx:
Grep: "Avatar" → find existing avatar usage
Grep: "component" in src/components/ → see naming pattern (PascalCase folders? flat files?)
Read: src/components/Button.tsx → see how components are structured (props interface, export style)
Read: src/lib/utils.ts → check for existing image/URL helpers
Then create UserAvatar.tsx matching the patterns found.