sgds-templates

Generate full-page UI templates using SGDS web components and utility classes.

Updated Sep 5, 2026
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-templates-hiokkuek
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sgds-templates
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-templates
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-templates-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building complete pages with the Singapore Government Design System (SGDS) from scratch requires assembling mastheads, navigation, layouts, and components manually, which is slow and error-prone. This Skill provides ready-to-use page templates so you can start from a working structure instead of a blank file. ## Core Features & Use Cases - Eight page templates: Application management, catalogue/search-filter, dashboard, login, form, about us, landing, and blog/content pages, each with layout anatomy and customisation notes. - Mandatory application shell: Every template enforces the sgds-masthead, sgds-mainnav, and sgds-footer structure with correct container class selection. - Raw source extraction workflow: Step-by-step instructions to fetch working implementations from the sgds-web-component GitHub repository and clean Lit template literals into plain HTML. - Use Case: A developer needs an admin dashboard with sidebar navigation, stat cards, ECharts charts, and a data table; the Skill supplies the complete SGDS markup and visual hierarchy rules. ## Quick Start Ask the AI to build an SGDS dashboard page with sidebar navigation, stat cards, and a data table using the sgds-templates skill.

Frequently Asked Questions about sgds-templates

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

FAQPage Schema
How do I build a dashboard page with SGDS web components?

Use the dashboard template, which combines a sticky sgds-sidebar, stat cards, ECharts charts, and a data table inside the application shell. Install ECharts separately and set explicit heights on chart containers for rendering.

What page templates are available in the SGDS design system?

Eight templates are provided: application management, catalogue with search and filters, dashboard, login, form, about us, landing, and blog/content pages. Each includes a layout anatomy, customisation notes, and links to raw source implementations.

How do I extract HTML from SGDS story files on GitHub?

Fetch the raw story file with curl, locate the Template function returning an html template literal, then remove the html backtick wrapper, Lit interpolations, and style blocks. Preserve all sgds-* elements and sgds: utility classes exactly as written.

Does every SGDS page require the masthead and footer components?

Yes, every page must include sgds-masthead, sgds-mainnav, and sgds-footer as part of the mandatory application shell. The shell also defines container class selection between sgds-container and sgds-container-sidebar.

Why are my ECharts charts not rendering in the SGDS dashboard?

ECharts requires a non-zero explicit height on its container div, such as 260px. Also set backgroundColor to transparent so the SGDS surface token controls the background, and call chart.resize() on window resize.