shape

Name: shape
Author: educlopez

206stars8forks

How to install shape?

educlopez/ui-craft/shape

$npx -y skills add educlopez/ui-craft --skill shape

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Shape the UI for the target the user described before writing code. Load the `ui-craft` skill.
6
7	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.
8
9	Step 1 — Clarify (3-5 questions). Ask the user before shaping. Don't guess. Minimum questions:
10
11	- What's the primary user action on this screen? (One verb, one object.)
12	- What data is visible by default vs hidden behind a click or tab?
13	- What does success look like — a state, a redirect, a toast?
14	- Who's the primary user — first-timer, power user, mobile-first?
15
16	Step 2 — Content inventory. Bullet list of every piece of content that will appear. Annotate each by priority:
17
18	- P0 — must be visible on first paint. Cut it and the screen fails.
19	- P1 — one click away (tab, accordion, drawer).
20	- P2 — settings-level; rarely accessed.
21
22	Example:
23	```
24	- P0 Headline (one line, the value prop)
25	- P0 Primary CTA
26	- P0 Hero chart / metric
27	- P1 Secondary nav tabs
28	- P1 Recent activity list
29	- P2 Export / integrations menu
30	```
31
32	Step 3 — ASCII layout. Low-fi sketch showing regions. No specific copy, no colors, no font sizes. One desktop variant + one mobile variant. Use box characters:
33
34	```
35	Desktop
36	┌──────────────────────────────────────────────┐
37	│ [logo] [nav] [user] │
38	├──────────────────────────────────────────────┤
39	│ ┌────────────────┐ ┌───────────────────┐ │
40	│ │ Headline + sub │ │ │ │
41	│ │ │ │ Hero visual │ │
42	│ │ [Primary CTA] │ │ │ │
43	│ └────────────────┘ └───────────────────┘ │
44	│ │
45	│ ── Social proof row ── │
46	│ │
47	│ ┌─── Feature 1 ───┐ ┌─── Feature 2 ───┐ │
48	│ └─────────────────┘ └─────────────────┘ │
49	└──────────────────────────────────────────────┘
50
51	Mobile
52	┌──────────────────┐
53	│ [logo] [☰] │
54	├──────────────────┤
55	│ Headline + sub │
56	│ │
57	│ [Primary CTA] │
58	│ │
59	│ ┌── Hero ──┐ │
60	│ └──────────┘ │
61	│ │
62	│ Social proof │
63	│ │
64	│ Feature 1 │
65	│ Feature 2 │
66	└──────────────────┘
67	```
68
69	Asymmetry is fine and often better — don't force center-everything.
70
71	Step 4 — State list. Enumerate the states this screen must handle. Point at [references/state-design.md](../skills/ui-craft/references/state-design.md) for the contracts.
72
73	- idle — default state, data present.
74	- loading — skeletons that mirror final layout, 200ms delay before showing.
75	- empty — first-run or no data; doubles as onboarding.
76	- error — specific cause + recovery action + support ID.
77	- partial — some data loaded, some failed (e.g., one widget erred).
78	- conflict — user-edit collision (rare but load-bearing on collaborative surfaces).
79	- offline — queue writes, reconcile on reconnect.
80	- success — confirmation state after the primary action completes.
81
82	Mark each as required / optional (why) / N/A.
83
84	Step 5 — Open questions. Do NOT start coding until these are answered. Default set:
85
86	- Accent color — brand-defined, or to be chosen? (See Discovery in `SKILL.md`.)
87	- Typography — existing tokens, or new system? (Reference `typography.md`.)
88	- Responsive breakpoints — what's the minimum supported width?
89	- Stack — CSS only, or Motion / GSAP / Three.js? (Only load `stack.md` if the user opts in.)
90	- Data source — real API ready, or mock for shape?
91	- Keyboard / a11y requirements — anything beyond the baseline from `accessibility.md`?
92
93	Knob awareness.
94
95	- At `CRAFT_LEVEL ≥ 7`, add two more sections:
96	- Motion shape — which elements enter, in what order, with what stagger. Pick from the duration scale in `references/motion.md`.
97	- Typography hierarchy plan — display / headline / body / label sizes and weights, before code.
98	- At `CRAFT_LEVEL ≤ 4`, strip Step 4 to `idle / loading / error` only. Skip the motion shape.
99
100	**Step 6 — Offer to persist to `.ui-

educlopezPublisher · 32 listings

Preview

educlopez/ui-craft

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirr

**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

Shape the UI for the target the user described 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 —

Repoeduclopez/ui-craft

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars206

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

shape

206stars8forks

View on GitHub

How to install shape?

educlopez/ui-craft/shape

$npx -y skills add educlopez/ui-craft --skill shape

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Shape the UI for the target the user described before writing code. Load the `ui-craft` skill.
6
7	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.
8
9	Step 1 — Clarify (3-5 questions). Ask the user before shaping. Don't guess. Minimum questions:
10
11	- What's the primary user action on this screen? (One verb, one object.)
12	- What data is visible by default vs hidden behind a click or tab?
13	- What does success look like — a state, a redirect, a toast?
14	- Who's the primary user — first-timer, power user, mobile-first?
15
16	Step 2 — Content inventory. Bullet list of every piece of content that will appear. Annotate each by priority:
17
18	- P0 — must be visible on first paint. Cut it and the screen fails.
19	- P1 — one click away (tab, accordion, drawer).
20	- P2 — settings-level; rarely accessed.
21
22	Example:
23	```
24	- P0 Headline (one line, the value prop)
25	- P0 Primary CTA
26	- P0 Hero chart / metric
27	- P1 Secondary nav tabs
28	- P1 Recent activity list
29	- P2 Export / integrations menu
30	```
31
32	Step 3 — ASCII layout. Low-fi sketch showing regions. No specific copy, no colors, no font sizes. One desktop variant + one mobile variant. Use box characters:
33
34	```
35	Desktop
36	┌──────────────────────────────────────────────┐
37	│ [logo] [nav] [user] │
38	├──────────────────────────────────────────────┤
39	│ ┌────────────────┐ ┌───────────────────┐ │
40	│ │ Headline + sub │ │ │ │
41	│ │ │ │ Hero visual │ │
42	│ │ [Primary CTA] │ │ │ │
43	│ └────────────────┘ └───────────────────┘ │
44	│ │
45	│ ── Social proof row ── │
46	│ │
47	│ ┌─── Feature 1 ───┐ ┌─── Feature 2 ───┐ │
48	│ └─────────────────┘ └─────────────────┘ │
49	└──────────────────────────────────────────────┘
50
51	Mobile
52	┌──────────────────┐
53	│ [logo] [☰] │
54	├──────────────────┤
55	│ Headline + sub │
56	│ │
57	│ [Primary CTA] │
58	│ │
59	│ ┌── Hero ──┐ │
60	│ └──────────┘ │
61	│ │
62	│ Social proof │
63	│ │
64	│ Feature 1 │
65	│ Feature 2 │
66	└──────────────────┘
67	```
68
69	Asymmetry is fine and often better — don't force center-everything.
70
71	Step 4 — State list. Enumerate the states this screen must handle. Point at [references/state-design.md](../skills/ui-craft/references/state-design.md) for the contracts.
72
73	- idle — default state, data present.
74	- loading — skeletons that mirror final layout, 200ms delay before showing.
75	- empty — first-run or no data; doubles as onboarding.
76	- error — specific cause + recovery action + support ID.
77	- partial — some data loaded, some failed (e.g., one widget erred).
78	- conflict — user-edit collision (rare but load-bearing on collaborative surfaces).
79	- offline — queue writes, reconcile on reconnect.
80	- success — confirmation state after the primary action completes.
81
82	Mark each as required / optional (why) / N/A.
83
84	Step 5 — Open questions. Do NOT start coding until these are answered. Default set:
85
86	- Accent color — brand-defined, or to be chosen? (See Discovery in `SKILL.md`.)
87	- Typography — existing tokens, or new system? (Reference `typography.md`.)
88	- Responsive breakpoints — what's the minimum supported width?
89	- Stack — CSS only, or Motion / GSAP / Three.js? (Only load `stack.md` if the user opts in.)
90	- Data source — real API ready, or mock for shape?
91	- Keyboard / a11y requirements — anything beyond the baseline from `accessibility.md`?
92
93	Knob awareness.
94
95	- At `CRAFT_LEVEL ≥ 7`, add two more sections:
96	- Motion shape — which elements enter, in what order, with what stagger. Pick from the duration scale in `references/motion.md`.
97	- Typography hierarchy plan — display / headline / body / label sizes and weights, before code.
98	- At `CRAFT_LEVEL ≤ 4`, strip Step 4 to `idle / loading / error` only. Skip the motion shape.
99
100	**Step 6 — Offer to persist to `.ui-

educlopezPublisher · 32 listings

Preview

educlopez/ui-craft

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirr

**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

Shape the UI for the target the user described 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 —

Repoeduclopez/ui-craft

LicenseMIT

TypeSkills

CategoryDesign

UpdatedJul 2026

Repo stars206

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type