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

sgds-layouts

Catalog SGDS page layout patterns with frontmatter metadata and usage guidance.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SGDS layout patterns catalog helps teams rapidly design consistent, responsive page structures by reusing proven layouts instead of reinventing approaches for every project.

Core Features & Use Cases

  • Covers two layout families: Full Width for public-facing pages using sgds-container and With Sidebar for dashboards using sgds-container-sidebar.
  • Includes common variants such as Default, Aside Left, Aside Right, Aside Both, Split, Breadcrumb, and Overlay, with guidance on when to apply each.
  • Provides references to implementation examples and raw content links to accelerate development and onboarding.

Quick Start

Use sgds-layouts to explore a layout pattern and adapt it to your content and navigation needs.

Frequently Asked Questions about sgds-layouts

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

FAQPage Schema
What SGDS layout patterns are available for responsive page structures?▼

SGDS layout patterns include Full Width for public-facing pages using sgds-container and With Sidebar for dashboards using sgds-container-sidebar. Variants cover Default, Aside Left, Aside Right, Aside Both, Split, Breadcrumb, and Overlay layouts.

How do I build a dashboard layout with a sidebar using SGDS?▼

To build a dashboard layout, apply the With Sidebar family which utilizes the sgds-container-sidebar structure. Select variants like Aside Left, Aside Right, or Aside Both depending on where navigation elements must be placed.

When should I use a full width layout versus a sidebar layout in SGDS?▼

Use a full width layout for public-facing pages where content spans the sgds-container, and reserve sidebar layouts for dashboards requiring fixed navigation placement alongside main content via sgds-container-sidebar.

Can I adapt SGDS layout patterns for custom navigation and content needs?▼

Yes, you can explore a specific SGDS layout pattern and adapt its structure to fit custom content and navigation requirements. The catalog provides usage guidance and references to implementation examples to accelerate customization.

Do I need any dependencies to use sgds-layouts for UI composition?▼

No dependencies are required to use sgds-layouts for UI composition. It operates as a standalone catalog that defines page composition patterns through frontmatter metadata and descriptive usage guidance.

Related Skills

Explore More Design & Creative Skills→
yangliu2060yangliu2060
39

youtube-video-analyzer

Extract YouTube transcripts and captions into structured summaries with key points.

Community
Basic
GovTechSGGovTechSG
18

sgds-templates

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

Official
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
ProfPowellProfPowell
4

layout-grid

Implements fluid, resolution-independent web page grids using clamp() and container queries.

Community
Intermediate