generate-brand-section

To auto-generate a multi-tab brand section from design tokens, this Skill merges fonts, colors, and layout tokens with article data to scaffold a complete React component with 15 lazy-loaded tab pages. It enforces type-safe routing and frontmatter-driven configuration without hard-coded data.

Frontmatter-driven configuration for design-docs UI means dynamic data aggregation from ARTICLES and extracted design tokens builds the page structure. This approach populates 15 tab pages and renders sub-sections automatically, avoiding hard-coded data in the component.

You scaffold a scalable brand design system component by running the create-brand workflow, which generates a main BrandSection.tsx file and 15 tab components. It uses TypeScript to ensure type-safe routing and aggregates resources across multiple design token extractions.

Yes, you can merge design tokens across multiple articles for a new brand. The Skill automates the assembly of fonts, colors, layout tokens, and resources across extractions to produce a cohesive brand presence and consistent admin design-doc experience.

Yes, the generated brand section supports lazy-loaded sub-pages. It automates the construction of 15 tab pages that are all wired to dynamic article data and lazy-rendered to ensure scalable performance for the design-docs UI.

Avoiding hard-coded data when building design docs components ensures scalability and consistency across brands. This Skill enforces dynamic data aggregation from ARTICLES and frontmatter-driven configuration, so all 15 tab pages populate automatically from merged design tokens.