Skip to content
FunCoding

Search

Search docs, Skills and MCP

preline-theme-generator

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.

前端开发6.5kskills/theme-generator/SKILL.md

Install

Send this to Claude Code, Codex or Cursor. The agent checks the Skill for safety first and installs it only after you confirm.

读取 https://funcoding.ai/skills/htmlstreamofficial/preline/theme-generator/install.md ,按里面的步骤帮我安装这个 Skill。

SKILL.md

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

Similar Skills

frontend-design
anthropics/skills180k

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Frontend

web-artifacts-builder
anthropics/skills180k

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Frontend

performance-optimization
addyosmani/agent-skills103k

performance-optimization

Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.

Frontend

api-and-interface-design
addyosmani/agent-skills103k

api-and-interface-design

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

Frontend

frontend-ui-engineering
addyosmani/agent-skills103k

frontend-ui-engineering

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

Frontend

email-marketing
nexu-io/open-design100k

email-marketing

A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".

Frontend