Register Asset

Name: Register Asset
Author: bluzir

bluzir/claude-code-design

40 installs
98 repo stars
Updated April 20, 2026
bluzir/claude-code-design

Register-asset is a Claude Code skill that registers a design artifact in design-assets.json, captures a thumbnail, and regenerates the assets.html overview grid.

About

Register-asset adds a design artifact to design-assets.json, captures a thumbnail, and regenerates an assets.html overview grid. Each card shows name, subtitle, a color-coded status badge, and a mini-menu for approve or request-changes. A developer runs it when an artifact is ready for review or to track it in the overview.

Registers a design artifact in design-assets.json and captures a thumbnail
Regenerates an assets.html overview grid grouped by Type/Colors/Spacing/Components/Brand
Tracks review status (needs-review, approved, changes-requested) per asset

Register Asset by the numbers

40 all-time installs (skills.sh)
Ranked #1,281 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 1, 2026 (Skillselion catalog sync)

At a glance

register-asset capabilities & compatibility

Free; runs locally with Node and the Chrome DevTools MCP

Capabilities: make deck · interactive prototype · make tweakable
Use cases: ui design · project management
Pricing: Free

From the docs

What register-asset says it does

Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid.

SKILL.md

Add an artifact to `design-assets.json` and refresh the visual overview at `assets.html`.

SKILL.md

npx skills add https://github.com/bluzir/claude-code-design --skill register-asset

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/bluzir/claude-code-design/register-asset.svg)](https://skillselion.com/skills/bluzir/claude-code-design/register-asset)

Installs	40
repo stars	★ 98
Last updated	April 20, 2026
Repository	bluzir/claude-code-design ↗

What it does

When should I use this skill?

when an artifact is ready for review or the user says add to overview or register

What you get

An assets.html grid of thumbnailed artifacts grouped by type with review status badges.

design-assets.json entry
assets.html overview grid
thumbnail image

By the numbers

5 asset groups (Type/Colors/Spacing/Components/Brand)
3 review statuses

Files

SKILL.mdMarkdownGitHub ↗

Register Asset

Add an artifact to design-assets.json and refresh the visual overview at assets.html.

Argument parsing

From $ARGUMENTS:

Positional 0: html-path (required)
--asset "<name>": display name (default: derive from filename, Title Cased)
--group <X>: one of Type, Colors, Spacing, Components, Brand (default: Components)
--subtitle "<text>": short description
--status <X>: needs-review | approved | changes-requested (default: needs-review)
--auto: silent mode called by /done — skip thumbnail capture (reuses .claude/last-preview.png), don't print confirmation prompts, one-line report only

Steps

1. Capture thumbnail:

If --auto and .claude/last-preview.png exists: Bash(cp .claude/last-preview.png assets/thumbs/<slug>-<ts>.png) — reuse
Otherwise: /preview <html-path> → wait 500ms → mcp__chrome-devtools__take_screenshot → save to assets/thumbs/<slug>-<ts>.png (Bash(mkdir -p assets/thumbs) first)

2. Read existing `design-assets.json`:

If missing → create with {"items": []}

3. Upsert entry:

Key on (asset, path) pair
If exists → update fields + thumbnail + bump updated_at
If new → append

Schema:

   {
     "items": [
       {
         "asset": "Primary button",
         "path": "artifacts/button.html",
         "group": "Components",
         "status": "approved",
         "subtitle": "Filled variant with hover state",
         "thumbnail": "assets/thumbs/button-20260420T120000Z.png",
         "registered_at": "2026-04-20T12:00:00Z",
         "updated_at": "2026-04-20T12:00:00Z"
       }
     ]
   }

4. Write `design-assets.json` with formatted JSON (2-space indent).

5. Regenerate `assets.html`:

Bash(node scripts/make-assets-index.mjs) — see script below
If user didn't run /doctor and node is missing, fall back to inline generation via Write tool with HTML template

6. Report: "Registered <asset> in <group>. View at assets.html."

assets.html layout

Sections by group. Each card shows:

Thumbnail (clickable → opens source HTML in new tab)
Asset name (bold)
Subtitle (muted)
Status badge (color-coded: green=approved, amber=needs-review, red=changes-requested)
Updated date
Mini-menu: approve, request-changes, unregister

The HTML is static — no server. Status changes happen via Claude (user says "approve the button asset" → Claude re-runs /register-asset ... --status approved).