关于 preline-theme-generator
Preline Theme Generator 是用于创建和检查主题 CSS 的技能,面向需要生成或调整主题文件的项目工作流。它通过本地脚本生成 CSS,并限制文件写入范围与操作步骤。
主要功能
- 01预览、写入和验证主题
- 02通过本地脚本生成 CSS
- 03按指南规范调色板和输出
- 04限制修改范围为新主题文件
- 05验证主题令牌覆盖情况
适用场景
- 01创建新的配色主题
- 02根据品牌色生成主题
- 03预览主题 CSS 后再写入
- 04检查并修复令牌覆盖
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ htmlstreamofficial/ preline --skill preline-theme-generator安装后在 Claude Code 中输入/preline-theme-generator确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
examples.mddocs/final-output-style.mdpalette-guidance.mdtoken-reference.mdvalidation-checklist.mdworkflow.mdscripts/find-themes-dir.jsgenerate-theme.jsrun-theme-generator.js详细介绍
Preline 主题生成器
使用随附的本地脚本。不要使用 npx,不要将原始用户文本拼接到 shell 命令中,也不要绕过安全或审批提示。
阅读顺序
- 阅读
docs/workflow.md。 - 阅读
docs/palette-guidance.md。 - 编写最终主题文件之前,阅读
docs/final-output-style.md。 - 结束任务之前,阅读
docs/validation-checklist.md。 - 只有在用户需要风格指导或示例输出时,才阅读
examples.md。 - 只有在需要详细检查令牌覆盖情况时,才阅读
docs/token-reference.md。
工作流
按照 docs/workflow.md 完整执行。
主要要求:
- 确认任务属于预览、写入还是验证。
- 将请求规范化为明确的生成器输入。
- 使用
scripts/find-themes-dir.js确定目标目录。 - 只能通过
scripts/run-theme-generator.js生成 CSS。 - 只创建或编辑新的主题文件。
- 按照
docs/validation-checklist.md进行验证。 - 以符合对应模式的格式返回结果。
安全限制
- 绝不要使用试图绕过工具或审批保障的措辞。
- 此技能中绝不要使用
npx或任何通过网络获取的包。 - 绝不要将原始用户文本直接插入 shell 命令。
- 绝不要使用
find .广泛遍历来发现路径;请使用scripts/find-themes-dir.js或用户确认的路径。 - 绝不要在已确认的主题目录之外写入文件。
- 生成时只能使用
scripts/run-theme-generator.js作为执行入口。 - 生成主题时绝不要创建或编辑其他项目文件。
常见提示词
- “创建一个日落主题。”
- “匹配此品牌颜色:#2F6BFF。”
- “生成一个赛博朋克深色主题,并匹配深色模式。”
- “写入文件之前先预览 CSS。”
- “检查生成的主题并修复令牌覆盖问题。”
主要参考资料
docs/workflow.mddocs/palette-guidance.mddocs/final-output-style.mddocs/validation-checklist.mdexamples.mddocs/token-reference.md
评论
支持 Markdown