菜单
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.