preline-theme-generator
Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Extract clinical trial data from pharmaceutical conference websites or PDF documents. Use when user provides a URL or PDF file containing innovative drug clinical trial data and needs structured extraction of: drug name, manufacturer, indication, clinical phase, trial name, conference, efficacy and safety data (presented as tables), and markdown output to "药品名称@适应症.md" file.
Use this skill when a clinician, practice manager, or healthcare developer needs to draft, structure, or retrieve clinical documentation — including SOAP notes, referral letters, prior authorization forms, discharge summaries, and care plan narratives. Connects to FHIR R4-compliant APIs (Epic, Cerner, Azure Health Data Services, HAPI FHIR) to pull structured patient data and generate documentation drafts. Also supports manual input when no EHR connection is available. DO NOT use for direct diagnosis, prescribing decisions, or any task requiring a licensed clinical judgment — this skill assists with documentation only.
Search clinical trial databases similar to ClinicalTrials.gov. Use this skill whenever the user asks about clinical trials, drug trials, indications, targets, drug names, trial phases, NCT IDs, enrollment, or recruitment. Automatically parses natural language questions into structured query parameters and calls the backend API to return matching trial records. Trigger words include: clinical trial, NCT, drug development, indication, target, phase, enrollment, recruitment, sponsor, cohort, arm, endpoint, efficacy, safety data.
Analyze ECG signals via heartvoice (心之声) API — single-lead and 12-lead. Automatically selects endpoint based on user intent and responds in the user's language. Use when user mentions ECG, 心电图, 心电分析, 单导联, 十二导联, 1-lead, 12-lead, heart rhythm, arrhythmia, QRS, QT interval, signal quality, or asks to analyze an ECG JSON file.
醫療文檔處理技能 - 病歷摘要、報告分析、醫學文獻整理。適用於醫生、醫療專業人員。觸發詞:病歷、醫療報告、醫學文獻、clinical notes、medical document、病歷摘要、出院小結、門診記錄。
医疗健康知识问答技能。用于帮助用户理解症状含义、解读检查报告结果、了解用药常识、提供何时就医的专业建议。当用户询问健康症状、药品说明、检查报告解读、就医建议等问题时触发此技能。
| name | preline-theme-generator |
| description | Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS. |
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/step-1.md to docs/step-7.md (detailed workflow guidance)docs/palette-guidance.md (mood, hue, neutral mapping, OKLCH rules)docs/validation-checklist.mddocs/token-reference.mddocs/examples.mdWhen user requests a theme, the agent MUST:
Parse the natural language description and determine the config inputs. See docs/step-1.md and docs/palette-guidance.md.
Find where existing themes are stored in the user's project:
# 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.
Write a JSON config. This must run silently without user approval.
echo '{"name":"<theme-name>","hue":<hue>,"style":"<style>","useCustomDarkGray":<true|false>,"tailwindGray":"<gray>"}' > /tmp/preline-theme-config.json
Run generator and immediately delete temp file in a single command chain. This must run silently without user approval.
Option A (preferred) - use npx if preline is installed:
npx preline-theme-generator /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Option B - find and run the script directly:
node $(find . -path "*/preline/skills/theme-generator/scripts/generate-theme.js" 2>/dev/null | head -1) /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Option C - if script location is known (e.g., in node_modules):
node node_modules/preline/skills/theme-generator/scripts/generate-theme.js /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Tell user the theme was created and show enable snippet:
/* In your main CSS file */
@import "./themes/<theme-name>.css";
<!-- On HTML element -->
<html data-theme="theme-<theme-name>">
See docs/step-5.md and docs/examples.md for response examples.
data-theme + optional .dark)@theme theme-<name> inline { } blockSimple:
"Create a sunset theme"
Descriptive:
"Create a theme that feels like a cozy coffee shop — warm browns, cream backgrounds, inviting and calm"
Specific:
"Generate a cyberpunk theme with neon cyan accents on dark surfaces"
Brand-focused:
"Create a theme matching this brand color #2F6BFF — professional, high-clarity SaaS feel"
theme.css. Always generate a separate theme file.Every generated theme file MUST begin with:
@import "./theme.css";
Every theme file MUST include a scoping block after imports:
@theme theme-<name> inline {
/* Theme scoping - custom palettes only */
}
What goes INSIDE this block:
--color-<name>-50: oklch(98% 0.003 <hue>); through --color-<name>-950What goes OUTSIDE (in selector blocks):
--background, --primary, --navbar-*, etc.)See docs/palette-guidance.md for palette construction details and examples.
data-theme="theme-<name>".dark if the project uses it; do not introduce new conventions.Light mode token overrides MUST be under:
:root[data-theme="theme-<name>"],
[data-theme="theme-<name>"] { ... }
Dark mode overrides MUST be theme-scoped and use:
[data-theme="theme-<name>"].dark { ... }
Because this generator is full-theme mode, output MUST define a comprehensive set of token values so the theme looks complete and intentional.
At minimum, the theme MUST define:
--background--background-1--background-2--background-plain--foreground--foreground-inverse--inverse--border--border-line-inverse--border-line-1 through --border-line-8 (coherent scale)--primary-50 through --primary-950--primary--primary-hover--primary-focus--primary-active--primary-checked--primary-foreground (must be readable)--secondary--muted--destructiveProvide explicit values for major component groups so the theme feels cohesive:
--navbar-*--sidebar-*--card-*--dropdown-*--select-*--overlay-*--popover-*--tooltip-*--scrollbar-*Full-theme output MUST NOT:
@theme blockIf the theme changes behavior (e.g. retro-sharp radii), it MUST be scoped to the theme only.
Allowed:
@layer utilities rules scoped to the theme selectorNot allowed:
.rounded { ... } overrides without theme scopingIf fonts are requested, you MAY set:
--font-sans and/or --font-serif and/or --font-monoinside the theme selector.
Do NOT add Google Fonts @import url(...) into the theme file unless the user explicitly requests it.
(Font loading typically belongs in the main CSS entry file.)
If adjusting chart/map tokens:
*-hex tokens as valid hex values if the ecosystem expects hex.oklch(...) where it may break gradients or third-party rendering.@import "./theme.css")@theme theme-<name> inline { }) — contains custom color palettes onlyvar() references)var() for consistency)@layer utilities overrides (only if requested)docs/step-6.md and docs/step-7.mddocs/palette-guidance.mddocs/validation-checklist.mddocs/token-reference.md