Skip to content
cccskills
FreePublished on GitHub

preline-theme-generator

Generate Preline theme CSS from a brand color or a desired mood using bundled local scripts. Preview output before saving, create light and dark themes, and review or fix theme tokens, the named values that define styling.

OriginalShow the original description

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.

See how to install

Good for

  • Matching a Preline theme to a brand color
  • Turning a visual mood into theme colors
  • Previewing CSS before saving a file
  • Reviewing and fixing generated theme tokens

Files included (10)

  • SKILL.md2.4 KB
  • docs/final-output-style.md2.8 KB
  • docs/palette-guidance.md10.3 KB
  • docs/token-reference.md20.9 KB
  • docs/validation-checklist.md2.2 KB
  • docs/workflow.md5.8 KB
  • examples.md5.9 KB
  • scripts/find-themes-dir.js1.7 KB
  • scripts/generate-theme.js36.9 KB
  • scripts/run-theme-generator.js3.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

preline-mcp

FreeSummary

Add Preline UI components and ready-made page sections to HTML files through the Preline MCP server. The skill guides component selection, CSS and script placement, and assembly of pages containing multiple components.

  • Adding a Preline UI component to an existing HTML file
  • Building a page from ready-made sections
  • Assembling a dashboard with multiple components
htmlstreamofficial/preline6.5KUpdated Aug 31, 2026

See all skills by htmlstreamofficial

Report a problem with this skill