Back to Details

sgds-workflow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SGDS Skill Workflow

SGDS技能工作流

This skill maps out the available SGDS skills and the order to use them. Start here when unsure which skill applies, or to understand how skills fit together.
本技能梳理了可用的SGDS技能及其使用顺序。当不确定适用哪个技能，或想了解技能间的关联时，请从此处开始。

Are you starting a new app or working on an existing one?

你是在启动新应用还是维护现有应用？

New Application

新应用

Work through these stages in order. Within each stage, read the referenced skills as needed.
请按以下阶段依次推进。每个阶段内，可根据需要阅读对应的技能文档。

Stage 1 — Project Setup (always first)

阶段1 — 项目设置（始终优先）

→ Read sgds-getting-started
Covers: Inter font, CSS import order (
themes/day.css
→ 
css/sgds.css
→ 
css/utility.css
), component registration, and the two app layout templates (simple app vs sidebar app).
Complete all four steps in this skill before writing any component or page code.
→ 阅读 sgds-getting-started
涵盖：Inter字体、CSS导入顺序（
themes/day.css
→ 
css/sgds.css
→ 
css/utility.css
）、组件注册，以及两种应用布局模板（简易应用 vs 侧边栏应用）。
在编写任何组件或页面代码前，请完成此技能中的全部四个步骤。

Stage 2 — Build the UI (read concurrently as needed)

阶段2 — 构建UI（按需同步阅读）

These skills are your day-to-day references while building. You will move between them frequently — read whichever is relevant to what you are building at any moment.
→ sgds-components — Every 
<sgds-*>
web component (accordion through tooltip). Check here first before building anything with plain HTML. If an SGDS component exists for your need, use it.
→ sgds-utilities — All 
sgds:
Tailwind utility classes: spacing, layout grid, typography, colors, borders, opacity. Use for layout, spacing, and styling between and around components.
→ Application Shell — Mandatory page chrome and layout templates (simple app and sidebar app) with sticky headers, sidebar column sizing, and container class reference. Read when 
sgds-getting-started
Step 4 is not enough detail.
→ sgds-theming (optional) — Brand colour overrides, night/dark mode, and font customisation. Read this alongside the above when the app requires visual customisation beyond the default SGDS style. Skip if the default style is acceptable.
这些技能是你日常开发中的参考文档。你会经常在它们之间切换——根据当前构建内容阅读对应的技能即可。
→ sgds-components — 所有
<sgds-*>
Web组件（从折叠面板到提示框）。在使用纯HTML构建任何内容前，请先查看此处。如果已有满足需求的SGDS组件，请优先使用。
→ sgds-utilities — 所有
sgds:
Tailwind工具类：间距、布局网格、排版、颜色、边框、透明度。用于组件之间及组件周围的布局、间距和样式设置。
→ Application Shell — 强制要求的页面框架和布局模板（简易应用和侧边栏应用），包含粘性头部、侧边栏列宽设置及容器类参考。当
sgds-getting-started
的步骤4不够详细时，请阅读此文档。
→ sgds-theming（可选）—— 品牌颜色覆盖、夜间/暗黑模式及字体自定义。当应用需要超出SGDS默认样式的视觉定制时，请结合上述技能阅读此文档。若默认样式可满足需求，则可跳过。

Stage 3 — Assemble Pages and Blocks (when building full pages or sections)

阶段3 — 组装页面和区块（构建完整页面或页面区块时）

→ sgds-blocks — Reusable UI blocks for page sections and layouts. Includes: hero sections, CTAs, feature blocks, card grids, statistics displays, page headers, filters, forms, detail cards, application shell, and custom blocks. Start here when a user asks to build a landing page, dashboard, specific page section like "I need a call to action", or requests any page layout.
→ sgds-patterns — Typography and text patterns for consistent text styling: headings, display text, content headers, lists, and paragraphs. Use when styling content text, creating text hierarchies, or the user mentions "make a nice heading" or "style the page text".
→ sgds-templates — Ready-made full-page layouts: dashboard, login, form page, list page, settings. Start here when a user asks to build a complete page.
→ sgds-forms — Form submission, constraint validation, 
hasFeedback
, 
setInvalid
, and 
FormData
. Read when any 
<form>
with SGDS components is involved.
→ sgds-blocks — 用于页面区块和布局的可复用UI区块。包括：英雄区、CTA、功能区块、卡片网格、数据统计展示、页面头部、筛选器、表单、详情卡片、应用框架及自定义区块。当用户要求构建着陆页、仪表盘、特定页面区块（如“我需要一个呼叫行动区”）或任何页面布局时，请从此处开始。
→ sgds-patterns — 用于保持文本样式一致性的排版和文本模式：标题、展示文本、内容标题、列表及段落。当设置内容文本样式、创建文本层级，或用户提及“制作美观的标题”“设置页面文本样式”时使用。
→ sgds-templates — 现成的完整页面布局：仪表盘、登录页、表单页、列表页、设置页。当用户要求构建完整页面时，请从此处开始。
→ sgds-forms — 表单提交、约束验证、
hasFeedback
、
setInvalid
及
FormData
。当涉及使用SGDS组件的
<form>
表单时，请阅读此文档。

Stage 4 — Data Visualisation (if charts or dashboards are needed)

阶段4 — 数据可视化（需要图表或仪表盘时）

→ Read sgds-data-visualisation
Covers ECharts setup and applying the SGDS colour palette to charts. Only needed if the app includes charts, graphs, or data dashboards.
→ 阅读 sgds-data-visualisation
涵盖ECharts设置及为图表应用SGDS配色方案。仅当应用包含图表、图形或数据仪表盘时需要。

