shape

Featured

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.

Web & Frontend 277 stars 15 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
81
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. --> **Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below. Shape the UI for `$ARGUMENTS` before writing code. Load the `ui-craft` skill. This command produces a **shape artifact**, not JSX. The point is to force low-fi thinking — content inventory, layout regions, state coverage, open questions — before any component is written. Skipping this step is how generic AI UIs get built: straight to hi-fi, no discovery, every screen looks the same. **Step 1 — Clarify (3-5 questions).** Ask the user before shaping. Don't guess. Minimum questions: - What's the **primary user action** on this screen? (One verb, one object.) - What data is **visible by default** vs **hidden behind a click or tab**? - What does **success** look like — a state, a redirect, a toast? - Who's the **primary user** — first-timer, power user, mobile-first? **Step 2 — Content inventory.** Bullet list of every piece of content that will appear. Annotate each by priority: - **P0** — must be visible on first paint. Cut it and the screen fails. - **P1** — one click away (tab, accordion, drawer). - **P2** — settings-level; rarely accessed. Example: ``` - P0 Headline (one line, the value pr...

Details

Author
educlopez
Repository
educlopez/ui-craft
Created
5 months ago
Last Updated
yesterday
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

shape

Plan the UX and UI for a feature before writing code. Run a structured discovery interview, then produce a design brief (.design-context.md) that guides implementation. Establishes design direction, constraints, and strategy before any code is written. Triggers on plan the design, design brief, shape the UX, before we build, design discovery.

41 Updated yesterday
tdimino
Web & Frontend Listed

devrites-ux-shape

Shape UX/UI direction, states, and interactions before code. Use for screens, forms, dashboards, or settings; not for implementation or polish.

1 Updated 4 days ago
ViktorsBaikers
AI & Automation Listed

shapeup

Use this skill for any Shape Up workflow before writing code. Triggers on: "shape this feature", "frame this problem", "breadboard this", "map affordances", "write a framing doc", "write a kickoff doc", "turn this transcript into a framing document", "turn this transcript into a kickoff document", "what should we build", "explore solutions", "is this shaped enough to build", "slice this into scopes", "fit check", "wiring diagram". Also triggers when user says "before we build...", "I want to think through...", "let's shape this", or provides a raw transcript and wants it structured. DEFAULT: if no sub-command given, run /shapeup full — ask clarifying questions at each gate, keep solutions as simple as possible, never touch parts that already work. Sub-commands: /shapeup full | /shapeup shaping | /shapeup spike | /shapeup breadboarding | /shapeup framing-doc | /shapeup kickoff-doc | /shapeup breadboard-reflection

2 Updated today
nguyenvanphituoc