人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载beautiful-article是 garden-skills 中把用户素材编辑、设计成单文件 HTML 网页文章的 Skill而**脚手架scaffold**是在其 Phase 4First Spread创建文章工作区的唯一入口它把工程模板从 Skill 资产目录复制出来、接线并注入主题让工作区能独立于 Skill 仓库在任意目录运行。读完本文你将掌握scaffold.sh的全部参数与内部实现、生成的工作区结构、一个 Section 一个文件的铁律以及构建、预览、切主题、升级组件库的完整闭环。为什么需要脚手架工程代码不塞进 SKILL.md脚手架在 Phase 4 创建文章工作区其设计哲学是不把工程代码塞进 SKILL.md——SKILL.md 只描述工作流与决策节点真正的 Vite / React / TS 工程模板放在 Skill 的 assets 资产目录assets/scaffold-template/由 scripts/scaffold.sh 复制并接线。这样带来的直接好处Skill 与工程解耦工作区可建在任意目录不需要在某个固定仓库内模板可独立演进模板改动只需更新 assetsSKILL.md 无需跟着改零手工初始化目录、依赖、主题注入、封面开关全部由脚本一次性完成。用法三条命令创建文章工作区脚手架只有三条核心用法--list-themes、--theme、--no-cover可自由组合# 默认开封面用 tufte 主题 bash path-to-beautiful-article/scripts/scaffold.sh ./my-article --themetufte # 用 press 主题同时关闭书封式封面 bash path-to-beautiful-article/scripts/scaffold.sh ./brief --themepress --no-cover # 仅列出可用主题不创建任何目录 bash path-to-beautiful-article/scripts/scaffold.sh --list-themes其中path-to-beautiful-article指向当前仓库的skills/beautiful-article/目录。--theme必须是注册表中的 id--theme的值必须是 theme-profiles/index.json 里存在的 id。从脚本的theme_exists()实现看grep -Eq \id\...\$1\它直接对 index.json 做精确字段匹配不存在的 id 会立即报错并列出可用主题退出不会静默回退到默认主题。当前注册表包含 11 个主题idlabel气质典型适用tufteTufte · Data-Ink证据、数据、克制longform / full-report / explainerpressPress · 书卷 / 编辑出版、叙事、温暖essay / briefing / visual-essayshannonShannon · 暗色工程证据postmortem / system-design / benchmarkvignelliVignelli · 瑞士国际主义文档docs / spec / changelog / referenceknuthKnuth · 学术预印本paper / preprint / researchfreddieFreddie · 暖黄 / 友善explainer / tutorial / product-introandyAndy · 静谧 / 温柔wellness / onboarding / lifestylebodoniBodoni · 报刊 / Didone 高反差longform / essay / manifestobayerBayer · 包豪斯 / 三原色几何explainer / tutorial / brandfullerFuller · 蓝图 / 工程制图spec / system-design / rfcsottsassSottsass · 孟菲斯 / 80s 撞色explainer / tutorial / culture默认主题是tufte脚本里DEFAULT_THEMEtufte。每个主题还有配套的 authoring profile 文件theme-profiles/id.md写作时供 AI 阅读参考。--no-cover书封式文章封面开关封面默认开工作区会创建article/Cover.tsx书封式封面外壳屏幕 3:4 / PDF 独占首页。--no-cover用于关闭封面——典型场景是 Checkpoint 1 用户选了封面 · 关或文章类型为briefing/dialogue时详见 references/cover.md 的何时关闭封面一节简报类文章打开就是干货封面反而是阻力。脚手架内部做了什么源码级拆解读懂 scaffold.sh 的完整流程能让你对生成的每个文件从哪来、为什么存在心中有数。脚本全程使用set -euo pipefail严格模式任何一步失败都会中止。1. 参数解析与前置检查参数循环只认三类--list-themes列出后exit 0、--themeid、--no-cover/--cover未知--*参数直接报错第一个非--参数作为目标目录TARGET缺省值为my-article。目标目录检查若目标目录已存在且非空直接中止避免覆盖已有工作区。npm 检查command -v npm找不到时中止并提示需要 npm。2. 复制工程模板脚本把assets/scaffold-template/下的 5 个构建工装文件复制到目标目录cp $TEMPLATE/package.json $TARGET/package.json cp $TEMPLATE/vite.config.ts $TARGET/vite.config.ts cp $TEMPLATE/tsconfig.json $TARGET/tsconfig.json cp $TEMPLATE/tsconfig.node.json $TARGET/tsconfig.node.json cp $TEMPLATE/index.html $TARGET/index.html同时创建三个记忆目录source/ plan/ review/和文章源目录article/sections、article/raw-blocks、article/assets后两者用.gitkeep占位并复制main.tsx、Article.tsx、示例 section 组件01-opening.tsx封面开启时额外复制Cover.tsx。模板里的 package.json 值得注意依赖reacticle: latest组件库本身不锁版本开发依赖包含vite-plugin-singlefile——这正是单文件 HTML、断网可打开的关键预置五个 npm scriptdev预览、buildtsc --noEmit vite build、html构建后复制为交付物article/article.html、typecheck、preview。3. 注入主题 id模板中的main.tsx与Article.tsx各有一个__THEME__占位符。脚本用perl而非 sed避免转义问题做全局替换export RA_THEME$THEME perl -pi -e s/__THEME__/$ENV{RA_THEME}/g $TARGET/article/main.tsx perl -pi -e s/__THEME__/$ENV{RA_THEME}/g $TARGET/article/Article.tsx替换结果在 main.tsx 中是ThemeProvider themetufte之类的一行在 Article.tsx 末尾 colophon 中是· tufte theme。最后把主题名写入.theme文件作为起步主题的记录。4. 封面开关标记包裹区段的两种剥法模板main.tsx用四行__COVER_*__标记把封面相关代码夹住import 段和 render 段各一对。脚本据此做两种处理COVER1开只删掉标记行本身保留中间的import { Cover } from ./Cover与Cover /COVER0关用 perl 的-0pe多行模式把BEGIN..END之间的内容连同标记行整段剥掉封面完全不参与构建。这正是文档所说--no-cover时跳过这一步不复制 Cover.tsx并从 main.tsx 剥掉标记包裹的两段的源码实现。渲染顺序也因此确定Cover → ArticleDoc封面在Article之外、TOC 之上是兄弟节点而非被塞进正文栏。5. 安装依赖 typecheck 验证npm install # 按模板安装依赖 npm install reacticlelatest # 强制刷新到当下最新发布版第二步刻意重复安装一次reacticlelatest——即使将来模板带了 lockfile 也会强制刷新。随后脚本用 Node 读取node_modules/reacticle/package.json的 version 字段打印实际安装版本并跑一次npx tsc --noEmit确认接线无误typecheck 有问题会给出警告但不中止提示 dev / build 仍可能正常。依赖的自动传递katex/prismjs作为reacticle的依赖会被自动带下来工作区无需单独声明——这也是文档明确说明的点。工作区结构全景脚手架跑完后得到的目录结构如下以my-article为例my-article/ package.json vite.config.ts tsconfig.json tsconfig.node.json index.html source/ plan/ review/ article/ main.tsx # 入口ThemeProvider theme... Cover/ ArticleDoc/ Cover.tsx # 书封式文章封面屏幕 3:4 / PDF 独占首页默认--no-cover 时不生成 Article.tsx # assembler主 Agent 拥有import 排序各 Section不写 Section 正文 sections/ # 一节一文件铁律NN-*.tsx每个导出一个 Section 组件 01-opening.tsx raw-blocks/ # 大型 Raw 隔离NN-*.tsx assets/ # 配图素材 .theme # 记录起步主题一个 Section 一个文件铁律脚手架默认创建article/sections/01-opening.tsx示例这个命名方式NN-*序号前缀本身就是铁律的体现每个 Section 必须写成独立组件文件坚决不允许把多个 Section 直接写进Article.tsx。Article.tsx只做组装import 排序由主 Agent 拥有示例 01-opening.tsx 展示了 Section 组件的标准写法——Section index01 title...包裹正文段落语义组件Aside只作点缀Raw自由层为本段现写、用主题 token 取色。这条铁律是多 Agent 并行开发模式 BCheckpoint 2 选定的前提多个 subagent 各拥有一个sections/NN-*.tsx文件并行开发互不触碰主 Agent 负责合并与稳定性。colophon 印记不可删除Article.tsx末尾自带colophon Raw 块——文本固定为Made with beautiful-article链接到 github 仓库· 主题 theme样式是低对比小字、居中、走--ra-*token见模板中 marginTop 用var(--ra-space-7)、颜色用var(--ra-color-muted)等。这是文章的印记不可删除、不可移到 Hero 旁边或浮动到角落见 SKILL.md「默认策略」切主题时需同步更新其中的主题名。记忆目录Skill 的长期记忆source/源材料与 source.md、plan/单一规划文件 plan.md、review/first-spread-review.md / final-review.md 等质检产物是 Skill 决策的落盘位置脚手架创建它们是为了不依赖聊天上下文记决策。切换主题两处保持一致脚手架默认会把主题名注入到两个位置切主题时必须两处同步修改article/main.tsx里ThemeProvider theme...——控制运行时主题一个词tufte/press等article/Article.tsx末尾 colophon 的· 主题 theme——控制印记里显示的主题名。改完后npm run dev即可看到整篇含封面、Raw、语义组件跟随新主题刷新。这正是主题忠实约束的底层逻辑所有颜色、字号、间距都通过var(--ra-*)token 取主题值写死 hex / 字体名 / 像素值会让切主题失效。构建 / 预览 / 交付在工作区根目录执行的四个命令详见 references/html-output.md命令作用npm run dev启动 Vite 预览Phase 4 / 5 边写边看npm run buildtsc --noEmit类型检查 构建自包含单页 HTML 到dist/index.htmlCSS JS 内联TS 报错会让构建失败npm run html复用 build含类型检查再把单页 HTML 复制为交付物article/article.htmlnpm run typecheck仅类型检查单文件由 vite.config.ts 中的viteSingleFile()插件产出CSS JS 全部内联断网可打开、可分享——这是 Beautiful Article 的核心交付标准。升级组件库工作区随时可升级到最新组件库不需要重跑脚手架npm install reacticlelatest这与脚手架内部的安装逻辑一致保证文章始终构建在当下最新的reacticle发布版之上。封面默认开3:4 书封式题图脚手架默认创建的 Cover.tsx 是一个外壳 占位外壳固定aspectRatio: 3 / 4宽度受两条上限约束48rem硬上限 calc((100vh - 8rem) * 3 / 4)从视口高度反推保证一屏看全不用下拉CoverPlaceholder /是占位内容SVG 网格 accent 圆 居中标题文字Phase 4 时主 Agent 会把它替换为按主题 文章主旨定制的图文构图。references/cover.md 给出的 5 条硬约束正是脚手架默认外壳存在的原因3:4 屏幕 PDF 独占首页aspectRatio与 max-width / margin / border 不要动PDF 导出时pdf-print-overrides.css的 C 段负责封面后分页图文并茂禁止纯文字封面必须有视觉主体 至少一个标题主题忠实颜色 / 字号 / 字重只能用--ra-*token禁止写死 hex / 字体名 / 像素字号内容忠实封面视觉要呼应正文主旨让读者看一眼能猜出文章讲什么offline-first唯一硬禁项是远程图片img srchttps://...等base64 raster 仅当配图模式为user-assets/ai-generated才允许且必须内联。封面视觉用什么技术内联 SVG / CSS 几何 / Canvas / 复杂 React 组件 / 字体排版 / 多层混搭完全开放判定标准是眯眼看 3 秒——图 OK、气质对、切主题不废、打印不错位。封面与 Hero 是互补关系封面是视觉钩子 风格定调图主字辅Hero 是框定主题 读者收获文字栏两者不能做成同一件事。常见问题速查目标目录非空脚手架直接中止需另选空目录或清理后重试。未知主题 id立即报错并列出现有 11 个主题可用--list-themes随时查看。忘记封面开关--no-cover只影响本次脚手架已建工作区想开封面可手动复制模板 Cover.tsx 并恢复 main.tsx 的 import 与渲染。想改主题同步改main.tsx的ThemeProvider theme...和Article.tsxcolophon 两处然后npm run dev验证。PDF 导出先npm run html生成article/article.html再跑bash path-to-beautiful-article/scripts/html-to-pdf.sh脚本自动探测系统 chromium-family 浏览器、注入media print覆盖、headless 打印零 npm 依赖注意 Raw 交互在 PDF 里只渲染为初始态interactive-explainer类型是否导 PDF 由用户在 Checkpoint 3 决定。整套脚手架的设计闭环是一次命令 → 可运行的工作区 → 铁律约束的文件布局 → 可预览可构建可交付的单文件 HTML这也是beautiful-article从素材到成品能稳定推进的工程基础。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐create-snowpack-app 完全指南一条命令搭建 Snowpack 项目脚手架create snowpack app 完全指南一条命令搭建 Snowpack 项目脚手架 Snowpack 官方为开发者提供了 create snowpac前端开发工具前端构建create-tambo-app 零配置脚手架指南一条命令创建 Tambo 生成式 UI 应用create tambo app 零配置脚手架指南一条命令创建 Tambo 生成式 UI 应用 本文面向希望在 React 项目中快速接入 Tambo 生成式人工智能AI AgentAI 应用前端后端MCP 服务create-quasar 脚手架实战指南一条命令从零搭建 Quasar 应用与 App Extensioncreate quasar 脚手架实战指南一条命令从零搭建 Quasar 应用与 App Extension 本指南以 Quasar 官方脚手架工具 crea前端UI组件跨平台上一篇wger容器存储使用对象存储服务存储健身应用图片下一篇Windows系统终极优化指南RyTuneX完整安装配置教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考