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

sgds-blocks

Generates reusable SGDS UI blocks for composing Singapore Government web pages and sections.

Updated Sep 5, 2026
Search Tags:#tailwind#web components#page layout#form design#sgds#ui blocks#singapore government
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-blocks-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-blocks
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-blocks
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-blocks-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building SGDS-compliant pages from scratch requires knowing the correct component APIs, grid math, typography tokens, and mandatory page chrome. This Skill provides ready-made, drop-in UI blocks so you can assemble pages without writing layout code from scratch. ## Core Features & Use Cases - Reusable UI Blocks: Pre-built sections including hero, feature, CTA, stats, cards, page header, basic details card, filter sidebar, and form layouts. - Mandatory Application Shell: Enforces the required Singapore Government page chrome (sgds-masthead, sgds-mainnav, sgds-footer) with simple-app and sidebar-app layout variants. - Form Layout Rules: Canonical grid math, component pairing rules, and five form patterns covering full-width, paired, mixed, multi-section, and sidebar-navigation forms. - Use Case: A developer building a conference programme page can drop in a filter sidebar block and session detail blocks, then wrap them in the application shell to produce a compliant SGDS page. ## Quick Start Use the sgds-blocks skill to build a landing page with a hero section, a three-column stats display, and a centered call-to-action.

Frequently Asked Questions about sgds-blocks

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

FAQPage Schema
How do I build an SGDS page layout with reusable blocks?▼

Start with the Application Shell block containing sgds-masthead, sgds-mainnav, and sgds-footer, then drop content blocks like hero, stats, or cards into the container. Compose blocks with page templates from the sgds-templates skill to assemble complete pages.

What SGDS blocks are available for landing pages?▼

Available blocks include hero sections with background images, feature showcases with multiple grid ratios, CTA sections in contained or full-bleed styles, stats displays in 3 to 8 columns, and card grids in 3 or 4 columns.

How do I create a form with SGDS web components?▼

SGDS forms use a 12-column grid where the form takes 8 columns. Pairable fields like inputs and selects take 6 columns each, while textareas, checkbox-groups, radio-groups, and multi-select combo-boxes always span full width. Read reference/form.md for the five canonical patterns.

Can I use custom CSS or inline styles with SGDS blocks?▼

No. All styling must use sgds: prefixed Tailwind utilities for colors, spacing, typography, and layout. Inline styles and arbitrary CSS that duplicate design tokens are prohibited, and icons must use sgds-icon rather than inline SVG.

Is the sgds-masthead required on every SGDS page?▼

Yes. Every SGDS page must include sgds-masthead, sgds-mainnav, and sgds-footer as mandatory page chrome. The masthead is a Singapore Government digital standards requirement and must never be omitted.

Related Skills

Explore More Design & Creative Skills→
GovTechSGGovTechSG
18

sgds-getting-started

Bootstrap SGDS projects with fonts, foundation CSS, utilities, components, and app layouts.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-blocks

Compose SGDS page layouts using reusable UI blocks with sgds-templates.

Official
Intermediate
musher-devmusher-dev

scaffolding-sections

Scaffold Svelte 5 marketing page sections from IA definitions.

Official
Intermediate
BURHANDEV-ENTERPRISEBURHANDEV-ENTERPRISE

mop-ui-clone

Extract HTML structure, CSS design tokens, and 3D assets from websites.

Official
Advanced