theme-factoryCurated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme, brand colors.
Install via ClawdBot CLI:
clawdbot install wpank/theme-factoryApply consistent, professional styling to any artifact using curated themes with color palettes and font pairings.
Show the user the 10 available themes with their descriptions:
| # | Theme | Vibe | Best For |
|---|-------|------|----------|
| 1 | Ocean Depths | Professional, calming maritime | Corporate, financial, consulting |
| 2 | Sunset Boulevard | Warm, vibrant energy | Creative pitches, marketing, events |
| 3 | Forest Canopy | Natural, grounded earth tones | Environmental, sustainability, wellness |
| 4 | Modern Minimalist | Clean, contemporary grayscale | Tech, architecture, design showcases |
| 5 | Golden Hour | Rich, warm autumnal | Hospitality, lifestyle, artisan brands |
| 6 | Arctic Frost | Cool, crisp precision | Healthcare, technology, clean tech |
| 7 | Desert Rose | Soft, sophisticated dusty tones | Fashion, beauty, interior design |
| 8 | Tech Innovation | Bold, high-contrast modern | Startups, software launches, AI/ML |
| 9 | Botanical Garden | Fresh, organic vibrancy | Food, garden, natural products |
| 10 | Midnight Galaxy | Dramatic, cosmic depth | Entertainment, gaming, luxury brands |
Ask which theme to apply. Wait for explicit confirmation before proceeding.
themes/ directoryEach theme in themes/ follows this format:
# Theme Name
Description of the visual mood and inspiration.
## Color Palette
- **Primary Dark**: `#hex` — Usage description
- **Accent**: `#hex` — Usage description
- **Secondary**: `#hex` — Usage description
- **Light/Background**: `#hex` — Usage description
## Typography
- **Headers**: Font family
- **Body Text**: Font family
## Best Used For
Context and audience descriptions.:root {
--theme-primary: #hex; /* From theme's primary dark */
--theme-accent: #hex; /* From theme's accent color */
--theme-secondary: #hex; /* From theme's secondary */
--theme-bg: #hex; /* From theme's light/background */
--theme-font-heading: "Theme Header Font", sans-serif;
--theme-font-body: "Theme Body Font", sans-serif;
}When no preset fits, generate a custom theme:
Ensure readability when applying any theme:
| Combination | Minimum Ratio | WCAG Level |
|-------------|--------------|------------|
| Body text on background | 4.5:1 | AA |
| Large text (18px+) on background | 3:1 | AA |
| UI components / borders | 3:1 | AA |
| Enhanced readability | 7:1 | AAA |
Test accent colors against both light and dark backgrounds before finalizing.
All theme definitions are in the themes/ directory:
Generated Mar 1, 2026
A financial consulting firm needs to create a slide deck for a client pitch, requiring a professional and calming visual identity. The Ocean Depths theme is applied to ensure consistent color palettes and font pairings across all slides, enhancing credibility and readability.
A creative agency designs a landing page for an event promotion, using the Sunset Boulevard theme to inject vibrant energy and warm colors. This attracts attention and aligns with the brand's dynamic messaging, improving user engagement and conversion rates.
An environmental organization prepares an annual report, applying the Forest Canopy theme to reflect natural and grounded earth tones. This ensures the document conveys trust and aligns with their mission, using consistent typography and color schemes for charts and sections.
A software startup launches a new AI tool and uses the Tech Innovation theme for high-contrast modern styling in their presentation and documentation. This bold visual approach highlights innovation and appeals to tech-savvy audiences, reinforcing brand identity.
A luxury entertainment company creates themed materials for a gaming launch event, applying the Midnight Galaxy theme for dramatic and cosmic depth. This enhances the premium feel across slides and digital content, captivating the target audience with cohesive visuals.
Integrate the Theme Factory as a premium feature in a freemium design platform, offering basic themes for free and advanced customization for paid users. This drives subscriptions by providing value-added styling tools for presentations and web pages.
Marketing agencies bundle the skill into service packages for clients, using it to quickly apply professional themes to client projects like reports and landing pages. This increases efficiency and allows upselling for custom theme creation.
Offer the Theme Factory as an add-on for SaaS platforms focused on content creation, such as slide deck builders or website editors. Users pay a one-time or recurring fee to access curated themes, enhancing the platform's utility and user retention.
💬 Integration Tip
Integrate the skill into design tools by linking theme files via APIs for real-time application, ensuring seamless workflow for users styling multiple artifacts.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.