govtechsg/sgds-web-component

1

sgds-components Complete reference for all SGDS web components including installation and framework integration. Use when users ask a…

govtechsg/sgds-web-component

210

2

sgds-theming Customising the visual theme of an SGDS application — product brand colours, day/night mode, and font.

govtechsg/sgds-web-component

206

3

sgds-data-visualisation Use this skill when users ask about data visualisation, charts, graphs, or dashboards in an SGDS application. Covers …

govtechsg/sgds-web-component

205

4

sgds-forms Use this skill when users ask about form validation in SGDS, hasFeedback prop, constraint validation, custom validati…

govtechsg/sgds-web-component

205

5

sgds-getting-started Starting point for any new application built with the SGDS web component library.

govtechsg/sgds-web-component

205

6

sgds-workflow ALWAYS use this skill when building UI with @govtechsg/sgds-web-component or when a user mentions SGDS or Singapore D…

govtechsg/sgds-web-component

205

7

sgds-utilities Complete reference for all SGDS utility classes with the sgds: prefix.

govtechsg/sgds-web-component

204

8

sgds-writing Writing style guide for the Singapore Government Design System (SGDS).

govtechsg/sgds-web-component

169

9

sgds-blocks Reusable UI blocks for building full SGDS pages and sections. Use this skill whenever the user wants to build pages, …

govtechsg/sgds-web-component

166

10

sgds-patterns Complete catalog of reusable typography and text patterns for SGDS applications. Use this skill whenever the user nee…

govtechsg/sgds-web-component

166

11

sgds-templates Complete ready-to-use page templates built with SGDS components and utilities. Use this skill whenever a user asks to…

govtechsg/sgds-web-component

165

12

sgds-layouts Complete catalog of page layout patterns for SGDS applications. Use this skill whenever a user asks about page layout…

govtechsg/sgds-web-component

148

13

sgds-pattern-block-templates Reusable UI blocks built with SGDS components and utilities that can be mixed and matched inside any page template. U…

govtechsg/sgds-web-component

43

14

sgds-pattern-page-templates Complete ready-to-use page templates built with SGDS components and utilities. Use this skill whenever a user asks to…

govtechsg/sgds-web-component

39

15

sgds-migration Complete workflow for migrating an existing frontend application to SGDS web components. Use this skill when a user w…

govtechsg/sgds-web-component

13

16

sgds-components-checkbox Use sgds-checkbox and sgds-checkbox-group to display one or more checkboxes with label, indeterminate state, and vali…

govtechsg/sgds-web-component

4

17

sgds-components-divider Use the sgds-divider web component to render horizontal or vertical separator lines between content sections. Apply t…

govtechsg/sgds-web-component

4

18

sgds-components-accordion Use the sgds-accordion and sgds-accordion-item web components to display collapsible content sections. Apply this ski…

govtechsg/sgds-web-component

2

19

sgds-components-alert Use the sgds-alert and sgds-alert-link web components to show contextual feedback messages. Apply this skill whenever…

govtechsg/sgds-web-component

2

20

sgds-components-badge Use the sgds-badge web component to render labels, status indicators, and notification chips. Apply this skill whenev…

govtechsg/sgds-web-component

2

21

sgds-components-breadcrumb Use the sgds-breadcrumb and sgds-breadcrumb-item web components to render navigational breadcrumb trails. Apply this …

govtechsg/sgds-web-component

2

22

sgds-components-button Use the sgds-button web component for interactive buttons in forms, dialogs, and navigation. Apply this skill wheneve…

govtechsg/sgds-web-component

2

23

sgds-components-card Use the sgds-card web component to display content in a card container with image, icon, title, description, and foot…

govtechsg/sgds-web-component

2

24

sgds-components-close-button Use the sgds-close-button web component for dismissal actions on overlays and banners. Apply this skill when a user a…

govtechsg/sgds-web-component

2

25

sgds-components-combo-box Use sgds-combo-box and sgds-combo-box-option for a searchable, filterable dropdown with optional multi-select, async …

govtechsg/sgds-web-component

2

26

sgds-components-datepicker Use sgds-datepicker to display a date picker input with a calendar dropdown for single date or date range selection. …