Existing Application

现有应用

Do not re-read setup skills. Go directly to the skill that covers the current task.
Quick check — if utilities or components look broken, verify setup is complete before anything else:
  • themes/day.css
    → 
    css/sgds.css
    → 
    css/utility.css
    imported in that order in the main CSS file
  • utility.css
    is processed by Tailwind (not imported as a plain JS import)
  • import "@govtechsg/sgds-web-component"
    present in the JS entry point
If setup is confirmed correct, navigate using the table below.
无需重新阅读设置类技能。直接跳转到涵盖当前任务的技能即可。
快速排查——若工具类或组件显示异常，请先确认设置是否完整：
  • 主CSS文件中按
    themes/day.css
    → 
    css/sgds.css
    → 
    css/utility.css
    的顺序导入
  • utility.css
    由Tailwind处理（而非作为普通JS导入）
  • JS入口文件中存在
    import "@govtechsg/sgds-web-component"
若确认设置无误，请根据下表导航。

Skill Map — What to Read for Each Task

技能映射表——不同任务对应的技能

What you need to doSkill to read
Set up a new SGDS project from scratchsgds-getting-started
Use any 
<sgds-*>
component		sgds-components
Apply spacing, colors, typography, layout utilitiessgds-utilities
Structure the app shell (masthead, mainnav, footer, containers)Application Shell
Change brand color, enable dark mode, change fontsgds-theming
Build page sections: hero, CTA, cards, feature, stats, filter, form, or custom blockssgds-blocks
Style text: headings, display text, lists, paragraphssgds-patterns
Build a full page (dashboard, login, list, form, settings)sgds-templates
Add form validation, read FormData, use 
setInvalid
sgds-forms
Add charts, graphs, or data dashboardssgds-data-visualisation
你需要完成的任务需阅读的技能
从零开始搭建新的SGDS项目sgds-getting-started
使用任何
<sgds-*>
组件		sgds-components
应用间距、颜色、排版、布局工具类sgds-utilities
构建应用框架（页头、主导航、页脚、容器）Application Shell
修改品牌颜色、启用暗黑模式、更换字体sgds-theming
构建页面区块：英雄区、CTA、卡片、功能区、数据统计、筛选器、表单或自定义区块sgds-blocks
设置文本样式：标题、展示文本、列表、段落sgds-patterns
构建完整页面（仪表盘、登录页、列表页、表单页、设置页）sgds-templates
添加表单验证、读取FormData、使用
setInvalid
sgds-forms
添加图表、图形或数据仪表盘sgds-data-visualisation

For AI Agents

针对AI Agent的说明

  1. When a user says "I'm building a new SGDS app" or "where do I start", always begin with sgds-getting-started (Stage 1) before reading any other skill.
  2. During Stage 2, do not read all three skills upfront — read sgds-components when a component is needed and sgds-utilities when styling/layout is needed. They are references, not sequential reads.
  3. sgds-theming is part of Stage 2 — read it concurrently with components and utilities when branding, dark mode, or font customisation is needed. Do not treat it as a separate sequential step.
  4. sgds-blocks and sgds-patterns are concurrent Stage 3 skills — read them as needed based on user requests (blocks for page sections, patterns for text styling).
  5. sgds-templates and sgds-blocks can be used independently or together — a user may need one, both, or neither depending on how far along they are.
  6. sgds-forms is only needed when a 
    <form>
    element is involved. Do not proactively read it for non-form UIs.
  7. sgds-data-visualisation is only needed when charts or graphs are explicitly requested.
  8. For existing apps, use the Skill Map table to navigate directly. Do not re-read sgds-getting-started unless there is a setup problem.
  9. If a user's request does not clearly match any skill, read this workflow skill first to orient, then navigate to the appropriate skill.
  10. Never use 
    style
    attributes or inline CSS.     All styling must be applied via 
    class
    attributes using 
    sgds:
    utility classes from sgds-utilities. Writing 
    style="margin-top: 16px"
    when 
    sgds:mt-4
    exists is a violation.
  1. 当用户说“我正在构建新的SGDS应用”或“我该从哪里开始”时，务必先从sgds-getting-started（阶段1）开始，再阅读其他技能。
  2. 在阶段2，无需预先阅读全部三个技能——需要组件时阅读sgds-components，需要样式/布局时阅读sgds-utilities。它们是参考文档，而非按顺序阅读的内容。
  3. sgds-theming属于阶段2的内容——当需要品牌定制、暗黑模式或字体自定义时，可结合组件和工具类技能同步阅读。不要将其视为单独的顺序步骤。
  4. sgds-blocks和sgds-patterns是阶段3的并行技能——根据用户需求按需阅读（区块用于页面部分，模式用于文本样式）。
  5. sgds-templates和sgds-blocks可独立使用或结合使用——用户可能需要其中一个、两个都需要，或都不需要，具体取决于开发进度。
  6. sgds-forms仅在涉及
    <form>
    元素时需要。不要为非表单UI主动阅读此技能。
  7. sgds-data-visualisation仅在明确要求图表或图形时需要。
  8. 对于现有应用，请使用技能映射表直接导航。除非存在设置问题，否则无需重新阅读sgds-getting-started。
  9. 如果用户的请求与任何技能都不明确匹配，请先阅读此工作流技能以明确方向，再导航到合适的技能。
  10. 切勿使用
    style
    属性或内联CSS    。所有样式必须通过
    class
    属性使用sgds-utilities中的
    sgds:
    工具类来应用。当
    sgds:mt-4
    可用时，编写
    style="margin-top: 16px"
    属于违规操作。