shape
From the author
Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still ambiguous. Invoke when the user asks for shape on their UI, or mentions 'shape' alongside design / UI / frontend work.
Install
npx skills add educlopez/ui-craft --skill shape -a claude-code
Installs to .claude/skills/shape/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
- Contains hidden text (invisible characters, long comments or encoded blobs)Medium
Why 78
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- unhappyeduclopez/ui-craftState-first design pass — inventories and implements all non-happy states (loading, empty, error, partial, conflict, offline) before the happy path, and refactors impossible boolean state to proper state machines. Use when starting a new screen, reviewing an existing one for edge-case gaps, or when the user says "handle the error state" / "add loading states" / "what happens when data is missing". Invoke when the user asks for unhappy on their UI, or mentions 'unhappy' alongside design / UI / frontend work.Design★ 399
- wireframingseb1n/awesome-ai-agent-skillsCreate text-based wireframes at low, mid, and high fidelity with component inventories, interaction annotations, and responsive breakpoint specifications. Use when the user requests wireframing or provides relevant inputs for this workflow.Planning★ 229
- design-firstrohitg00/skillkitGuides the creation of technical design documents before writing code, producing architecture diagrams, data models, API interface definitions, implementation plans, and multi-option trade-off analyses. Use when the user asks to plan a feature, architect a system, design an API, explore implementation approaches, or requests a technical design or spec before coding — especially for complex features involving multiple components, ambiguous requirements, or significant architectural changes.Design★ 1.6K
- drafttonone-ai/tononeUX designer — user flows, information architecture, wireframes, and interaction design. Use when asked to "design a user flow", "map the IA", "wireframe this screen", or "review UX before shipping".Design★ 76
- frontendOyadotAI/oya-browserUse when building or changing anything in the frontend: a page, a component, a layout, styling, copy on screen. Produces distinctive, production-grade UI that fits this project's existing design, covers every state, is accessible, and is checked in a browser before it is called done.Design★ 351
- prism-uitonone-ai/tononeImplement a complete UI screen or feature from a Form visual spec. Use when asked to "build a page", "implement this screen", "build the frontend for this feature", or "create this UI".Design★ 76
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in