govtechsg/sgds-web-component

2

27

sgds-components-description-list Use the sgds-description-list and sgds-description-list-group web components to render structured key-value data. App…

govtechsg/sgds-web-component

2

28

sgds-components-drawer Use the sgds-drawer web component to display a panel that slides in from the edge of the screen. Apply this skill whe…

govtechsg/sgds-web-component

1

29

sgds-components-dropdown Use sgds-dropdown and sgds-dropdown-item web components to display a toggleable list of navigation links or actions. …

govtechsg/sgds-web-component

1

30

sgds-components-file-upload Use sgds-file-upload to display a file upload button with selected file list, validation, and support for multiple fi…

govtechsg/sgds-web-component

1

31

sgds-components-footer Use the sgds-footer web component to display the standard Singapore Government site footer with links, addresses, and…

govtechsg/sgds-web-component

1

32

sgds-components-icon Use the sgds-icon web component to render icons from the SGDS icon registry. Apply this skill whenever a user asks ab…

govtechsg/sgds-web-component

1

33

sgds-components-icon-button Use the sgds-icon-button web component for icon-only interactive buttons. Apply this skill whenever a user asks about…

govtechsg/sgds-web-component

1

34

sgds-components-icon-card Use the sgds-icon-card web component to display a card with a prominent icon, title, description, and footer. Apply t…

govtechsg/sgds-web-component

1

35

sgds-components-icon-list Use the sgds-icon-list web component to render lists of items each prefixed by an icon. Apply this skill whenever a u…

govtechsg/sgds-web-component

1

36

sgds-components-image-card Use the sgds-image-card web component to display a card where a photograph or image is the primary visual, with optio…

govtechsg/sgds-web-component

1

37

sgds-components-input Use sgds-input to display a text input form control with label, hint text, prefix/suffix, validation, and loading sta…

govtechsg/sgds-web-component

1

38

sgds-components-link Use the sgds-link web component for styled navigation links. Apply this skill whenever a user asks about links, ancho…

govtechsg/sgds-web-component

1

39

sgds-components-mainnav Use sgds-mainnav, sgds-mainnav-item, and sgds-mainnav-dropdown to build the primary site navigation bar. Apply this s…

govtechsg/sgds-web-component

1

40

sgds-components-masthead Use the sgds-masthead web component to render the mandatory Singapore Government official banner on every .gov.sg dig…

govtechsg/sgds-web-component

1

41

sgds-components-modal Use the sgds-modal web component to display a dialog overlay that interrupts the user for confirmation, alerts, or fo…

govtechsg/sgds-web-component

1

42

sgds-components-overflow-menu Use the sgds-overflow-menu web component to display a three-dot icon button that toggles a dropdown menu of actions. …

govtechsg/sgds-web-component

1

43

sgds-components-pagination Use sgds-pagination to display a paged navigation control for long lists or data tables. Apply this skill whenever a …

govtechsg/sgds-web-component

1

44

sgds-components-progress-bar Use sgds-progress-bar to display a visual progress indicator for a task or value. Apply this skill whenever a user as…

govtechsg/sgds-web-component

1

45

sgds-components-quantity-toggle Use sgds-quantity-toggle to display a number input with increment and decrement buttons. Apply this skill whenever a …

govtechsg/sgds-web-component

1

46

sgds-components-radio Use sgds-radio-group and sgds-radio to display a group of mutually exclusive radio buttons with label, validation, an…

govtechsg/sgds-web-component

1

47

sgds-components-select Use sgds-select and sgds-select-option to display a dropdown selection with search filtering, label, hint text, and v…

govtechsg/sgds-web-component

1

48

sgds-components-setup Setup and framework integration for SGDS web components. Apply this skill whenever a user asks about installing SGDS,…

govtechsg/sgds-web-component

1

49

sgds-components-sidenav Use sgds-sidenav, sgds-sidenav-item, and sgds-sidenav-link to build a vertical sidebar navigation with multi-level ne…

govtechsg/sgds-web-component

1

50

sgds-components-skeleton Use the sgds-skeleton web component to render placeholder loading skeletons before content loads. Apply this skill wh…

govtechsg/sgds-web-component

1