skills.rest
HiokKuek
HiokKuekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sgds-utilities

Applies SGDS Tailwind v4 utility classes with the sgds: prefix for styling web interfaces.

Updated Sep 5, 2026
Search Tags:#theming#design system#css#tailwind#utility classes#responsive grid#sgds
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-utilities-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-utilities
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-utilities
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-utilities-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @govtechsg/sgds-web-component, tailwindcss, and includes references (resource) components.

What problem does it solve? Developers using the Singapore Government Design System need to apply correct utility classes, theme-aware color tokens, and responsive grid layouts without memorizing the full token taxonomy or writing custom CSS. ## Core Features & Use Cases - Utility Class Reference: Covers background-color, text-color, border-color, border-width, border-radius, typography, spacing, grid, dimension, opacity, elevation, and breakpoints under the sgds: prefix. - Setup Guidance: Explains Tailwind v4 imports, theme file requirements for color utilities, theme switching, and framework integration for Next.js, Nuxt, Angular, SvelteKit, Astro, and more. - Use Case: When building a government web page, ask for a responsive card layout and receive correct markup using sgds:bg-surface-raised, sgds:rounded-md, semantic spacing tokens, and the .sgds-container/.sgds-grid/.sgds-col-* grid system. ## Quick Start Ask the assistant to style a responsive card component using SGDS utility classes with proper spacing and theme-aware colors.

Frequently Asked Questions about sgds-utilities

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up SGDS utility classes in my project?▼

Import @govtechsg/sgds-web-component/css/utility.css inside the CSS file your Tailwind v4 build processes, such as globals.css. For theme-aware colors, also import the day.css and night.css theme files. Without the utility.css import, sgds: classes will not work.

How do I use the SGDS grid system for responsive layouts?▼

Stack .sgds-container, .sgds-grid, and .sgds-col-{bp}-{n} classes, defining the XS span first then overriding upward. The grid uses 4 columns on mobile, 8 on small/medium, and 12 on large screens and above.

Do SGDS utilities work with Next.js or other frameworks?▼

Yes, SGDS utilities work with any framework supported by Tailwind v4, including Next.js, Nuxt, Angular, SvelteKit, Astro, Gatsby, and Vite. Set up Tailwind for your framework first, then add the SGDS imports to the same processed CSS file.

Why are my sgds: color classes not changing with the theme?▼

Theme-aware background, text, and border colors require importing the day.css and night.css theme files. Toggle themes by adding or removing the sgds-theme-night class on the document root element.

When should I use semantic spacing tokens instead of numeric utilities?▼

Always prefer semantic tokens like sgds:gap-layout-md or sgds:p-component-xs because they are responsive and encode design intent. Use raw numeric utilities like sgds:p-4 only when no semantic token fits the context.

Related Skills

Explore More Software Engineering Skills→
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate
iwritec0deiwritec0de
1

gutenberg-layout

Compose Gutenberg blocks into semantic, accessible WordPress layout markup.

Community
Advanced
launchapp-devlaunchapp-dev
38

theming-system

Design scalable theming architecture with layered tokens for runtime theme switching.

Official
Advanced
GovTechSGGovTechSG
18

sgds-theming

Customize SGDS application themes with CSS token overrides.

Official
Intermediate