sgds-templates
Complete ready-to-use page templates built with SGDS components and utilities. Use this skill whenever a user asks to build a page, dashboard, login page, form page, settings page, list page, or any full-page UI — even if they don't say 'template'. Apply when starting a new app, building internal tools, dashboards, admin portals, authentication flows, or data table views.
How do I install this agent skill?
npx skills add https://github.com/govtechsg/sgds-web-component --skill sgds-templatesIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill provides a collection of UI templates based on the Singapore Design System (SGDS). It includes instructions for fetching template source code from official GovTech Singapore GitHub repositories to extract HTML components. The analysis found no malicious patterns or security risks.
- Socketpass
No alerts
- Snykwarn
Risk: MEDIUM · 1 issue
What does this agent skill do?
SGDS Page Templates
Ready-to-use full-page templates using SGDS components and utilities — adapted from the visual patterns of shadcn Blocks. Each template gives a beautiful starting point without writing layout code from scratch.
Prerequisites
Every page must include the Application Shell. Read sgds-blocks → reference/application-shell.md before generating any page. The shell provides mandatory
<sgds-masthead>,<sgds-mainnav>, and<sgds-footer>on every page, plus container class selection (.sgds-containervs.sgds-container-sidebar) and sticky-header conventions. Never generate a page template without all three shell components.
import "@govtechsg/sgds-web-component/themes/day.css";
import "@govtechsg/sgds-web-component/css/sgds.css";
import "@govtechsg/sgds-web-component/css/utility.css";
See sgds-getting-started and sgds-components for full installation.
For container width and max-width utilities used in these templates, see sgds-utilities.
Quick Decision Guide
| What you're building | Template to use |
|---|---|
| Operational app shell (appnav + overlay sidebar) | Operational |
| Admin dashboard with filters & data table | Application Management |
| Public catalogue with search & filtering | Catalogue / Search & Filter |
| Internal tool, admin portal, analytics dashboard | Dashboard |
| Login / sign-in page | Login |
| Multi-field settings or data-entry form | Form Page |
| Company/agency profile, team intro, achievements | About Us |
| Product or service landing page | Landing Page |
| Blog post, news article, or case study | Blog / Content Page |
→ Read reference/operational.md
Operational app shell with <sgds-appnav> + overlay sidebar. Use for internal tools, admin portals, and operational dashboards that don't need <sgds-masthead>.
→ Read reference/application-management.md
Sidebar filters + search + data table + pagination. Use for admin dashboards, application registries, management portals.
→ Read reference/catalogue.md
Search + sidebar multi-group filters + sort dropdown + results grid + empty state. Use for product catalogues, event listings, content browsing.
→ Read reference/dashboard.md
Sidebar navigation + stat cards row + data table. Use for dashboards, admin portals, internal tools with metrics.
Note: The dashboard template uses
sgds-sidebar(RC component). Load the CDN script before other SGDS imports — see sgds-components sidebar reference for the CDN tag and framework setup.
→ Read reference/login.md
Centered card with email/password form. Use for authentication, sign-in, sign-up pages.
→ Read reference/form.md
Two-column settings layout with labelled form sections. Use for settings pages, profile pages, multi-section data entry.
→ Read reference/about-us.md
Two-column headline + image grid + logo strip + achievements stats panel. Use for agency profiles, product about pages, team introductions.
→ Read reference/landing.md
Hero section + feature cards + CTA sections. Use for product launches, service introductions, campaign pages.
→ Read reference/blog.md
Featured image + article header + body content + author card. Use for blog posts, news articles, case studies, testimonials.
Raw Content Links — Copy & Paste Ready
All page templates have working implementations in the stories/templates/ directory. Use these raw GitHub links to fetch the complete source:
Each reference page (e.g., reference/dashboard.md) includes the relevant raw content links for that specific template.
How to Extract HTML from Raw GitHub Links
All templates have working story implementations in the stories/templates/ directory. To extract the HTML template:
Step 1: Fetch the raw file
Copy the raw GitHub URL from the table above and fetch it:
curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/{FOLDER}/{FILE}.js
Example:
curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
Step 2: Extract the HTML from the template literal
Story files export a Template function that returns an html template literal. Locate the section that looks like:
const Template = () => html`
<!-- YOUR HTML STARTS HERE -->
<sgds-masthead></sgds-masthead>
...
<sgds-footer></sgds-footer>
<!-- YOUR HTML ENDS HERE -->
`;
Step 3: Clean the HTML
- **Remove the
html\`` wrapper** — delete the leadinghtml`` and trailing closing backtick - Remove Lit-specific syntax — delete any
${variable}interpolations; replace with placeholder text if needed - Remove
<style>blocks — move CSS to the reference file's "Customisation notes" section if notable - Preserve all SGDS components and utility classes — keep every
sgds-*element andsgds:class exactly as-is - Format the HTML — use consistent indentation (2 spaces per level)
Step 4: Structure the reference file
Follow the sgds-blocks pattern:
# [Template Name] Page Template
[1-2 sentence description of what this template is for]
## When to use
- Use case 1
- Use case 2
- Use case 3
## Block anatomy
\`\`\`
[ASCII diagram of the layout structure]
\`\`\`
---
## Complete template
\`\`\`html
[CLEANED HTML FROM STEP 3]
\`\`\`
## Customisation notes
- Update [element] to [purpose]
- Modify [component] by [how]
- [More notes...]
---
## Raw Content Link
| File | GitHub Raw URL |
|------|---|
| [Template Name] | [raw GitHub URL] |
Example: About Us template
The raw file at:
https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
Contains:
const Template = () => html`
<style>...</style>
<sgds-masthead></sgds-masthead>
...
`;
Extract → remove html\`` and backtick → clean up <style>` → result is the HTML in reference/about-us.md.
Visual Hierarchy Principles (apply to all templates)
These are the rules that make SGDS UIs look polished — the same principles shadcn/Mantine use:
1. Layer backgrounds to create depth
- Page background:
sgds:bg-surface-default(the base canvas) - Cards / panels:
sgds:bg-surface-raised(lifts content off the page) - Nested content areas:
sgds:bg-surface-overlaysparingly
2. Use semantic spacing, not raw numbers
Prefer sgds:p-layout-md, sgds:gap-layout-md, sgds:p-component-md over sgds:p-4. Semantic tokens are responsive and encode intent. Always apply whitespace between sections and elements — never render blocks without spacing. See sgds-utilities-spacing for the full defaults table.
3. Consistent card anatomy
Every card: padding inside (sgds:p-component-lg), gap between card rows (sgds:gap-layout-md), border-radius (sgds:rounded-lg), subtle shadow (sgds:shadow-card).
4. Action hierarchy in forms
Primary action → <sgds-button variant="primary">. Secondary / cancel → <sgds-button variant="outline">. Destructive → <sgds-button variant="ghost" tone="danger">.
5. Subtle labels, prominent values
In stat cards and description lists: label in sgds:text-body-subtle sgds:text-sm, value in sgds:text-default sgds:text-2xl sgds:font-semibold.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/govtechsg/sgds-web-component/sgds-templates">View sgds-templates on skillZs</a>