UNPKG

preline

Version:

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

preline.co

htmlstreamofficial/preline

59 lines (44 loc) • 2.47 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
--- name: preline-theme-generator 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. --- # 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`