copy-example

Name: copy-example
Author: bluzir

96stars10forks

How to install copy-example?

bluzir/claude-code-design/copy-example

$npx -y skills add bluzir/claude-code-design --skill copy-example

Installs into the current project.

Summary

Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.

Files · 1

View on GitHub

SKILL.md

1	# Copy Example
2
3	Build a working reference artifact in `examples/<kind>-<timestamp>/` using a realistic dummy brief, so the user can see the format, then copy-paste or edit to kickstart their own work.
4
5	Unlike a static gallery (files pre-authored), this skill runs the actual workflow skill on a curated brief — the output is always up-to-date with current starters and conventions.
6
7	## Steps
8
9	1. Parse `$0` (kind): one of `deck`, `prototype`, `wireframe`, `animation`, `design-system`. If omitted or invalid → show supported kinds and ask.
10
11	2. Pick a canned brief from the matrix below. Tell the user which one you're using so they can change it.
12
13	3. Route to the matching workflow skill bypassing Phase 0/1 (context pre-flight and ambiguity gate) — we're generating a demo, not gathering requirements. Pass the dummy brief plus these overrides:
14	- Use `frontend-design` for aesthetic (no brand context)
15	- Write under `examples/<kind>-<YYYYMMDD>/` instead of `artifacts/`
16	- Skip register-asset (demos shouldn't clutter `assets.html`)
17
18	4. After the workflow skill completes (including `/done` on the output), report:
19	- Path to the generated artifact
20	- URL the user can open (file:// or http://127.0.0.1:4567/...)
21	- Suggestion to `cp -r examples/<kind>-<ts>/ artifacts/my-<kind>/` and then iterate via the regular workflow skill
22
23	## Canned briefs
24
25	\| Kind \| Brief \|
26	\|---\|---\|
27	\| `deck` \| "5-slide internal pitch deck: 'Why we should ship feature X in Q2'. Audience: engineering leadership. Tone: data-driven, concise." \|
28	\| `prototype` \| "iOS food-delivery app prototype, 3 screens: restaurant list, dish detail, cart. Include a slide transition between list and detail." \|
29	\| `wireframe` \| "Landing page for a developer tool. 4 variants on the canvas — hero-first, feature-grid-first, terminal-demo-first, testimonials-first. Greyscale." \|
30	\| `animation` \| "5-second product intro reel — logo fades in, tagline slides up, accent color wash transitions to final brand color. Use Stage/Sprite/interpolate." \|
31	\| `design-system` \| "Extract a tokens-only design system from a dummy fintech brand: deep navy primary, gold accent, Söhne-esque sans, 8px spacing grid. Render full style guide." \|
32
33	## Important
34
35	- Don't write to `artifacts/` — examples belong in `examples/` to avoid polluting the user's real work
36	- Don't register as assets — examples are reference material, not deliverables
37	- Tell the user explicitly this is a generated example and invite them to iterate on a copy
38	- Regenerate fresh each time the skill is called — timestamps in the folder name keep old ones around if the user wants to compare

People who liked this also viewed

6 picks

Type

copy-example

96stars10forks

View on GitHub

How to install copy-example?

bluzir/claude-code-design/copy-example

$npx -y skills add bluzir/claude-code-design --skill copy-example

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Copy Example
2
3	Build a working reference artifact in `examples/<kind>-<timestamp>/` using a realistic dummy brief, so the user can see the format, then copy-paste or edit to kickstart their own work.
4
5	Unlike a static gallery (files pre-authored), this skill runs the actual workflow skill on a curated brief — the output is always up-to-date with current starters and conventions.
6
7	## Steps
8
9	1. Parse `$0` (kind): one of `deck`, `prototype`, `wireframe`, `animation`, `design-system`. If omitted or invalid → show supported kinds and ask.
10
11	2. Pick a canned brief from the matrix below. Tell the user which one you're using so they can change it.
12
13	3. Route to the matching workflow skill bypassing Phase 0/1 (context pre-flight and ambiguity gate) — we're generating a demo, not gathering requirements. Pass the dummy brief plus these overrides:
14	- Use `frontend-design` for aesthetic (no brand context)
15	- Write under `examples/<kind>-<YYYYMMDD>/` instead of `artifacts/`
16	- Skip register-asset (demos shouldn't clutter `assets.html`)
17
18	4. After the workflow skill completes (including `/done` on the output), report:
19	- Path to the generated artifact
20	- URL the user can open (file:// or http://127.0.0.1:4567/...)
21	- Suggestion to `cp -r examples/<kind>-<ts>/ artifacts/my-<kind>/` and then iterate via the regular workflow skill
22
23	## Canned briefs
24
25	\| Kind \| Brief \|
26	\|---\|---\|
27	\| `deck` \| "5-slide internal pitch deck: 'Why we should ship feature X in Q2'. Audience: engineering leadership. Tone: data-driven, concise." \|
28	\| `prototype` \| "iOS food-delivery app prototype, 3 screens: restaurant list, dish detail, cart. Include a slide transition between list and detail." \|
29	\| `wireframe` \| "Landing page for a developer tool. 4 variants on the canvas — hero-first, feature-grid-first, terminal-demo-first, testimonials-first. Greyscale." \|
30	\| `animation` \| "5-second product intro reel — logo fades in, tagline slides up, accent color wash transitions to final brand color. Use Stage/Sprite/interpolate." \|
31	\| `design-system` \| "Extract a tokens-only design system from a dummy fintech brand: deep navy primary, gold accent, Söhne-esque sans, 8px spacing grid. Render full style guide." \|
32
33	## Important
34
35	- Don't write to `artifacts/` — examples belong in `examples/` to avoid polluting the user's real work
36	- Don't register as assets — examples are reference material, not deliverables
37	- Tell the user explicitly this is a generated example and invite them to iterate on a copy
38	- Regenerate fresh each time the skill is called — timestamps in the folder name keep old ones around if the user wants to compare

People who liked this also viewed

6 picks

Type