What problem does it solve? Setting up a new project with the SGDS web component library involves several ordered steps—font loading, theme and foundation CSS imports, Tailwind-processed utility classes, and component registration—and doing them in the wrong order breaks styling or utility classes. This Skill provides the correct sequence so a new SGDS application renders correctly from the start. ## Core Features & Use Cases - Ordered four-step setup: Loads the Inter font in the HTML head, imports theme/foundation/utility CSS in the correct order, registers all <sgds-*> components with a single JS import, and wraps content in an SGDS app layout. - Layout templates: Provides ready-made markup for both Simple App (public-facing) and Sidebar App (dashboards/internal tools) layouts using .sgds-container and .sgds-container-sidebar. - Use Case: A developer bootstrapping a new Singapore government-style web app asks the AI to scaffold the project; the Skill ensures the Inter font link, themes/day.css → sgds.css → utility.css import order, Tailwind v4 processing, and masthead/mainnav/footer shell are all in place before any page code is written. ## Quick Start Set up a new SGDS web component project with the correct font, CSS imports, component registration, and a simple app layout.
