skills.rest
GovTechSG
GovTechSGOFFICIAL
Explore all skills by this author →
WebsiteGitHub

sgds-patterns

Catalog reusable SGDS typography patterns with raw HTML templates.

18|10|Updated Aug 30, 2022
Search Tags:#typography#ui#patterns#paragraphs#lists#headings#sgds
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-patterns
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-patterns
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Centralizes a library of reusable SGDS typography patterns to ensure consistent text styling and faster UI development across applications.

Core Features & Use Cases

  • Comprehensive catalog of patterns for Headings (H1–H6), Display typography, Content headers, Lists, and Paragraphs.
  • Each pattern links to the raw HTML template for quick integration into SGDS projects.
  • Enables cross-project typography consistency and rapid pattern reuse with easy adaptation to content.

Quick Start

Select a pattern reference from the references folder, then copy its raw HTML template and adapt it to your content.

Frequently Asked Questions about sgds-patterns

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

FAQPage Schema
How do I ensure consistent typography for headings and paragraphs across multiple SGDS projects?▼

Use a centralized catalog of reusable SGDS typography patterns to ensure consistent text styling for headings, paragraphs, and lists across multiple SGDS projects. It provides ready-to-use HTML templates for rapid UI pattern reuse.

What is the best way to apply consistent SGDS display typography and content headers in my UI?▼

The best way to apply SGDS display typography and content headers is by selecting a pattern reference and copying its raw HTML template. This ensures your UI matches standard SGDS text styling without manual CSS adjustments.

Do I need any prerequisites to use the SGDS typography patterns library?▼

Yes, you need prerequisites including sgds-getting-started, sgds-utilities, and sgds-components. These foundational SGDS tools must be set up in your environment before integrating the typography pattern templates.

Can I get raw HTML templates for H1 to H6 headings from the SGDS pattern catalog?▼

Yes, the SGDS pattern catalog provides comprehensive raw HTML templates specifically for H1 to H6 headings, display typography, content headers, lists, and paragraphs. Each pattern links directly to its raw HTML template for quick integration.

How do I integrate SGDS typography patterns into my application code?▼

To integrate SGDS typography patterns, select a pattern reference from the references folder, copy its raw HTML template, and adapt the copied template to your specific content. This enables rapid pattern reuse across your SGDS applications.

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
2lab-ai2lab-ai

html

Convert content into styled single-file HTML with Lottie and PNG.

Official
Advanced
GovTechSGGovTechSG
18

sgds-typography

Standardize SGDS typography with sgds: prefixes for font styles.

Official
Intermediate
serverpodserverpod
8

shadcn_ui-typography

Apply Shadcn UI text styles and custom fonts to Flutter applications.

Official
Basic