AI
Agent skills
Copy Markdown
Copy and paste this Markdown into your AI coding tool before asking it to build with SGDS.
| You are helping this project use the Singapore Government Design System (SGDS). |
| Follow these instructions before generating or editing SGDS code. |
| 1. Check whether @govtechsg/sgds-web-component is installed. If it is missing, run this in the project root: |
| ```bash |
| npm i @govtechsg/sgds-web-component |
| ``` |
| 2. Install the SGDS agent skills. Choose one install path: |
| Skills CLI, for most users: |
| ```bash |
| npx skills add govtechsg/sgds-web-component -y |
| ``` |
| GovTech CLI, for GovTech Singapore users: |
| ```bash |
| gt apd install gto-desp |
| ``` |
| Use the GovTech CLI path only if the user is from GovTech Singapore or the project already uses GT CLI. Otherwise, use the Skills CLI path. Do not run both paths unless the user asks for both. |
| 3. If prompted, select all SGDS skills. |
| 4. After installation, read this file first: |
| ```txt |
| .agents/skills/sgds-workflow/SKILL.md |
| ``` |
| 5. Follow the SGDS skills when generating or editing code: |
| - Use @govtechsg/sgds-web-component components where available. |
| - Use sgds: utility classes for layout, spacing, typography, and colours. |
| - Do not invent SGDS component names, utility classes, or design tokens. |
| - Do not use inline styles unless a runtime dynamic value is required. |
| - For new apps, follow sgds-getting-started before writing UI code. |
| - For existing apps, use sgds-workflow to pick the right skill for the task. |
SGDS agent skills give AI assistants task-specific instructions for building with the design system.
Agent skills are markdown instruction files that help compatible AI coding tools work with SGDS in a more consistent way. They explain which skills to read, which components and utilities to use, how SGDS pages are structured, and which rules to follow when generating design, code, or content.
They work like task-specific guidance for your assistant. When you ask for an SGDS app, page, component, form, chart, theme, or content change, the assistant can use the relevant skill before it makes decisions.
Why agent skills matter
AI assistants are strong at producing code quickly. They still need reliable context to choose the right component, utility class, token, layout, copy pattern, and implementation detail. Without that context, the output may look close while drifting from SGDS conventions.
SGDS agent skills make that context available at the point of work. They help the assistant use SGDS as the source of truth instead of inferring patterns from generic web examples.
With this context, the assistant can make better SGDS decisions before it writes code, reviews a page, or suggests an implementation approach.
How agent skills work
Agent skills are plain markdown files written for AI assistants. Each skill describes when it applies, what to read next, which SGDS APIs or utilities matter, and which common mistakes to avoid.
- Workflow guidance: when to use each skill and in what order
- Setup guidance: font setup, CSS import order, component registration, and utility CSS setup
- Component and utility references: SGDS web component APIs, slots, events, and utility classes
- Layouts, blocks, and templates: app shells, page sections, full-page templates, sidebar layouts, and reusable content structures
- Task rules: instructions for forms, theming, data visualisation, writing, and common implementation checks
Agent skills are read by the assistant at query time. They do not add runtime code to your product or replace human review.
What you can ask with agent skills installed
With the SGDS agent skills installed, you can describe the outcome you need and let the assistant select the relevant system guidance.
- "Set up a new Vite app with SGDS."
- "Build a sidebar dashboard layout using SGDS."
- "Choose the right SGDS spacing utility between these cards."
- "Review this form and align the validation with SGDS."
- "Rewrite this page copy using the SGDS writing guide."
The result should still be reviewed by a human. Agent skills reduce avoidable mistakes by giving the assistant clearer SGDS rules before it acts.
Setup GT CLI
Install the GovTech developer CLI. This is available to GovTech Singapore only.
Install SGDS web component package
Run the following command if the SGDS web component package is not installed:
| npm i @govtechsg/sgds-web-component |
Install the SGDS agent skills
Run the GT CLI installer in your project root:
| gt apd install gto-desp |
Select the full skill set
When prompted, select all skills from the list. This creates a local .agents/ folder that your AI tools pick up automatically.
Keep the agent skills updated
After upgrading @govtechsg/sgds-web-component, refresh the SGDS agent skills:
| gt apd install gto-desp |
This keeps the installed SGDS agent skills aligned with the latest workflow, setup guidance, and component instructions.
Install SGDS web component package
Run the following command if the SGDS web component package is not installed:
| npm i @govtechsg/sgds-web-component |
Install the SGDS agent skills
Run the SGDS agent skills installer in your project root:
| npx skills add govtechsg/sgds-web-component |
Select the full skill set
When prompted, select all skills from the list. This creates a local .agents/ folder that your AI tools pick up automatically.
Keep the agent skills updated
After upgrading @govtechsg/sgds-web-component, refresh the SGDS agent skills from the source repository:
| npx skills add govtechsg/sgds-web-component -y |
This keeps the installed SGDS agent skills aligned with the latest workflow, setup guidance, and component instructions.
Available SGDS agent skills
Each skill covers a different part of SGDS. This table reflects the SGDS skills currently shipped with this repository. You do not need to memorise the full set. The assistant can read the relevant skill when the task calls for it.
sgds-workflowsgds-getting-startedsgds-components<sgds-*> web components, including attributes, slots, events, and framework integration (React 19+, React ≤18, Vue, Angular, Next.js).sgds-utilitiessgds: Tailwind utility classes: grid, spacing, typography, colours, borders, and more.sgds-themingsgds-formsFormData, and setInvalid.sgds-patternssgds-layoutssgds-blockssgds-templatessgds-data-visualisationsgds-writingWhat agent skills cannot do
Agent skills guide the assistant. They do not replace product judgement, accessibility review, content review, or engineering review.
Treat AI output as a draft that starts closer to SGDS standards. Review the behaviour, visual fit, code quality, and content before shipping.