Browse AI

AI

NEW

Introduction

Agent skills

Use AI with SGDS

Figma workflows

Development workflows

Prompt tips

Setup instructions

SGDS skills are instruction files that give compatible AI coding tools clearer design system context.

Setup instructions

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.

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.

Once installed, you can ask things like:

💬 "Build a sidebar dashboard layout using SGDS"

💬 "What spacing utility class should I use between these cards?"

💬 "How do I prevent a modal from closing when clicking the background?"

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.

Skills CLI

GovTech CLI

Setup GT CLI

Install the GovTech developer CLI. This is available to GovTech Singapore only.

GT CLI setup guide

Install SGDS web component package

Run the following command if the SGDS web component package is not installed:

Bash

Copy

$	npm i @govtechsg/sgds-web-component

Install the SGDS agent skills

Run the GT CLI installer in your project root:

Bash

Copy

$	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:

Bash

Copy

$	gt apd install gto-desp

This keeps the installed SGDS agent skills aligned with the latest workflow, setup guidance, and component instructions.

Install Node.js

Install Node.js (v20 or later) which includes npx.

Download Node.js

Install SGDS web component package

Run the following command if the SGDS web component package is not installed:

Bash

Copy

$	npm i @govtechsg/sgds-web-component

Install the SGDS agent skills

Run the SGDS agent skills installer in your project root:

Bash

Copy

$	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:

Bash

Copy

$	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 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.

Skill

What it covers

sgds-workflow

Start here when unsure. Maps all SGDS agent skills, when to use them, and the order to read them in.

sgds-getting-started

Mandatory first step for new apps: font setup, CSS import order, component registration, and app layout.

sgds-components

All 47 <sgds-*> web components, including attributes, slots, events, and framework integration (React 19+, React ≤18, Vue, Angular, Next.js).

sgds-utilities

All sgds: Tailwind utility classes: grid, spacing, typography, colours, borders, and more.

sgds-theming

Brand colour overrides, dark mode setup, and font customisation. Read alongside components and utilities when needed.

sgds-forms

Form validation, constraint validation, FormData, and setInvalid.

sgds-patterns

Typography and content patterns for headings, display text, paragraphs, lists, and page text hierarchy.

sgds-layouts

Page layout patterns that define content arrangement for public-facing pages and internal tools and dashboards.

sgds-blocks

Reusable page sections such as hero sections, cards, feature blocks, statistics, filters, forms, and calls to action.

sgds-templates

Ready-made full-page layouts for common product flows such as dashboards, login pages, list pages, forms, and settings.

sgds-data-visualisation

Charts and dashboards using ECharts with the SGDS colour palette.

sgds-writing

SGDS writing guidance for clear, direct, and consistent documentation, UI copy, labels, and prompts.

Where do I start?

New project

Starting from scratch?

Work through these skills in order — each one builds on the last.

sgds-getting-started

Fonts, CSS, and component setup

sgds-components + sgds-utilities

Your day-to-day building references

sgds-pattern-page-templatessgds-pattern-block-templates

Assembling full pages and layout blocks

sgds-forms

Whenever a form is involved

sgds-data-visualisation

Only for charts or dashboards

Existing app

Already 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.

AI

Setup instructions

Setup instructions ​

Setup GT CLI

Install SGDS web component package

Install the SGDS agent skills

Select the full skill set

Keep the agent skills updated

Install Node.js

Install SGDS web component package

Install the SGDS agent skills

Select the full skill set

Keep the agent skills updated

Available skills

Where do I start? ​

Singapore Government Design System

Setup instructions

Where do I start?