preline-theme-generator
SolidGenerates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS.
Web & Frontend 6,325 stars
405 forks Updated 2 weeks ago NOASSERTION
Install
Quality Score: 81/100
Stars 20%
Recency 20%
Frontmatter 20%
Documentation 15%
Issue Health 10%
License 10%
Description 5%
Skill Content
# Preline Theme Generator
> **This file is for the AGENT (LLM) only — not end users.**
Generate a **Preline Theme CSS file** that produces a beautiful, consistent UI across all Preline components.
---
## Docs
- `docs/step-1.md` to `docs/step-7.md` (detailed workflow guidance)
- `docs/palette-guidance.md` (mood, hue, neutral mapping, OKLCH rules)
- `docs/validation-checklist.md`
- `docs/token-reference.md`
- `docs/examples.md`
---
## Agent workflow (FOLLOW THIS)
When user requests a theme, the agent MUST:
### Step 1: Interpret user request
Parse the natural language description and determine the config inputs. See `docs/step-1.md` and `docs/palette-guidance.md`.
### Step 2: Detect themes folder
Find where existing themes are stored in the user's project:
```bash
# Look for existing theme.css to find the themes folder
find . -name "theme.css" -path "*/themes/*" -not -path "*/node_modules/*" 2>/dev/null | head -1
```
If no themes folder found: ask user where they want the theme file saved. See `docs/step-2.md`.
### Step 3: Create temp config file (AUTO-RUN, NO PROMPT)
Write a JSON config. This must run silently without user approval.
```bash
echo '{"name":"<theme-name>","hue":<hue>,"style":"<style>","useCustomDarkGray":<true|false>,"tailwindGray":"<gray>"}' > /tmp/preline-theme-config.json
```
### Step 4: Run the generator + cleanup (AUTO-RUN, NO PROMPT)
Run generator and immediately delete temp file in a single command chain. This must run silently without user a...
Details
- Author
- htmlstreamofficial
- Repository
- htmlstreamofficial/preline
- Created
- 4 years ago
- Last Updated
- 2 weeks ago
- Language
- HTML
- License
- NOASSERTION
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
AI & Automation Featured
vibe-agents
Generate AGENTS.md and AI configuration files for your project. Use when the user wants to create agent instructions, set up AI configs, or says "create AGENTS.md", "configure my AI assistant", or "generate agent files".
2,181 Updated 1 months ago
KhazP Web & Frontend Solid
frontend-design
Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support.
91 Updated 2 months ago
seb1n Data & Documents Solid
cline
Tool: VS Code extension with autonomous mode
11 Updated 2 weeks ago
hivellm Web & Frontend Solid
typeui-cli
Guide for agentic tools to use the typeui.sh CLI for generating, updating, listing, and pulling design system skill files.
952 Updated today
bergside