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

sgds-templates

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Complete ready-to-use SGDS page templates library to speed up government UI development by avoiding repetitive layout work and ensuring consistency with the SGDS shell.

Core Features & Use Cases

  • Ready-to-use full-page templates built with SGDS components and utilities, covering common pages like dashboards, login, forms, settings, catalogue, and blog/content pages.
  • Guidance and references for integrating the Application Shell and semantic tokens to maintain visual consistency across apps.
  • Customisation notes & templates with practical examples and notes on how to adapt templates to fit organisation branding and data structures.

Quick Start

Copy the desired template into your project and adapt the shell components and content to your data.

Frequently Asked Questions about sgds-templates

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

FAQPage Schema
How do I build government UI dashboards and forms that conform to SGDS design tokens?▼

Use ready-to-use SGDS page templates to accelerate government UI development. These templates cover dashboards, forms, and login pages, ensuring conformity to SGDS design tokens and the application shell for visual consistency across apps.

What is the fastest way to create a login page for an internal government tool using SGDS?▼

Copy a pre-built SGDS login page template into your project to quickly create login interfaces. These ready-to-use templates are designed for internal tools and integrate semantic tokens to maintain visual consistency with minimal coding.

Can I customize SGDS page templates to fit my organization's branding and data structures?▼

Yes, SGDS page templates are fully reusable and customizable. Practical examples and customisation notes are provided to guide adapting the shell components and content to fit your specific organization branding and data structures.

Do I need any external dependencies or component libraries to use these SGDS templates?▼

No external dependencies are required to start using these SGDS templates. You can copy the desired template directly into your project and adapt the shell components and content to your data with minimal coding.

What government UI pages are covered by these SGDS templates?▼

The SGDS templates cover common pages needed for government apps and internal tools, including dashboards, login pages, forms, settings screens, catalogs, and blog or content pages.

How do I integrate the SGDS Application Shell when developing government interfaces?▼

The templates provide guidance and references for integrating the Application Shell and semantic tokens. Copying a template into your project supplies the shell structure needed to maintain visual consistency across government apps.

Related Skills

Explore More Design & Creative Skills→
UCloud-FEUCloud-FE
1

cpn-basic-theme-provider

Wrap React applications with ThemeProvider from @ucloud-fe/react-components.

Official
Intermediate
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
GovTechSGGovTechSG
18

sgds-patterns

Catalog reusable SGDS typography patterns with raw HTML templates.

Official
Intermediate