SGDS Utilities Overview Skill

The skills in this category represent the foundational styles of the Singapore Government Design System (SGDS) — covering spacing, color, typography, borders, and visual effects as defined in the design system's token architecture.

From a developer perspective, these foundational styles are exposed as the Utilities API: a set of atomic classes powered by Tailwind v4, scoped under the sgds: prefix. Developers apply SGDS design decisions directly in markup using this syntax rather than writing custom CSS.

Getting Started

First: Complete setup using the sgds-utilities-setup skill.

All SGDS utility classes use the sgds: prefix (Tailwind v4 @theme syntax):

<!-- ✅ Correct -->
<div class="sgds:p-4 sgds:bg-primary-default sgds:text-white">Content</div>

<!-- ❌ Wrong - missing prefix -->
<div class="p-4 bg-primary-default text-white">Content</div>