skills.rest
HiokKuek
HiokKuekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sgds-workflow

Routes SGDS development tasks to the correct Singapore Design System skill.

Updated Sep 5, 2026
Search Tags:#workflow#design system#tailwind#ui development#web components#sgds#singapore design system
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-workflow-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-workflow
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-workflow
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-workflow-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @govtechsg/sgds-web-component.

What problem does it solve? When building UI with @govtechsg/sgds-web-component, developers often do not know which SGDS skill covers their current task, leading to skipped setup steps, broken styling, or reinvented components. This Skill acts as the mandatory entry point that maps every SGDS task to the right specialized skill. ## Core Features & Use Cases - Staged Workflow for New Apps: Guides new projects through setup (sgds-getting-started), UI building (components, utilities, theming), page assembly (blocks, patterns, templates, forms), and data visualisation in the correct order. - Skill Map for Existing Apps: Provides a task-to-skill lookup table so you jump directly to the right reference without re-reading setup material. - Setup Troubleshooting: Lists the exact checks (CSS import order, Tailwind processing of utility.css, component registration) to run when SGDS components or utilities look broken. - Use Case: A user asks to build a dashboard page with SGDS. This Skill directs the agent to sgds-templates for the page layout, sgds-components for individual elements, and sgds-data-visualisation if charts are needed. ## Quick Start Ask the agent to help you build a new SGDS app or add an SGDS component, and it will start from this workflow to pick the right skill.

Frequently Asked Questions about sgds-workflow

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

FAQPage Schema
How do I start building a new app with SGDS web components?▼

Begin with the sgds-getting-started skill, which covers Inter font setup, CSS import order (themes/day.css, css/sgds.css, css/utility.css), component registration, and app layout templates. Complete all four setup steps before writing any component or page code.

Which SGDS skill should I read for a specific task?▼

Use the Skill Map table in this workflow: sgds-components for sgds-* elements, sgds-utilities for spacing and styling classes, sgds-blocks for page sections, sgds-templates for full pages, sgds-forms for validation, and sgds-data-visualisation for charts.

Why are my SGDS components or utility classes not working?▼

Verify setup before anything else: themes/day.css, css/sgds.css, and css/utility.css must be imported in that order, utility.css must be processed by Tailwind rather than imported as plain JS, and @govtechsg/sgds-web-component must be imported in the JS entry point.

Can I use inline style attributes with SGDS components?▼

No. All styling must be applied through class attributes using sgds: utility classes from sgds-utilities. Writing inline styles such as style="margin-top: 16px" when sgds:mt-4 exists is treated as a violation.

When do I need the SGDS theming or data visualisation skills?▼

Read sgds-theming only when the app needs brand colour overrides, dark mode, or font customisation beyond the default style. Read sgds-data-visualisation only when charts, graphs, or dashboards using ECharts are explicitly required.

Related Skills

Explore More Software Engineering 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
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate