用途
sgds-workflow 是一个用于 SGDS（Singapore Design System，新加坡设计系统）的导航型技能。它的作用是梳理可用的 SGDS 技能，并说明它们的阅读与使用顺序。当不确定该用哪个技能，或需要理解各技能之间如何配合时，从这里开始。
适用触发条件：使用 @govtechsg/sgds-web-component 构建 UI，或用户提及 SGDS 或 Singapore Design System。
新应用的工作流程
如果是新应用，按阶段依次推进，每个阶段内按需阅读被引用的技能。
阶段 1 — 项目设置（始终最先执行）
阅读 sgds-getting-started。该技能涵盖：Inter 字体、CSS 导入顺序（themes/day.css → css/sgds.css → css/utility.css）、组件注册，以及两种应用布局模板（简单应用与侧边栏应用）。在编写任何组件或页面代码之前，须完成该技能中的全部四个步骤。
阶段 2 — 构建 UI（按需并行阅读）
这些技能是构建过程中的日常参考，会频繁切换，按当前正在构建的内容阅读相关技能即可。
- sgds-components — 覆盖所有 <sgds-*> Web Component（从 accordion 到 tooltip）。在用纯 HTML 构建任何东西之前先查这里；如果存在满足需求的 SGDS 组件，就使用该组件。
- sgds-utilities — 所有 sgds: 前缀的 Tailwind 工具类：间距、布局网格、排版、颜色、边框、不透明度。用于组件之间及其周围的布局、间距与样式。
- Application Shell — 强制性的页面外框与布局模板（简单应用与侧边栏应用），包含吸顶头部、侧边栏列宽以及容器类参考。当 sgds-getting-started 第 4 步信息不足时阅读。
- sgds-theming（可选）— 品牌色覆盖、夜间/深色模式与字体自定义。当应用需要超出默认 SGDS 风格的视觉定制时，与上述技能一起阅读；如果默认样式可接受则跳过。
阶段 3 — 组装页面与区块（构建完整页面或区块时）
- sgds-blocks — 用于页面区块与布局的可复用 UI 区块。包含：hero 区块、CTA、功能区块、卡片网格、统计展示、页面头部、过滤器、表单、详情卡片、应用外框以及自定义区块。当用户要求构建落地页、仪表盘、某个页面区块（如“我需要一个行动号召”），或请求任何页面布局时，从这里开始。
- sgds-patterns — 用于一致文本样式的排版与文本模式：标题、展示文本、内容头部、列表与段落。用于为内容文本设置样式、创建文本层级，或用户提到“做一个好看的标题”“给页面文本设置样式”时。
- sgds-templates — 现成的整页布局：仪表盘、登录、表单页、列表页、设置。当用户要求构建完整页面时，从这里开始。
- sgds-forms — 表单提交、约束校验、hasFeedback、setInvalid 与 FormData。当涉及任何使用 SGDS 组件的 <form> 时阅读。
阶段 4 — 数据可视化（如果需要图表或仪表盘）
阅读 sgds-data-visualisation。该技能涵盖 ECharts 设置以及将 SGDS 调色板应用于图表。仅当应用包含图表、图形或数据仪表盘时才需要。
已有应用的处理方式
不要重新阅读设置类技能，直接前往覆盖当前任务的技能。
快速检查 — 如果工具类或组件看起来异常，先确认设置是否完整，再处理其他问题：
- 在主 CSS 文件中按顺序导入 themes/day.css → css/sgds.css → css/utility.css；
- utility.css 由 Tailwind 处理（不是作为普通 JS import 导入）；
- JS 入口点中存在 import "@govtechsg/sgds-web-component"。
如果确认设置正确，则按下表导航。
技能映射表 — 每项任务该读什么
| 需要做的事 | 应阅读的技能 |
|---|---|
| 从零搭建新的 SGDS 项目 | sgds-getting-started |
| 使用任意 <sgds-*> 组件 | sgds-components |
| 应用间距、颜色、排版、布局工具类 | sgds-utilities |
| 构建应用外框（masthead、mainnav、footer、容器） | Application Shell |
| 更改品牌色、启用深色模式、更改字体 | sgds-theming |
| 构建页面区块：hero、CTA、卡片、功能、统计、过滤器、表单或自定义区块 | sgds-blocks |
| 设置文本样式：标题、展示文本、列表、段落 | sgds-patterns |
| 构建完整页面（仪表盘、登录、列表、表单、设置） | sgds-templates |
| 添加表单校验、读取 FormData、使用 setInvalid | sgds-forms |
| 添加图表、图形或数据仪表盘 | sgds-data-visualisation |
面向 AI Agent 的说明
- 当用户说“我正在构建一个新的 SGDS 应用”或“我该从哪里开始”时，始终先阅读 sgds-getting-started（阶段 1），再阅读其他任何技能。
- 在阶段 2，不要一次性预读全部三个技能：需要组件时读 sgds-components，需要样式/布局时读 sgds-utilities。它们是参考资料，不是顺序阅读。
- sgds-theming 属于阶段 2：在需要品牌化、深色模式或字体自定义时，与 components 和 utilities 并行阅读，不要将其视为独立的顺序步骤。
- sgds-blocks 与 sgds-patterns 是阶段 3 的并行技能，按用户请求按需阅读（区块用于页面区块，patterns 用于文本样式）。
- sgds-templates 与 sgds-blocks 可独立使用或一起使用——用户可能只需要其中一个、两个都要，或都不需要，取决于其进度。
- 仅当涉及 <form> 元素时才需要 sgds-forms，不要为非表单 UI 主动阅读。
- 仅当明确要求图表或图形时才需要 sgds-data-visualisation。
- 对于已有应用，使用技能映射表直接导航。除非出现设置问题，不要重新阅读 sgds-getting-started。
- 如果用户请求不能明确匹配任何技能，先阅读此工作流技能以定位，再导航到合适的技能。
限制与约束
绝不使用 style 属性或内联 CSS。所有样式都必须通过 class 属性、使用来自 sgds-utilities 的 sgds: 工具类来应用。当 sgds:mt-4 已存在时写入 style="margin-top: 16px" 属于违规行为。
关于各技能内部的组件清单、类名明细、主题变量、模板内容与 ECharts 配置等具体细节，本技能仅提供引用，资料未在此处展开。是否收费、价格、平台支持范围等信息暂未提供。