sgds-typography

Standardize SGDS typography with sgds: prefixes for font styles.

18|10|Updated Aug 30, 2022

Search Tags:#typography #design-system #font-size #font-weight #line-height #sgds #letter-spacing

Ready to run

npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-typography

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sgds-typography
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/src/skills/typography
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SGDS typography usage is often inconsistent across projects. This skill guides AI agents to apply font sizes, weights, line heights, and letter spacing consistently using sgds: prefixes.

Core Features & Use Cases

Guided application of sgds typography utilities for font-size, font-weight, line-height, and letter-spacing.
Consistent styling across components and documentation by standardizing prefix usage and class names.
Use Case: When a designer specifies a 16px body text or 28px heading, the AI can translate that into the correct sgds: classes for implementation.

Quick Start

Configure a UI component to use SGDS typography by applying sgds:text-16 for body text.

Frequently Asked Questions about sgds-typography

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

FAQPage Schema

How do I apply consistent SGDS typography classes for font size and weight in web UI components?▼

To apply consistent SGDS typography, use sgds: prefixes for font-size, font-weight, line-height, and letter-spacing classes. This standardizes styling across components by guiding AI agents to translate pixel values like 16px body text into the correct sgds: utility classes.

What is the correct SGDS prefix for translating a 28px heading into utility classes?▼

The correct SGDS typography implementation uses sgds: prefixes for utility classes. When a designer specifies a 28px heading, the skill translates this into the appropriate sgds: class, ensuring consistent font-size, font-weight, line-height, and letter-spacing across the project.

Can I use this typography skill to standardize documentation styling and component styling?▼

Yes, you can use this typography skill to standardize styling across both web UI components and documentation. It enforces consistent use of sgds: prefixes for font sizes, weights, line heights, and letter spacing, ensuring uniform text presentation throughout your project.

Why does my project have inconsistent font-size and line-height styling across different UI components?▼

Inconsistent font-size and line-height styling occurs when SGDS typography utilities are applied manually without standardization. This skill solves the problem by enforcing sgds: prefixes for typography classes, ensuring AI agents apply uniform font weights, sizes, and letter spacing across all components.

Does this typography skill require any external dependencies to enforce letter-spacing and line-height standards?▼

No, this typography skill does not require any external dependencies to enforce letter-spacing and line-height standards. It operates independently to guide AI agents in applying sgds: prefixes for consistent font sizing and spacing across web UI development tasks.

Best way to standardize font-weight and letter-spacing utilities across a design system?▼

The best way to standardize font-weight and letter-spacing utilities across a design system is to use sgds: prefixes. This skill ensures consistent application by translating design specifications into standardized sgds: typography classes for all web UI components and documentation.