theme-factory

Generate and validate per-demo visual themes conforming to the DemoTheme TypeScript contract.

Updated Jun 12, 2026
One-click install
npx skills add https://github.com/oleyna80/agentic-sdlc-framework --skill theme-factory-oleyna80
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-factory
Source: https://github.com/oleyna80/agentic-sdlc-framework/tree/main/skills/theme-factory
Command: npx skills add https://github.com/oleyna80/agentic-sdlc-framework --skill theme-factory-oleyna80

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Showcase demo sites need distinct, client-appropriate visual identities, but hand-picking colors, fonts, and component styles risks inconsistent branding, poor WCAG contrast, and contract violations against the DemoTheme type. ## Core Features & Use Cases - Preset Theme Library: Six curated DemoTheme objects for approved niches (plumbing, salon, bistro, jewelry, insurance, accounting) with character descriptions and niche rationale. - Custom Theme Generation: Rule-based workflow for building a theme from a client description, covering color psychology, approved heading fonts, radius, spacing, and component styles. - Automated Validation: A Node.js script checks all required fields, hex formats, enum values, approved fonts, and WCAG AA contrast ratios, exiting non-zero on failure. - Use Case: A client asks for a luxury jewelry demo. Present the presets, apply Luxury-Editorial, then run the validator to confirm contrast and contract compliance before handoff to implementation. ## Quick Start Ask the agent to show the available demo theme presets and apply one to a new showcase demo, or describe the client's niche to generate a custom theme.

Frequently Asked Questions about theme-factory

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

FAQPage Schema
How do I create a custom theme for a demo site from a client description?▼

Describe the client's niche and desired feel, then the workflow generates a complete DemoTheme with colors, fonts, radius, spacing, and component styles matched to that niche. You review the generated theme and confirm before it is applied.

How do I validate WCAG contrast for a DemoTheme?▼

Run the validate.mjs script with the theme JSON via stdin or a file path. It computes contrast ratios for primaryFg on primary and primary on bg, failing below the WCAG AA 4.5:1 threshold and exiting with code 1 on errors.

What fonts are allowed in a DemoTheme?▼

Heading fonts must be one of Source Serif 4, Playfair Display, or Lora, chosen to match the theme's character. The body font is fixed to Geist Sans and cannot be changed without owner approval.

Can demo themes reuse the showcase shell's brand colors?▼

No. Demo interiors scoped to the data-demo attribute must use client-niche themes and never leak the showcase shell's brand colors. The shell uses the separate brand-guidelines skill, keeping the two visual identities isolated.

Why does theme validation fail on my color choices?▼

Failures come from invalid hex formats, insufficient contrast between primaryFg and primary, unapproved fonts, or enum values outside the allowed sets for radius, spacing, button, card, and image styles. Warnings also flag pure white backgrounds and #CCCCCC borders.