AI
Overview
AI coding assistants can use SGDS agent skills for clearer design system context. Here is how to set them up.
What are agent skills?
If you have ever asked an AI assistant to help you build something, you may have received code that almost works: wrong component names, made-up class names, or outdated patterns.
Agent skills help with that. They are a set of instruction files you install into your project. Compatible AI coding tools can read them for clearer SGDS context, including the right components, tokens, utilities, and patterns.
If you're unsure where to begin, start with sgds-workflow. It maps the full SGDS skill set and points you to the right skill for the task at hand.
Once installed, you can ask things like:
The assistant still needs human review, but it starts with SGDS-specific context instead of relying on generic web examples.
Use these skills with compatible AI coding tools that can read local agent skill files.
Installation
It takes one command. Run it in your project root:
npx skills add govtechsg/sgds-web-componentWhen prompted, select all SGDS skills from the list. This creates a local .agents/ folder that compatible AI coding tools can read from your project.
Available skills
Each skill covers a different area of SGDS. You do not need to remember what is in them. 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-writingWhere do I start?
Starting from scratch?
Work through these skills in order — each one builds on the last.
sgds-getting-startedsgds-components + sgds-utilitiessgds-pattern-page-templatessgds-pattern-block-templatessgds-formssgds-data-visualisationAlready on SGDS v3?
Skip setup — jump to the skill that covers what you're building right now.
sgds-components
Building or modifying UI components
sgds-utilities
Spacing, layout, and helper classes
sgds-pattern-page-templates
Full-page layout work
sgds-pattern-block-templates
Self-contained UI blocks
sgds-forms
Any form-related work
sgds-data-visualisation
Charts or dashboards only
Not sure where to start? Ask your AI to read the sgds-workflow skill first — it will map out everything based on what you're building.
How it works
Skills are plain Markdown files written for AI assistants. The assistant reads them at query time. They do not add runtime code or dependencies to your product.
Each skill includes:
- A quick decision guide — helps the AI pick the right component or token
- An API summary — attributes, slots, and events in compact tables
- Usage examples — real HTML the AI can produce and adapt
- Rules for AI agents — explicit dos and don'ts to avoid common mistakes
Keeping skills up to date
After upgrading @govtechsg/sgds-web-component, refresh the SGDS skills installed in your project:
npx skills update --project -y