theme-generator_skill

Overview

This skill generates complete Preline Theme CSS files that produce cohesive light and dark UI palettes for Preline components. It interprets a natural-language theme brief, builds a theme file via an automated generator, and returns the finished CSS plus the enable snippet for immediate use.

How this skill works

The agent parses your theme description into a config, auto-creates a temporary JSON config, and runs the theme generator script to produce a standalone theme CSS file. The generated file includes the required import, a palette scoping block, and full semantic token overrides for both light and dark modes so the theme works by setting data-theme or adding .dark.

When to use it

• You want a full Preline-compatible theme file (light + dark) from a brief description.
• You need consistent semantic tokens across all Preline components without editing HTML classes.
• You want an automated workflow that creates the theme file in your project’s themes folder.
• You need a theme that follows Preline token naming and ships valid CSS.
• You want quick variations (brand, seasonal, or experimental) generated programmatically.

Best practices

• Describe mood, key hue or hex, and desired contrast in the brief (e.g., 'warm coffee, #7B4F2A, high readability').
• Provide the target themes folder if the project has no existing themes folder.
• Request custom fonts explicitly if you want font tokens added; otherwise font loading stays outside the theme file.
• Avoid asking the generator to modify the shipped base theme; generate separate theme files only.
• Test the produced theme by importing it and toggling data-theme plus .dark to confirm visual parity.

Example use cases

• Create a cozy coffee shop theme: warm browns, cream backgrounds, inviting contrast.
• Generate a cyberpunk dark theme with neon cyan accents for a dashboard UI.
• Produce a brand-themed palette around #2F6BFF for a SaaS product with high clarity.
• Make an accessible high-contrast theme optimized for readability across components.
• Iterate multiple color variations quickly for A/B visual testing.