Menu
Visual design thinking for production-ready UI. Use when building new pages, components, or styling any user-facing interface.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
