[CCUBE-2223][XY] Add Flagship DS agent skills by ninjasheeps · Pull Request #1458 · LifeSG/react-design-system

ninjasheeps · 2026-09-02T09:53:16Z

Type of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing apis or functionality to change)
Documentation (change to documentation, comments or API descriptions)
Tests (improvements to unit tests or E2E tests)
Other (technical improvements, refactoring, or changes that don't fall into the above categories)

Description of changes

Link to ticket
Add fds-build agent skill which allows consumers to build web pages/applications using FDS
Covers component selection, import paths, theming setup, layout patterns, and common mistakes for both v3 and v4
Props tables auto-generated from TypeScript source via scripts/generate-skill-props.ts
11 evals included for validation
Install via npx skills add lifesg/react-design-system
Currently the skill supports building form/listing pages, will be adding more templates in the future

Checklist

Changes follow the project guidelines in CONTRIBUTING.md and CONVENTIONS.md
Looks good on mobile and tablet
Updated documentation
Added/updated unit tests
Added/updated E2E tests

qroll · 2026-09-03T06:40:27Z

does skills support installing from a version? e.g. npx skills @lifesg/react-design-system@3

it would be cleaner to split v3 vs v4; I would imagine in newer versions when we start removing/adding components/props, the catalog and props should be updated separately for the new version without affecting the old

ah ok you did mention it has to point to the full path. so it would need to be npx skills https://github.com/LifeSG/react-design-system/tree/pre-release/v3

alternatively we could provide a bin command like npx lifesg-react-design-system@3 skills that maps to the expected path

continuing on this thread since we can support version specific skills

can we move v3 resources to a new PR targeting the pre-release/v3 branch? then flatten the resource folder structure and remove references to v3

…uctions

…-props - Export stripPropsSection and insertPropsSection for testability - Guard main() behind require.main === module to prevent side effects on import - Add 12-test suite covering strip, insert, and idempotency scenarios Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…back to v3 docs

…s bin

… subcommand

qroll · 2026-09-25T02:53:59Z

    },
    "bin": {
-        "lifesg-react-design-system": "./codemods/run-codemod.js"
+        "lifesg-react-design-system": "./scripts/cli.js"


trouble you to update rollup.config.js to support the bin command

line 116 can be updated to reflect the latest bin config:

bin: pkg.bin,

skills and script/cli.js should be bundled as well

can include it under the codemodBuildConfig copy plugin (there are some issues using libraryBuildConfig)

{ src: "scripts/cli.js", dest: "dist/scripts" }, { src: "skills/*", dest: "dist/skills" },

qroll · 2026-09-25T03:41:52Z

continuing on this thread since we can support version specific skills

can we move v3 resources to a new PR targeting the pre-release/v3 branch? then flatten the resource folder structure and remove references to v3

qroll · 2026-09-25T04:21:42Z

+## Install
+
+```bash
+pnpm add @lifesg/react-design-system @lifesg/react-icons styled-components @floating-ui/react @mui/icons-material @emotion/is-prop-valid


should we use npm as the default instead?

qroll · 2026-09-25T04:25:27Z

+}
+```
+
+`StyleSheetManager` with `isPropValid` stops styled-components forwarding DS-specific props (e.g. `weight`) to DOM elements.


DS V3 should properly handle transient props (if not, is a bug that should be fixed on the library), can avoid this step as a default. consumers should also be marking transient props for their own code

qroll · 2026-09-25T04:27:24Z

+
+Theme is an **imported object** — not a string. Available themes: `LifeSGTheme` · `BookingSGTheme` · `CCubeTheme` · `MyLegacyTheme` · `OneServiceTheme` · `PATheme` · `SupportGoWhereTheme` · `SGWDigitalLobbyTheme` · `IMDATheme` · `SPFTheme` · `SMGSTheme` · `A11yPlaygroundTheme`
+
+For auto dark/light mode: swap `ThemeProvider` for `DSThemeProvider` (same import path). Force fixed mode: `LifeSGTheme.light` or `LifeSGTheme.dark`.


I interpret this as having same import path as ThemeProvider from styled-components. maybe just remove and let the agent figure it out

qroll · 2026-09-25T08:03:03Z

+| Using `SpacingValues`                                             | This export does not exist                               | Use `Spacing`                               |
+| Using `Theme` (named export)                                      | This export does not exist                               | Use a named preset: `LifeSGTheme`, etc.     |


does this need to be explicitly documented? 🥺

qroll · 2026-09-25T08:05:37Z

+`Breakpoint` can still be imported for JS conditional logic:
+
+```tsx
+import { Breakpoint } from "@lifesg/react-design-system/theme";
+
+const isDesktop = window.innerWidth > Breakpoint["lg-min"];
+```


use the v4 hooks: https://github.com/LifeSG/react-design-system/wiki/Migrating-to-V4#breakpoint-tokens-at-runtime

qroll · 2026-09-25T08:07:03Z

+
+## Border Tokens
+
+`Border` is a flat object of CSS variable strings. Import from `@lifesg/react-design-system/theme`.


Suggested change

`Border` is a flat object of CSS variable strings. Import from `@lifesg/react-design-system/theme`.

`Border` is a flat object of CSS variable strings.

qroll · 2026-09-25T08:08:13Z

+<div style={{ border: `${Border["width-010"]} ${Border.solid} ${Colour.border}` }} />
+```
+
+There is no `Border.Util` in v4 — compose border properties manually using the tokens above.


for dash style, use the DashedBorder https://github.com/LifeSG/react-design-system/wiki/Migrating-to-V4#border

qroll · 2026-09-25T08:10:40Z

request: run prettier afterwards to standardise the table formatting and reduce noise in the unstaged files

ghazwan-gt reviewed Sep 3, 2026

View reviewed changes

Comment thread scripts/generate-skill-props.ts

ghazwan-gt reviewed Sep 3, 2026

View reviewed changes

Comment thread scripts/generate-skill-props.ts

ghazwan-gt reviewed Sep 3, 2026

View reviewed changes

Comment thread skills/fds-build/resources/v3/components/footer.md Outdated

qroll reviewed Sep 3, 2026

View reviewed changes

ghazwan-gt reviewed Sep 4, 2026

View reviewed changes

Comment thread skills/fds-build/resources/v3/components/modal.md

ghazwan-gt reviewed Sep 4, 2026

View reviewed changes

Comment thread skills/fds-build/SKILL-v4.md

ninjasheeps and others added 5 commits September 15, 2026 09:23

[MISC][XY] Add DS agent skills

03ba673

[MISC][XY] Rename skill + align v4 files with v3

1cfa8da

[MISC][XY] Move fds-build to root skills folder and add install instr…

1894f7e

…uctions

[MISC][XY] Correct v4 resource files + consolidate prop extraction

5ce47f6

[MISC][CCW] fix v4 skills to fix broken root css

28c4fbd

ninjasheeps force-pushed the flagship-ds-skills branch from 991668a to 28c4fbd Compare September 15, 2026 01:25

ninjasheeps and others added 4 commits September 15, 2026 09:28

[MISC][XY] Warn against styled-components and v3 tokens when falling …

58510be

…back to v3 docs

[MISC][XY] Update skill install instruction to use npx flagship-skill…

fc55f69

…s bin

[MISC][XY] Update skills bin to use lifesg-react-design-system skills…

3d5e52a

… subcommand

ninjasheeps requested review from ghazwan-gt and qroll September 15, 2026 02:06

ghazwan-gt approved these changes Sep 16, 2026

View reviewed changes

qroll requested changes Sep 25, 2026

View reviewed changes


		Theme is an imported object — not a string. Available themes: `LifeSGTheme` · `BookingSGTheme` · `CCubeTheme` · `MyLegacyTheme` · `OneServiceTheme` · `PATheme` · `SupportGoWhereTheme` · `SGWDigitalLobbyTheme` · `IMDATheme` · `SPFTheme` · `SMGSTheme` · `A11yPlaygroundTheme`

		For auto dark/light mode: swap `ThemeProvider` for `DSThemeProvider` (same import path). Force fixed mode: `LifeSGTheme.light` or `LifeSGTheme.dark`.

		\| Using `SpacingValues` \| This export does not exist \| Use `Spacing` \|
		\| Using `Theme` (named export) \| This export does not exist \| Use a named preset: `LifeSGTheme`, etc. \|


		## Border Tokens

		`Border` is a flat object of CSS variable strings. Import from `@lifesg/react-design-system/theme`.

Conversation

ninjasheeps commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

qroll Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

qroll Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ninjasheeps commented Sep 2, 2026 •

edited

Loading

qroll Sep 3, 2026 •

edited

Loading

qroll Sep 25, 2026 •

edited

Loading