菜单
Visual design thinking for production-ready UI. Use when building new pages, components, or styling any user-facing interface.
用 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.
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.
| name | design-excellence |
| description | Visual design thinking for production-ready UI. Use when building new pages, components, or styling any user-facing interface. |
| user-invocable | false |
Before writing CSS or choosing colors, decide on a clear aesthetic direction and commit to it.
Design for 375px, then enhance for 768px and 1440px. Use CSS Grid/Flexbox for fluid layouts. Cap content width at 1200-1440px.
Every interface should feel intentionally designed for its specific context.
