From artifact-refiner
Swap one brand's tokens for another's inside a TSX artifact. Mechanical AST rewrite swaps matching hex literals; regenerates the brand-vars CSS via template-forge. WCAG contrast is reported, not gated.
How this skill is triggered — by the user, by Claude, or both
Slash command
/artifact-refiner:rebrand-artifactThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Apply a target brand guide's tokens to a TSX artifact while preserving
Apply a target brand guide's tokens to a TSX artifact while preserving structure, content, and behavior.
artifact_type matching the source (react)content_type: direct:reactassets/library/brands/The user will provide: $ARGUMENTS
Parse the arguments for:
--source <path-to-tsx> (required) — input TSX--from-brand <name> (required) — current brand (e.g., knowme)--to-brand <name> (required) — target brand (e.g., prometheus-ags)--output <path-to-tsx> (required) — rebranded TSX--css-output <path-to-css> (optional; default <output>.css) — regenerated brand-vars CSS--ignore-contrast (optional flag) — suppress WCAG warningsDispatch to the orchestration script:
node scripts/rebrand-artifact.mjs \
--source "${SOURCE}" \
--from-brand "${FROM_BRAND}" \
--to-brand "${TO_BRAND}" \
--output "${OUTPUT}" \
--css-output "${CSS_OUTPUT}"
The script:
@iarna/toml.{ "colors.dark.ember": "#E04E28", ... } for hex-valued fields only.@babel/parser (with JSX + TS plugins).StringLiteral nodes via @babel/traverse; swaps exact-match from-brand hex with the to-brand equivalent."background: #abc").var(--color-*) references — those are CSS-variable lookups, and the CSS file holds the canonical values.template-forge render --template vite-shell-css --brand <to-brand> to the --css-output path.The contrast report covers:
ink on bg (dark + light)ember on bg (dark + light)muted on bg (dark + light)white on ember (button surface)Each pair is scored AAA / AA / A / FAIL by WCAG 2.1 relative luminance. The report does not block output. Pairs at "A" or "FAIL" levels are flagged as warnings; the user decides whether to accept the trade-off or pick different brand tokens.
To suppress the warning summary (e.g., in CI), pass --ignore-contrast.
var(--color-*) references in TSX are preserved as-is.artifact_type: react
content_type: direct:react
outputs:
- path: <output>.tsx
description: Rebranded TSX with hex literals swapped
- path: <output>.css
description: Regenerated brand-vars CSS for the new brand
- stderr_report: WCAG contrast report
constraints_satisfied:
- hex_literals_swapped
- var_references_preserved
- css_file_regenerated
- contrast_reported
TSX artifact + brand A → rebrand-artifact (A → B) → TSX + CSS for brand B
↓
→ scaffold-react-vite for production
scripts/rebrand-artifact.mjs — the orchestration scriptscripts/lib/wcag-contrast.mjs — contrast helpertools/template-forge-rs/templates/vite-shell-css.html — CSS templateopenspec/changes/phase-3-conversion-layer/ — design rationalenpx claudepluginhub gqadonis/artifact-refiner-skill --plugin artifact-refinerProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.