register-asset

Name: register-asset
Author: bluzir

39installs10forks

How to install register-asset?

bluzir/claude-code-design/register-asset

$npx -y skills add bluzir/claude-code-design --skill register-asset

Installs into the current project.

Summary

Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid. Use when an artifact is ready for review, or user says "add to overview", "register", "track this".

Files · 1

View on GitHub

SKILL.md

1	# Register Asset
2
3	Add an artifact to `design-assets.json` and refresh the visual overview at `assets.html`.
4
5	## Argument parsing
6
7	From `$ARGUMENTS`:
8	- Positional 0: html-path (required)
9	- `--asset "<name>"`: display name (default: derive from filename, Title Cased)
10	- `--group <X>`: one of Type, Colors, Spacing, Components, Brand (default: Components)
11	- `--subtitle "<text>"`: short description
12	- `--status <X>`: needs-review \| approved \| changes-requested (default: needs-review)
13	- `--auto`: silent mode called by `/done` — skip thumbnail capture (reuses `.claude/last-preview.png`), don't print confirmation prompts, one-line report only
14
15	## Steps
16
17	1. Capture thumbnail:
18	- If `--auto` and `.claude/last-preview.png` exists: `Bash(cp .claude/last-preview.png assets/thumbs/<slug>-<ts>.png)` — reuse
19	- Otherwise: `/preview <html-path>` → wait 500ms → `mcp__chrome-devtools__take_screenshot` → save to `assets/thumbs/<slug>-<ts>.png` (`Bash(mkdir -p assets/thumbs)` first)
20
21	2. Read existing `design-assets.json`:
22	- If missing → create with `{"items": []}`
23
24	3. Upsert entry:
25	- Key on (asset, path) pair
26	- If exists → update fields + thumbnail + bump `updated_at`
27	- If new → append
28
29	Schema:
30	```json
31	{
32	"items": [
33	{
34	"asset": "Primary button",
35	"path": "artifacts/button.html",
36	"group": "Components",
37	"status": "approved",
38	"subtitle": "Filled variant with hover state",
39	"thumbnail": "assets/thumbs/button-20260420T120000Z.png",
40	"registered_at": "2026-04-20T12:00:00Z",
41	"updated_at": "2026-04-20T12:00:00Z"
42	}
43	]
44	}
45	```
46
47	4. Write `design-assets.json` with formatted JSON (2-space indent).
48
49	5. Regenerate `assets.html`:
50	- `Bash(node scripts/make-assets-index.mjs)` — see script below
51	- If user didn't run `/doctor` and node is missing, fall back to inline generation via `Write` tool with HTML template
52
53	6. Report: "Registered `<asset>` in `<group>`. View at `assets.html`."
54
55	## assets.html layout
56
57	Sections by group. Each card shows:
58	- Thumbnail (clickable → opens source HTML in new tab)
59	- Asset name (bold)
60	- Subtitle (muted)
61	- Status badge (color-coded: green=approved, amber=needs-review, red=changes-requested)
62	- Updated date
63	- Mini-menu: approve, request-changes, unregister
64
65	The HTML is static — no server. Status changes happen via Claude (user says "approve the button asset" → Claude re-runs `/register-asset ... --status approved`).

People who liked this also viewed

6 picks

Type

register-asset

39installs10forks

View on GitHub

How to install register-asset?

bluzir/claude-code-design/register-asset

$npx -y skills add bluzir/claude-code-design --skill register-asset

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Register Asset
2
3	Add an artifact to `design-assets.json` and refresh the visual overview at `assets.html`.
4
5	## Argument parsing
6
7	From `$ARGUMENTS`:
8	- Positional 0: html-path (required)
9	- `--asset "<name>"`: display name (default: derive from filename, Title Cased)
10	- `--group <X>`: one of Type, Colors, Spacing, Components, Brand (default: Components)
11	- `--subtitle "<text>"`: short description
12	- `--status <X>`: needs-review \| approved \| changes-requested (default: needs-review)
13	- `--auto`: silent mode called by `/done` — skip thumbnail capture (reuses `.claude/last-preview.png`), don't print confirmation prompts, one-line report only
14
15	## Steps
16
17	1. Capture thumbnail:
18	- If `--auto` and `.claude/last-preview.png` exists: `Bash(cp .claude/last-preview.png assets/thumbs/<slug>-<ts>.png)` — reuse
19	- Otherwise: `/preview <html-path>` → wait 500ms → `mcp__chrome-devtools__take_screenshot` → save to `assets/thumbs/<slug>-<ts>.png` (`Bash(mkdir -p assets/thumbs)` first)
20
21	2. Read existing `design-assets.json`:
22	- If missing → create with `{"items": []}`
23
24	3. Upsert entry:
25	- Key on (asset, path) pair
26	- If exists → update fields + thumbnail + bump `updated_at`
27	- If new → append
28
29	Schema:
30	```json
31	{
32	"items": [
33	{
34	"asset": "Primary button",
35	"path": "artifacts/button.html",
36	"group": "Components",
37	"status": "approved",
38	"subtitle": "Filled variant with hover state",
39	"thumbnail": "assets/thumbs/button-20260420T120000Z.png",
40	"registered_at": "2026-04-20T12:00:00Z",
41	"updated_at": "2026-04-20T12:00:00Z"
42	}
43	]
44	}
45	```
46
47	4. Write `design-assets.json` with formatted JSON (2-space indent).
48
49	5. Regenerate `assets.html`:
50	- `Bash(node scripts/make-assets-index.mjs)` — see script below
51	- If user didn't run `/doctor` and node is missing, fall back to inline generation via `Write` tool with HTML template
52
53	6. Report: "Registered `<asset>` in `<group>`. View at `assets.html`."
54
55	## assets.html layout
56
57	Sections by group. Each card shows:
58	- Thumbnail (clickable → opens source HTML in new tab)
59	- Asset name (bold)
60	- Subtitle (muted)
61	- Status badge (color-coded: green=approved, amber=needs-review, red=changes-requested)
62	- Updated date
63	- Mini-menu: approve, request-changes, unregister
64
65	The HTML is static — no server. Status changes happen via Claude (user says "approve the button asset" → Claude re-runs `/register-asset ... --status approved`).

People who liked this also viewed

6 picks

Type