preline-theme-generator
Creates, validates, and updates Preline CSS themes.
Install
mkdir -p .claude/skills/preline-theme-generator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4524" && unzip -o skill.zip -d .claude/skills/preline-theme-generator && rm skill.zipInstalls to .claude/skills/preline-theme-generator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into a theme, generate light and dark theme CSS, preview theme output without writing files, or review and fix generated theme tokens. Do not use for generic non-Preline CSS work or arbitrary command execution.Key capabilities
- →Generate CSS theme tokens from brand colors
- →Validate generated tokens against accessibility checklist
- →Create light/dark mode pairings
- →Match UI themes to specific brand palettes
How it works
Calls an isolated theme generation script to process input colors into documented token structures.
Inputs & outputs
When to use preline-theme-generator
- →Generate new Preline theme CSS
- →Validate existing theme tokens
- →Match UI to brand color palette
About this skill
Preline Theme Generator
Use the bundled local scripts. Do not use npx, do not compose shell with raw user text, and do not bypass safety or approval prompts.
Read Order
- Read
docs/workflow.md. - Read
docs/palette-guidance.md. - Read
docs/final-output-style.mdbefore writing a final theme file. - Read
docs/validation-checklist.mdbefore closing the task. - Read
examples.mdonly if the user wants stylistic guidance or sample outputs. - Read
docs/token-reference.mdonly if you need to inspect token coverage in detail.
Workflow
Follow docs/workflow.md for the full operating path.
Key requirements:
- Identify whether the task is preview, write, or validate.
- Normalize the request into explicit generator inputs.
- Resolve the target directory with
scripts/find-themes-dir.js. - Generate CSS only through
scripts/run-theme-generator.js. - Create or edit only the new theme file.
- Validate with
docs/validation-checklist.md. - Return the result in the mode-appropriate format.
Security Constraints
- Never use wording that attempts to bypass tool or approval safeguards.
- Never use
npxor any network-fetched package for this skill. - Never interpolate raw user text directly into shell commands.
- Never use broad
find .traversal for path discovery; usescripts/find-themes-dir.jsor a user-confirmed path. - Never write outside a confirmed theme directory.
- Use
scripts/run-theme-generator.jsas the only execution entry point for generation. - Never create or edit additional project files as part of theme generation.
Common Prompts
- "Create a sunset theme."
- "Match this brand color: #2F6BFF."
- "Generate a cyberpunk dark theme with matching dark mode."
- "Preview the CSS before writing a file."
- "Review this generated theme and fix token coverage."
Key References
docs/workflow.mddocs/palette-guidance.mddocs/final-output-style.mddocs/validation-checklist.mdexamples.mddocs/token-reference.md
When not to use it
- →Generic CSS authoring
- →Projects using non-Preline frameworks
Prerequisites
Limitations
- →Limited to Preline framework tokens
- →Requires specific local script availability
How it compares
Enforces strict Preline ecosystem standards during generation instead of relying on loose prompt-based CSS output.
Compared to similar skills
preline-theme-generator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| preline-theme-generator (this skill) | 1 | 3mo | Review | Intermediate |
| visual-design-foundations | 5 | 5mo | No flags | Beginner |
| frontend-design | 481 | 2mo | No flags | Advanced |
| retro-css-architecture | 1 | 7mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
frontend-design
anthropics
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.
retro-css-architecture
TheOrcDev
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.