Menu
Starting point for any new application built with the SGDS web component library. Apply this skill first whenever a user is bootstrapping a new SGDS project, setting up a new app, or asking where to begin with SGDS. Covers font setup, foundation CSS, utilities, components, and app layout in the correct order.
Complete reference for all SGDS web components including installation and framework integration. Use when users ask about any <sgds-*> component — accordion, alert, badge, breadcrumb, button, card, checkbox, close-button, combo-box, datepicker, description-list, divider, drawer, dropdown, file-upload, footer, icon, icon-button, icon-card, icon-list, image-card, input, link, mainnav, masthead, modal, overflow-menu, pagination, progress-bar, quantity-toggle, radio, select, sidebar, sidenav, skeleton, spinner, stepper, subnav, switch, system-banner, tab, table, table-of-contents, textarea, thumbnail-card, toast, or tooltip. Also covers React 19+, React ≤18, Vue, Angular, and Next.js integration.
Use this skill when users ask about form validation in SGDS, hasFeedback prop, constraint validation, custom validation, noValidate, setInvalid, form submission, or reading FormData from SGDS form components.
Complete reference for all SGDS utility classes with the sgds: prefix. Use when users ask about setup, background-color, text-color, border-color, border-width, border-radius, typography, spacing, grid, dimension, opacity, color-semantics, or any sgds: Tailwind utility class. Also covers Tailwind v4 imports, theme switching, and framework integration for utilities.
Complete catalog of page layout patterns for SGDS applications. Use this skill whenever a user asks about page layouts, content arrangement, aside panels, split views, sidebar layouts, breadcrumb layouts, or viewport-height layouts — even if they just say 'how should I lay out my page' or 'I need a two-column layout'. Covers Full Width layouts (public-facing pages with sgds-container) and With Sidebar layouts (dashboards/internal tools with sgds-container-sidebar). Trigger on: layout, aside, split view, sidebar layout, two-column, three-column, content arrangement, page structure with aside.
Writes Storybook stories following the templates folder pattern with automatic file concatenation. Use when creating or updating component stories in stories/component-templates/, organizing story variants, or documenting component usage in Storybook.
Reusable UI blocks for building full SGDS pages and sections. Use this skill whenever the user wants to build pages, design layouts, create sections, or compose multiple sections together. Trigger on ANY mention of: app layout, application shell, page structure, hero sections, CTAs (call-to-action), cards, card grids, feature sections, product benefits, statistics displays, metrics, page headers, page titles, filter interfaces, search filters, data tables, forms, landing pages, dashboards, sidebar navigation, or any major page component — even if they don't name it a 'block'. Also use for: 'I need a filter', 'build a form', 'create a call to action', 'design a landing page', 'show statistics', 'sidebar layout', or similar requests for page-level UI. These are drop-in sections and shell structures, not full pages. Compose them with sgds-templates to build complete pages.
| name | sgds-getting-started |
| description | Starting point for any new application built with the SGDS web component library. Apply this skill first whenever a user is bootstrapping a new SGDS project, setting up a new app, or asking where to begin with SGDS. Covers font setup, foundation CSS, utilities, components, and app layout in the correct order. |
| metadata | {"author":"singapore-design-system","version":"0.0.0","audience":"external","category":"setup"} |
New to SGDS? See sgds-workflow for the full skill map and reading order before continuing.
When building any application with the SGDS web component library, complete these four steps in order before writing any component or page code.
SGDS foundation styles use the Inter typeface by default. Add the Google Fonts import to the <head> of your HTML document before any SGDS CSS. The URL below loads only the four weights defined by the SGDS design tokens (300, 400, 600, 700) in both normal and italic styles.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,600;0,14..32,700;1,14..32,300;1,14..32,400;1,14..32,600;1,14..32,700&display=swap"
rel="stylesheet"
/>
</head>
Import these files in your project's main CSS entry point (the file processed by your build tool):
/* e.g. globals.css, index.css, main.css */
/* 1. Theme tokens — must come first */
@import "@govtechsg/sgds-web-component/themes/day.css";
/* Optional — add only if supporting dark/night mode */
@import "@govtechsg/sgds-web-component/themes/night.css";
/* 2. Foundation styles (typography, headings, body, grid) */
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* 3. Utility classes (sgds: prefix) — must be processed by Tailwind */
@import "@govtechsg/sgds-web-component/css/utility.css";
utility.css contains Tailwind v4 directives and must be processed by your Tailwind pipeline — it cannot be imported as a plain JS import.
For full details on utility class setup, see sgds-utilities.
Import the component library once at your app entry point (JS/TS):
import "@govtechsg/sgds-web-component";
This registers all <sgds-*> custom elements globally.
For React, Vue, Angular, and Next.js-specific integration details, see sgds-components.
Every SGDS application should be structured using one of the two recommended layout templates. Choose based on your app type:
| App type | Layout | Container class |
|---|---|---|
| Public-facing, general-purpose | Simple App | .sgds-container |
| Internal tool, dashboard, transactional | Sidebar App | .sgds-container-sidebar |
Simple App (public-facing):
<div>
<sgds-masthead fluid></sgds-masthead>
<sgds-mainnav fluid>
<strong slot="brand">My App</strong>
</sgds-mainnav>
</div>
<div class="sgds:flex sgds:flex-col sgds:w-full">
<div class="sgds-container sgds:py-2-xl">
<!-- Page content -->
</div>
<sgds-footer></sgds-footer>
</div>
Sidebar App (dashboards / internal tools):
<div class="sgds:sticky sgds:top-0">
<sgds-masthead fluid></sgds-masthead>
<sgds-mainnav fluid>
<strong slot="brand">My App</strong>
</sgds-mainnav>
</div>
<div class="sgds:flex sgds:flex-row">
<div class="sgds:sticky sgds:h-[calc(100vh-108px)] sgds:overflow-y-scroll sgds:top-27 sgds:w-68 sgds:border-r sgds:border-muted">
<!-- Sidebar navigation -->
</div>
<div class="sgds:flex sgds:flex-col sgds:w-full">
<div class="sgds-container-sidebar sgds:py-2-xl">
<!-- Page content -->
</div>
<sgds-footer></sgds-footer>
</div>
</div>
For full layout details and responsive container breakpoints, see Application Shell.
Component-first rule: Before building any UI element with plain HTML and utility classes, always check whether an SGDS web component already covers the need. Consult the components-* skills first. Only fall back to custom markup when no SGDS component exists for the use case.
<link> tags must go in the HTML <head> — not in CSS or JS imports. For font customisation or theming, refer to sgds-theming.themes/day.css → css/sgds.css → css/utility.css. The theme file must come first so CSS variable tokens are available when foundation and utility styles are processed.css/utility.css must be imported inside a CSS file processed by Tailwind v4 — importing it directly in JavaScript will not generate the sgds: utility classes.import "@govtechsg/sgds-web-component" registers all components. Do not import individual components unless explicitly doing tree-shaking..sgds-container (simple app) or .sgds-container-sidebar (sidebar app) — never use raw sgds:max-w-* utilities to replicate container behaviour.