brand-canon-ingest

Ingest a governed brand repo's tokens, schemes, assets, and voice rules into an Astro site.

Updated Jun 17, 2026
One-click install
npx skills add https://github.com/ccediland/web-stack-skills --skill brand-canon-ingest-ccediland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-canon-ingest
Source: https://github.com/ccediland/web-stack-skills/tree/main/plugin/skills/brand-canon-ingest
Command: npx skills add https://github.com/ccediland/web-stack-skills --skill brand-canon-ingest-ccediland

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Applying a governed brand system to a website without forking its source of truth is error-prone: token formats mismatch, dark-mode schemes get hand-ported, logos get redrawn, and copy drifts off-brand. This Skill wires a builder-emitted brand repo (contract 0.6.0) into an Astro plus Tailwind v4 site on Cloudflare so the site stays a registered projection of the canon, never a second source. ## Core Features & Use Cases - Verbatim token ingestion: Copies the brand repo's pre-emitted tokens/web/ string projection byte-identically and runs the existing Style Dictionary v5 pipeline, with one registered transform for cubicBezier easing arrays. - Scheme serialization: Generates src/styles/schemes.css from structured-OKLCH scheme files via a vendored zero-dependency script, with light as the default and no OS-based auto-switching. - Asset and voice wiring: Copies exact-file logos, currentColor icons, and woff2 fonts; derives favicon and raster OG images; loads canon.json plus both keystones for all copy decisions; registers the site in the brand's projection registry. - Use Case: A client hands you their brand-system repo. You run its gate board, copy the token projection, serialize the dark scheme, wire fonts and logos, and the site renders fully on-brand with every canon rule cited by ID. ## Quick Start Consume the brand repo at ../furever-brand into this Astro site, starting by running its gate board and then wiring tokens, schemes, assets, and voice.

Frequently Asked Questions about brand-canon-ingest

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply a brand repo's design tokens to an Astro and Tailwind v4 site?▼

Copy the brand repo's pre-emitted tokens/web/{base,semantic,component}.json files byte-identically into the site's tokens/ directory, then run the existing Style Dictionary v5 pipeline unchanged. Never point Style Dictionary at the spine files, since their structured-OKLCH values split into invalid sub-vars.

How do I generate dark mode CSS from DTCG scheme token files?▼

Use the vendored zero-dependency scheme-serialize.mjs script, which reads tokens/schemes/*.tokens.json and emits role-level custom properties into src/styles/schemes.css. The :root light default block must be emitted first because selector ties are resolved by source order.

Can I use this skill with a plain tokens.json file and no brand repo?▼

No. This skill consumes a builder-emitted brand repo under interchange contract 0.6.0 and requires its gate board to pass first. For hand-authored tokens without a brand repo, use the astro-css-tokens skill directly.

Why does the site never auto-switch to dark mode based on OS preference?▼

The canon rule G-UX-02 makes light the default and forbids auto-switching, so the no-flash script defaults to light and ignores prefers-color-scheme. Dark mode remains an explicit user choice stored in localStorage.

What are the limitations of the brand ingestion approach?▼

It is verified against one reference brand repo on contract 0.6.0, so other brands may surface brand-specific role vocabularies. Favicon and OG generation are command recipes needing visual checks, and webfont licensing must be confirmed with the owner separately.