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

sgds-patterns

Provides reusable SGDS typography pattern templates with raw HTML markup for headings, displays, lists, and paragraphs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers building SGDS applications often struggle to apply consistent typography styling across headings, body text, and lists. This Skill catalogs production-ready typography patterns with direct links to raw HTML templates, eliminating guesswork about which SGDS utility classes to combine. ## Core Features & Use Cases - Typography Pattern Catalog: Access 33 patterns across five categories — headings (H1-H6), display text, content headers, lists, and paragraphs — each with weight and alignment variants. - Raw Template Access: Every pattern links directly to its source template on GitHub, so you can copy exact HTML markup with correct SGDS utility classes. - Use Case: When building a government service landing page, use the Display LG Center pattern for the hero headline, the H1 pattern for page titles, and the List Medium pattern for feature lists — all with consistent design tokens. ## Quick Start Ask the AI to implement an SGDS H1 heading pattern with an overline label and supporting body text for your page.

Frequently Asked Questions about sgds-patterns

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

FAQPage Schema
How do I style headings with SGDS utility classes?▼

Use the heading patterns which combine classes like sgds:text-heading-xl, sgds:font-bold, and sgds:tracking-tight on h1-h3 elements. Each pattern includes an optional overline label and supporting body text, with light font-weight variants available.

What typography patterns are available in SGDS?▼

SGDS offers 33 typography patterns across five categories: headings (H1-H6), display text in three sizes, content headers, ordered and unordered lists in three sizes, and paragraphs in three sizes. Many include center-aligned and light-weight variants.

How do I get the raw HTML template for an SGDS pattern?▼

Each pattern reference file contains a table with direct GitHub raw URLs to the stories.js files. Fetch the URL, locate the Lit template function, and extract the HTML markup from the template literal to adapt for your content.

Does SGDS list styling use the same tokens as body text?▼

No, lists use dedicated text-list-* font-size tokens rather than text-body-* tokens, with corresponding list spacing classes like sgds:my-list-md. Apply sgds:mt-list-* without bottom margin on the last list item to avoid extra whitespace.

What setup is required before using SGDS typography patterns?▼

You need the sgds-getting-started setup (Inter font, foundation CSS imports, component registration) plus familiarity with sgds-utilities and sgds-components skills. Patterns assume the SGDS design token hierarchy is already loaded in your application.

Related Skills

Explore More Software Engineering Skills→
GovTechSGGovTechSG
18

sgds-getting-started

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

Official
Intermediate
Neko-ProtocolNeko-Protocol
6

tailwind-patterns

Provide reusable Tailwind CSS component patterns for layouts, cards, navigation, forms, buttons, and typography.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-utilities

Document SGDS sgds: Tailwind v4 utility classes for consistent adoption.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-patterns

Catalog reusable SGDS typography patterns with raw HTML templates.

Official
Intermediate