theme-kit
Attaches itself automatically when a prompt matches.
A library of 10 named color/typography themes that can be applied to any frontend. Use when the user wants their site to feel calm/maritime, warm/sunset, minimal/gray, neon/tech, etc., but hasn't supplied specific colors. Each theme ships with hex values, Tailwind config snippet, and CSS variable block. Adapted from anthropics/skills theme-factory for web targets.
Scaffolds
Source
Adapted from anthropics/skills (adapted)
Instructions
The full instruction set the agent receives when this skill is active.
Theme Kit
10 curated themes. Each is a tight color palette + display/body font pairing that holds together across a whole site. Apply ONE theme per build; don't blend.
How to apply a theme
- Ask the user which theme name appeals (or pick one yourself based on tone of project).
- Read the matching file in
themes/for the full palette + font pair. - Wire it into the scaffold:
- scaffold-next / scaffold-react: extend
tailwind.config.tstheme.extend.colorswith the palette, thennext/font/google(or<link>for scaffold-react) for the fonts. - scaffold-vanilla: drop the CSS variable block at the top of your stylesheet, load fonts via
<link rel="preconnect" href="https://fonts.googleapis.com">+ the Google Fonts URL.
- scaffold-next / scaffold-react: extend
- Apply the dark color as primary text, the lightest as background, the brightest as the single accent for CTAs only.
The 10 themes (at a glance)
| Theme | Vibe | Use for |
|---|---|---|
| Ocean Depths | calm maritime navy | corporate, finance, consulting |
| Sunset Boulevard | warm energetic coral | creative, lifestyle, events |
| Forest Canopy | grounded earth green | sustainability, outdoor, wellness |
| Modern Minimalist | grayscale | tech, architecture, data viz |
| Golden Hour | autumnal mustard | restaurants, hospitality, cozy |
| Arctic Frost | crisp clean blue | healthcare, cleantech, pharma |
| Desert Rose | soft dusty rose | fashion, beauty, weddings |
| Tech Innovation | bold electric blue | startups, AI/ML, dev tools |
| Botanical Garden | vibrant garden green | food, botanical, farm-to-table |
| Midnight Galaxy | cosmic deep purple | gaming, entertainment, luxury |
See themes/<name>.md for hex values, font pairing, and ready-to-paste Tailwind/CSS snippets.
Important departure from the source
The upstream anthropics/skills theme-factory uses Linux system fonts (DejaVu Sans, FreeSans) because it ships PPTX files via python-pptx. For web targets we substitute compatible Google Fonts that capture the same character — the themes in themes/ already do this swap. Don't reach for DejaVu in browser-rendered output.
See also: [[frontend-design]], [[brand-kit]].