govtechsg/sgds-patterns
skills/sgds-patterns/SKILL.md
Complete catalog of reusable typography and text patterns for SGDS applications. Use this skill whenever the user needs to style text, create typography hierarchies, format headings, style lists, or needs consistent text layouts. Also use when the user mentions headings, page titles, body text, lists, paragraphs, display text, content headers, or any typography styling — even if they just say "make a nice heading" or "style my text". Current patterns include headings (H1-H6), display typography (large prominent text), content headers, lists (ordered and unordered), and paragraphs. Each pattern links directly to the raw HTML template for implementation.
$ install --global
skillsauthnpx skillsauth add govtechsg/sgds-web-component sgds-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 28, 2026, 2:40 PM295.4s6 files scanned
SKILL.md
- name:
- sgds-patterns
- description:
- |
- compatibility:
- Requires sgds-utilities and sgds-components skills for prerequisite setup
SGDS Patterns
This skill catalogs all reusable UI patterns available in SGDS. Patterns are production-ready templates that combine SGDS components and utilities to solve common UI needs.
When to Use This Skill
Use this skill whenever you need to:
- Implement a typography pattern (page headings, content headers, lists, paragraphs with specific sizing/weight)
- Build a form pattern (multi-field forms, validation patterns, input groupings)
- Create page layouts (login page, empty states, data tables, search interfaces)
- Display notifications, reviews, or data visualizations with SGDS
- Find the exact HTML markup and SGDS utility classes for a UI pattern
Prerequisites
Before implementing any pattern, ensure you have:
- sgds-getting-started: Initial application setup (Inter font, foundation CSS imports, component registration)
- sgds-utilities: Understanding of SGDS utility classes (spacing, typography, color, grid, etc.)
- sgds-components: Knowledge of SGDS web components used within patterns
Refer to these skills before asking how to implement a pattern.
Current Patterns: Typography
Typography patterns define semantic, reusable layouts for text content. All patterns use SGDS utilities for consistent styling and respect the design token hierarchy.
Use the category links below to find specific patterns:
- Heading - Page and section headings with optional overlines (6 patterns)
- Display - Large, prominent display typography (12 patterns)
- Content - Card titles and subsection headings (6 patterns)
- List - Ordered and unordered lists in three sizes (6 patterns)
- Paragraph - Body text styles for longer-form content (3 patterns)
How to Use a Pattern
- Find the pattern you need using the category links above or the specific pattern reference files
- Get the raw HTML template from the GitHub URL in the reference file
- Extract the template (the
const XxxTemplate = () => html\....`` part) — this is the markup to implement - Adapt to your content — replace placeholder text and adjust SGDS utility classes as needed for your use case
- Combine with sgds-components if the pattern includes interactive elements (buttons, forms, dropdowns, etc.)
Pattern Naming Convention
Pattern files follow this naming scheme:
stories/patterns/[Category]/[Subcategory]/[PatternName]-[variant].stories.js
Examples:
Typography/Heading/h1.stories.js→ H1 pattern (default weight)Typography/Heading/h1-light.stories.js→ H1 pattern (light weight)Typography/Display/display-lg-center.stories.js→ Large display, center-alignedTypography/List/ul-body-md.stories.js→ Unordered list, body-medium size
Variants indicate:
- Weight:
-lightsuffix for light font-weight variants - Alignment:
-centersuffix for center-aligned variants - Size: Built into the name (e.g.,
display-sm,body-md)
Integration Example
Here's a quick example of how to use a typography pattern:
<!-- Import SGDS foundation styles and components -->
<link rel="stylesheet" href="@govtechsg/sgds-web-component/lib/index.css" />
<script type="module" src="@govtechsg/sgds-web-component/lib/index.js"></script>
<!-- Use the H1 pattern template -->
<div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" style="max-width: var(--sgds-text-max-width);">
<div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">
Overline Label
</div>
<h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
Page Heading Goes Here
</h1>
<p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
Supporting body text that provides context and detail for the page or section above.
</p>
</div>
Copy the template, substitute your content, and the pattern is ready to use.
Accessing Pattern Files
All patterns are stored in the repository at stories/patterns/ and available on GitHub. Use the typography category links above to find the exact URL for any pattern:
https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/patterns/Typography/[Subcategory]/[PatternName].stories.js
Each category reference file contains a table with direct links to all patterns in that category.
Related Skills
govtechsg/sgds-components
tools
VerifiedTrustedCommunity
Complete reference for all SGDS web components including installation and framework integration. Use when users ask about any <sgds-*> component — accordion, alert, badge, breadcrumb, button, card, checkbox, close-button, combo-box, datepicker, description-list, divider, drawer, dropdown, file-upload, footer, icon, icon-button, icon-card, icon-list, image-card, input, link, mainnav, masthead, modal, overflow-menu, pagination, progress-bar, quantity-toggle, radio, select, sidebar, sidenav, skeleton, spinner, stepper, subnav, switch, system-banner, tab, table, table-of-contents, textarea, thumbnail-card, toast, or tooltip. Also covers React 19+, React ≤18, Vue, Angular, and Next.js integration.
14SKILL.mdUpdated Apr 18, 2026
govtechsg/sgds-forms
testing
VerifiedTrustedCommunity
Use this skill when users ask about form validation in SGDS, hasFeedback prop, constraint validation, custom validation, noValidate, setInvalid, form submission, or reading FormData from SGDS form components.
13SKILL.mdUpdated Apr 18, 2026
govtechsg/sgds-layouts
tools
VerifiedTrustedCommunity
Complete catalog of page layout patterns for SGDS applications. Use this skill whenever a user asks about page layouts, content arrangement, aside panels, split views, sidebar layouts, breadcrumb layouts, or viewport-height layouts — even if they just say 'how should I lay out my page' or 'I need a two-column layout'. Covers Full Width layouts (public-facing pages with sgds-container) and With Sidebar layouts (dashboards/internal tools with sgds-container-sidebar). Trigger on: layout, aside, split view, sidebar layout, two-column, three-column, content arrangement, page structure with aside.
12SKILL.mdUpdated May 14, 2026
govtechsg/sgds-templates
tools
VerifiedTrustedCommunity
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.
12SKILL.mdUpdated Apr 28, 2026