achreftlili/theme-factory-skill
frontend/theme-factory-skill/SKILL.md
Toolkit for styling frontend artifacts with curated themes — 10 pre-set themes with colors/fonts, or generate custom themes on-the-fly.
$ install --global
skillsauthnpx skillsauth add achreftlili/deep-dev-skills theme-factory-skillInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 2:49 PM6.1s1 file scanned
SKILL.md
- name:
- theme-factory-skill
- description:
- >
- category:
- frontend
- agent-type:
- coding
Theme Factory Skill
Toolkit for styling frontend artifacts with curated themes — 10 pre-set themes with colors/fonts, or generate custom themes on-the-fly.
Source: anthropics/skills
This skill provides a curated collection of professional font and color themes. Each theme includes a cohesive color palette with hex codes, complementary font pairings, and a distinct visual identity. Apply these themes to any frontend artifact: landing pages, dashboards, slide decks, reports, documentation.
How to Apply a Theme
- Choose a theme from the list below (or create a custom one)
- Apply the theme's color palette using CSS variables
- Set the typography (headers + body fonts)
- Ensure proper contrast and readability
- Maintain the theme's visual identity across all components
Theme 1: Ocean Depths
Professional and calming maritime theme.
Colors:
- Deep Navy:
#1a2332— primary background - Teal:
#2d8b8b— accent highlights - Seafoam:
#a8dadc— secondary accent - Cream:
#f1faee— text and light backgrounds
Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)
Best for: Corporate, financial, consulting, trust-building content.
Theme 2: Modern Minimalist
Clean and contemporary grayscale for maximum versatility.
Colors:
- Charcoal:
#36454f— primary dark - Slate Gray:
#708090— accents - Light Gray:
#d3d3d3— backgrounds, dividers - White:
#ffffff— text, clean backgrounds
Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)
Best for: Tech, architecture, design showcases, data visualization.
Theme 3: Sunset Boulevard
Warm and vibrant, inspired by golden hour sunsets.
Colors:
- Burnt Orange:
#e76f51— primary accent - Coral:
#f4a261— secondary warm accent - Warm Sand:
#e9c46a— highlighting, backgrounds - Deep Purple:
#264653— dark contrast, text
Typography: DejaVu Serif Bold (headers), DejaVu Sans (body)
Best for: Creative pitches, marketing, lifestyle brands, events.
Theme 4: Forest Canopy
Natural and grounded earth tones from dense forest environments.
Colors:
- Forest Green:
#2d4a2b— primary dark green - Sage:
#7d8471— muted green accent - Olive:
#a4ac86— light accent - Ivory:
#faf9f6— backgrounds, text
Typography: FreeSerif Bold (headers), FreeSans (body)
Best for: Environmental, sustainability, wellness, organic products.
Theme 5: Golden Hour
Rich and warm autumnal palette, inviting and sophisticated.
Colors:
- Mustard Yellow:
#f4a900— bold primary accent - Terracotta:
#c1666b— warm secondary - Warm Beige:
#d4b896— neutral backgrounds - Chocolate Brown:
#4a403a— dark text, anchors
Typography: FreeSans Bold (headers), FreeSans (body)
Best for: Hospitality, restaurants, artisan products, fall campaigns.
Theme 6: Arctic Frost
Cool and crisp winter-inspired — clarity, precision, professionalism.
Colors:
- Ice Blue:
#d4e4f7— light backgrounds, highlights - Steel Blue:
#4a6fa5— primary accent - Silver:
#c0c0c0— metallic accents - Crisp White:
#fafafa— clean backgrounds
Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)
Best for: Healthcare, clean tech, pharmaceuticals, winter sports.
Theme 7: Desert Rose
Soft and sophisticated dusty tones for elegant presentations.
Colors:
- Dusty Rose:
#d4a5a5— soft primary - Clay:
#b87d6d— earthy accent - Sand:
#e8d5c4— warm neutral backgrounds - Deep Burgundy:
#5d2e46— rich dark contrast
Typography: FreeSans Bold (headers), FreeSans (body)
Best for: Fashion, beauty, wedding planning, interior design, boutique.
Theme 8: Tech Innovation
Bold and modern, high-contrast for cutting-edge tech.
Colors:
- Electric Blue:
#0066ff— vibrant primary accent - Neon Cyan:
#00ffff— bright highlights - Dark Gray:
#1e1e1e— deep backgrounds - White:
#ffffff— clean text, contrast
Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)
Best for: Tech startups, software launches, AI/ML, digital transformation.
Theme 9: Botanical Garden
Fresh and organic, vibrant garden-inspired colors.
Colors:
- Fern Green:
#4a7c59— rich natural green - Marigold:
#f9a620— bright floral accent - Terracotta:
#b7472a— earthy warm tone - Cream:
#f5f3ed— soft neutral backgrounds
Typography: DejaVu Serif Bold (headers), DejaVu Sans (body)
Best for: Garden centers, food, farm-to-table, botanical brands.
Theme 10: Midnight Galaxy
Dramatic and cosmic with deep purples and mystical tones.
Colors:
- Deep Purple:
#2b1e3e— rich dark base - Cosmic Blue:
#4a4e8f— mystical mid-tone - Lavender:
#a490c2— soft accent - Silver:
#e6e6fa— light highlights, text
Typography: FreeSans Bold (headers), FreeSans (body)
Best for: Entertainment, gaming, nightlife, luxury brands, creative agencies.
Creating Custom Themes
When none of the pre-set themes fit, create a custom theme:
- Pick a descriptive name that captures the color/font mood
- Choose 4 colors: primary background, primary accent, secondary accent, text/contrast
- Select complementary header + body font pairing
- Define the "best for" context
- Apply using the same CSS variable pattern as above
CSS Variable Pattern
:root {
--color-bg: #1a2332;
--color-accent: #2d8b8b;
--color-secondary: #a8dadc;
--color-text: #f1faee;
--font-heading: 'DejaVu Sans Bold', sans-serif;
--font-body: 'DejaVu Sans', sans-serif;
}
Integration Notes
- Pairs with frontend-design-skill — use Theme Factory for systematic color/font selection, then apply the design principles from the design skill for layout, motion, and spatial composition
- Pairs with react-project-starter, nextjs-project-starter, vuejs-project-starter — apply theme as CSS variables in the framework's global styles
- For Tailwind CSS projects: extend the theme in
tailwind.config.tswith the selected palette colors
Related Skills
achreftlili/vitest-testing-skill
testing
VerifiedTrustedCommunity
Set up Vitest 2.x with TypeScript for unit and component testing using test/describe/it, vi.fn/vi.mock/vi.spyOn, component testing with Testing Library, coverage (v8/istanbul), workspace config, and snapshot testing.
1SKILL.mdUpdated Apr 25, 2026
achreftlili/pytest-testing-skill
testing
VerifiedTrustedCommunity
Set up pytest 8.x with Python for unit and integration testing using fixtures (scope, autouse, parametrize), async tests (pytest-asyncio), mocking (unittest.mock, pytest-mock), coverage (pytest-cov), conftest.py patterns, and markers.
1SKILL.mdUpdated Apr 25, 2026
achreftlili/playwright-testing-skill
testing
VerifiedTrustedCommunity
Set up Playwright 1.49+ with TypeScript for E2E testing using page object model, fixtures, test.describe/test blocks, assertions, selectors, network mocking, CI configuration, and trace viewer.
1SKILL.mdUpdated Apr 25, 2026
achreftlili/jest-testing-skill
testing
VerifiedTrustedCommunity
Set up Jest 30+ with TypeScript for unit tests, integration tests, mocking (jest.fn, jest.mock, jest.spyOn), coverage configuration, custom matchers, snapshot testing, and setup/teardown patterns.
1SKILL.mdUpdated Apr 25, 2026