Full-stack-skills theme-factory

Applies professional color and font themes to slides, documents, reports, and HTML pages. Includes 10 pre-set themes (Ocean Depths, Sunset Boulevard, Modern Minimalist, etc.) with hex palettes and font pairings, plus on-the-fly custom theme generation. Use when the user wants to style or re-theme any visual artifact.

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/dev-utils-skills/theme-factory" ~/.claude/skills/partme-ai-full-stack-skills-theme-factory && rm -rf "$T"

manifest: skills/dev-utils-skills/theme-factory/SKILL.md

When to use this skill

Use this skill whenever the user wants to:

Apply a consistent color/font theme to a slide deck, document, report, or landing page
Preview available themes before choosing one
Generate a custom theme from a description (e.g., "warm corporate" or "playful startup")
Re-theme an existing artifact with a different visual identity

How to use this skill

Workflow

Show the theme showcase - Display
```
theme-showcase.pdf
```
so the user can visually compare all 10 themes
Ask for their choice - Let the user pick a theme or describe a custom one
Wait for confirmation - Get explicit approval before applying
Apply the theme - Read the theme file from
```
themes/
```
and apply colors/fonts consistently

Available Themes

#	Theme	Style	Primary Color
1	Ocean Depths	Professional, calming	Maritime blues
2	Sunset Boulevard	Warm, vibrant	Orange/coral
3	Forest Canopy	Natural, grounded	Earth greens
4	Modern Minimalist	Clean, contemporary	Grayscale
5	Golden Hour	Rich, warm	Autumnal golds
6	Arctic Frost	Cool, crisp	Winter blues
7	Desert Rose	Soft, sophisticated	Dusty pinks
8	Tech Innovation	Bold, modern	Electric blues
9	Botanical Garden	Fresh, organic	Garden greens
10	Midnight Galaxy	Dramatic, cosmic	Deep purples

Applying a Theme (example)

/* Example: Ocean Depths theme applied via CSS variables */
:root {
  --color-primary: #1B4F72;
  --color-secondary: #2E86C1;
  --color-accent: #AED6F1;
  --color-background: #EBF5FB;
  --color-text: #1C2833;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Source Sans Pro', sans-serif;
}

Custom Theme Generation

When no preset fits, create a custom theme:

Ask the user for a mood/description (e.g., "energetic tech startup")
Generate a palette of 4-5 harmonious hex colors
Select complementary heading and body fonts
Name the theme descriptively
Show for review, then apply

Best Practices

Contrast check - Ensure text/background combinations meet WCAG AA contrast ratios
Consistency - Apply the same theme tokens to every slide/page, never mix themes
Font pairing - Use one display font for headings and one readable font for body text
Accent sparingly - Use accent colors for highlights and CTAs, not large surfaces

Keywords

theme, styling, color palette, font pairing, slides, presentation, design, visual identity, 主题, 配色, 样式