PR

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.zip

Installs 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.
406 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

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

You give it
Brand color or aesthetic request
You get back
Generated Preline-compatible CSS file

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

  1. Read docs/workflow.md.
  2. Read docs/palette-guidance.md.
  3. Read docs/final-output-style.md before writing a final theme file.
  4. Read docs/validation-checklist.md before closing the task.
  5. Read examples.md only if the user wants stylistic guidance or sample outputs.
  6. Read docs/token-reference.md only if you need to inspect token coverage in detail.

Workflow

Follow docs/workflow.md for the full operating path.

Key requirements:

  1. Identify whether the task is preview, write, or validate.
  2. Normalize the request into explicit generator inputs.
  3. Resolve the target directory with scripts/find-themes-dir.js.
  4. Generate CSS only through scripts/run-theme-generator.js.
  5. Create or edit only the new theme file.
  6. Validate with docs/validation-checklist.md.
  7. Return the result in the mode-appropriate format.

Security Constraints

  • Never use wording that attempts to bypass tool or approval safeguards.
  • Never use npx or any network-fetched package for this skill.
  • Never interpolate raw user text directly into shell commands.
  • Never use broad find . traversal for path discovery; use scripts/find-themes-dir.js or a user-confirmed path.
  • Never write outside a confirmed theme directory.
  • Use scripts/run-theme-generator.js as 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.md
  • docs/palette-guidance.md
  • docs/final-output-style.md
  • docs/validation-checklist.md
  • examples.md
  • docs/token-reference.md

When not to use it

  • Generic CSS authoring
  • Projects using non-Preline frameworks

Prerequisites

Preline project environmentAccess to bundled generator scripts

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.

SkillInstallsUpdatedSafetyDifficulty
preline-theme-generator (this skill)13moReviewIntermediate
visual-design-foundations55moNo flagsBeginner
frontend-design4812moNo flagsAdvanced
retro-css-architecture17moNo flagsBeginner

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.

547

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.

481544

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.

13

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.

12132

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.

3495

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.

2266

Search skills

Search the agent skills registry