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

sgds-getting-started

Bootstrap SGDS projects with fonts, foundation CSS, utilities, components, and app layouts.

18|10|Updated Aug 30, 2022
Search Tags:#project-setup#bootstrap#web-components#font-setup#foundation-css#ui-assembly#sgds
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-getting-started
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-getting-started
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-getting-started
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-getting-started

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured starting point to bootstrap a new SGDS application, ensuring fonts, foundation styles, utilities, components, and app layout are set up in the correct order.

Core Features & Use Cases

  • Font setup: Add Inter font and base typography as the foundation for SGDS styling.
  • Foundation and utilities: Import day/night themes, foundation CSS, and utility classes to enable consistent styling and layout.
  • Component registration: Import and register SGDS web components globally for use across the app.
  • App layout templates: Apply recommended Simple App or Sidebar App layouts to structure pages.

Quick Start

Follow Steps 1 through 4 in this skill to bootstrap a new SGDS application.

Frequently Asked Questions about sgds-getting-started

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

FAQPage Schema
How do I bootstrap a new SGDS web application from scratch?▼

To bootstrap a new SGDS application, follow a structured setup process that configures fonts, imports foundation CSS, registers web components, and applies layout templates in the correct order.

What is the correct order for setting up SGDS foundation CSS and fonts?▼

Setting up SGDS foundation CSS and fonts starts with adding the Inter font for base typography, followed by importing day/night themes, foundation styles, and utility classes for consistent layout.

How do I register SGDS web components globally in my frontend project?▼

You register SGDS web components globally by importing them during frontend scaffolding, which enables consistent usage of UI elements across all pages within your web application.

Can I use Simple App or Sidebar App layout templates for my SGDS project?▼

Yes, you can apply recommended Simple App or Sidebar App layout templates during SGDS initialization to structure your pages following standard SGDS conventions for web projects.

What do I need to import before adding SGDS web components to my app?▼

Before adding SGDS web components, you need to import the Inter font for typography, apply foundation CSS for base styling, and include utility classes to enable consistent layouts.

Does bootstrapping an SGDS project include day and night theme configuration?▼

Yes, bootstrapping an SGDS project includes importing day and night themes alongside foundation CSS and utility classes to enable consistent styling across the application.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
pelletencatepelletencate

styling

Style Rails 8 views with Tailwind CSS utilities and DaisyUI components.

Community
Intermediate
ShoebtamboliShoebtamboli
14

tailwindcss

Configure Tailwind CSS utility patterns for Rails 7+ views.

Community
Intermediate
GovTechSGGovTechSG
18

sgds-typography

Standardize SGDS typography with sgds: prefixes for font styles.

Official
Intermediate