skin-builder
Add a re-skin (a [data-theme] block) to this reveal.js presentation framework from brand input. Use when the user says "re-skin the deck", "add a brand theme", "new theme called ...", "make a dark/light skin", or "apply these brand colours/fonts". Parses the existing custom-property tiers, then appends a [data-theme="<name>"] block to src/styles/vars/semantic.css (and any genuinely new primitives to primitives.css). Never touches slides or components.
Resources
1Install
npx skillscat add gregshallardau/ai-training-101/skin-builder Install via the SkillsCat registry.
skin-builder
Before anything: read docs/framework-conventions.md andreference/variable-tiers.md.
Inputs
- theme name (kebab)
- brand colours (hex list; with roles - bg / fg / muted / accent - if known)
- font stacks (heading / body / mono)
- radius feel: sharp | soft | pill
- motion feel: snappy | gentle
- optional: is this the light or dark half of a pair
Read (detect state)
docs/framework-conventions.md,reference/variable-tiers.md.src/styles/vars/primitives.css- parse every--name: value;under:rootinto a map (the tier-1 inventory).src/styles/vars/semantic.css- parse the:rootsemantic names and the
names of every existing[data-theme]block. If<name>already exists ->
STOP.src/styles/layers.css- confirm thevars.primitive/vars.semanticlayer
names for placement.
Do not read components, slides, or theme/deck.css.
Write
src/styles/vars/primitives.css- append, inside the existing@layer vars.primitive { :root { ... } }, only primitives that have no existing
equivalent (e.g. a brand ramp--color-brand-500), under a/* <name> skin */
comment.src/styles/vars/semantic.css- append, inside@layer vars.semantic, a[data-theme="<name>"] { ... }block that re-points only the semantics that
differ from:root. Every value isvar(--<primitive>)- never a raw colour or
length.
Never redefine the base :root semantics. Never edit theme/deck.css, the
root-level deck.css, slides, or components.
Procedure
- Reads above; if
<name>exists, STOP. - Map the brand input onto the semantic names (
reference/variable-tiers.mdhas
the list). For each: reuse a matching existing primitive if there is one, else
mint a new primitive. - Append new primitives to
primitives.css. - Emit the
[data-theme="<name>"]block (changed semantics only) and append tosemantic.css. - Validate: every
var(--...)in the new block resolves to a name now present inprimitives.css. Print the diff. - Tell the user to activate it:
document.documentElement.dataset.theme = '<name>'(or<html data-theme="<name>">), and that Reveal's--r-*and any D3 palettes follow
automatically because they read the semantic layer.
Consistency
Two-tier discipline holds: no raw colour / length inside a [data-theme] block.
Say "CSS custom property" / "CSS variable", never "token".
Categories
Install
npx skillscat add gregshallardau/ai-training-101/skin-builder Install via the SkillsCat registry.
Repository Stars
The star count shown is for the parent repository (gregshallardau/ai-training-101), not this specific skill.
.claude/skills/skin-builder