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

sgds-blocks

Compose SGDS page layouts using reusable UI blocks with sgds-templates.

18|10|Updated Aug 30, 2022
Search Tags:#design-system#web-components#page-layout#sgds-blocks#ui-blocks#sgds-templates
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-blocks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-blocks
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-blocks
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-blocks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

sgds-blocks provide a library of reusable UI blocks to speed SGDS page creation and ensure design-system usage across pages and templates.

Core Features & Use Cases

  • Drop-in blocks for masthead, hero, cards, CTAs, forms, and more that can be composed into full pages without writing layout code from scratch.
  • Works with sgds-templates to assemble page layouts and sections quickly.
  • Encourages consistent styling using sgds CSS utilities and SGDS components.

Quick Start

Install and import sgds-blocks in your project, then start dropping SGDS blocks into your templates.

Frequently Asked Questions about sgds-blocks

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

FAQPage Schema
How do I compose SGDS page layouts using reusable UI blocks?▼

You compose SGDS page layouts by dropping in pre-built UI blocks for mastheads, heroes, and cards into your templates. This allows you to assemble full landing pages and dashboards quickly without writing layout code from scratch.

Can I use drop-in UI blocks to build SGDS documentation pages and forms?▼

Yes, drop-in UI blocks can be used to build SGDS documentation pages and forms. The library provides reusable components specifically designed to speed up page creation while ensuring consistent design-system styling across all templates.

Do I need sgds-templates to assemble page sections with sgds-blocks?▼

Yes, sgds-blocks works directly with sgds-templates to assemble page layouts and sections. The blocks are designed to be composed within these templates to enforce consistent SGDS CSS utilities and component styling.

What is the best way to ensure consistent styling across multiple SGDS pages?▼

The best way to ensure consistent styling is to use reusable UI blocks that enforce SGDS CSS utilities and components. Composing pages from these standardized blocks eliminates manual layout coding and maintains design-system compliance.

Does sgds-blocks support custom scripts and asset resources for page sections?▼

Yes, sgds-blocks supports optional resources including custom scripts and assets. It enforces frontmatter-based discovery with name and description fields to correctly map these resources when building page sections.

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
GovTechSGGovTechSG
18

sgds-templates

Provide ready-to-use SGDS page templates for government UI development.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-patterns

Catalog reusable SGDS typography patterns with raw HTML templates.

Official
Intermediate
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced