diff --git a/.npmignore b/.npmignore
index c1db24f185..0423fc5faa 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,5 +1,7 @@
 **/*
 !dist/**
+!skills/**
+!scripts/cli.js
 !CHANGELOG.md
 !package-lock.json
 !package.json
diff --git a/README.md b/README.md
index 6528efb001..c7e9de74de 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,24 @@ import { Button } from "@lifesg/react-design-system";
 
 To see the full suite of components available, visit our [Storybook documentation](https://designsystem.life.gov.sg/react/index.html?path=/docs/getting-started-installation--docs).
 
+## AI agent skill
+
+Give your AI coding assistant accurate knowledge of FDS components, import patterns, and rules — works with Claude Code, Cursor, GitHub Copilot, Codex, and other agents.
+
+**If you are starting fresh** — pull directly from GitHub:
+
+```bash
+npx skills add lifesg/react-design-system
+```
+
+**If `@lifesg/react-design-system` is already installed in your project** — use the bin command, which registers the skill from your locally installed version:
+
+```bash
+npx lifesg-react-design-system skills
+```
+
+The skill covers component selection, correct import paths, theming setup, layout patterns, and common mistakes to avoid. Re-run after upgrading the package.
+
 ## Migrations
 
 If you are migrating from an older version of the Design System, you may refer to our [migration guides](https://github.com/LifeSG/react-design-system/wiki).
diff --git a/package.json b/package.json
index 5110e0f6fd..669ddc72ab 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
         }
     },
     "bin": {
-        "lifesg-react-design-system": "./codemods/run-codemod.js"
+        "lifesg-react-design-system": "./scripts/cli.js"
     },
     "scripts": {
         "build": "npm run rollup",
@@ -42,7 +42,8 @@
         "lint:js:fix": "eslint '**/*.{ts,tsx,js,jsx}' --fix --max-warnings 0",
         "lint:css": "stylelint '**/*.css'",
         "lint:css:fix": "stylelint '**/*.css' --fix",
-        "test:eslint-rules": "node tests/eslint-rules/run-eslint-rule-tests.mjs"
+        "test:eslint-rules": "node tests/eslint-rules/run-eslint-rule-tests.mjs",
+        "generate:skill-props": "tsx scripts/generate-skill-props.ts"
     },
     "repository": {
         "type": "git",
diff --git a/rollup.config.js b/rollup.config.js
index f085319bbc..bec0ee58c0 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -113,9 +113,7 @@ const plugins = [
             main: "./cjs/index.js",
             module: "./index.js",
             types: "./index.d.ts",
-            bin: {
-                "lifesg-react-design-system": "./codemods/run-codemod.js",
-            },
+            bin: pkg.bin,
             exports: {
                 ".": {
                     types: "./index.d.ts",
@@ -306,7 +304,11 @@ const codemodBuildConfig = {
             tsconfig: "tsconfig.codemods.json",
         }),
         copy({
-            targets: [{ src: "codemods/**/*", dest: "dist/codemods" }],
+            targets: [
+                { src: "codemods/**/*", dest: "dist/codemods" },
+                { src: "scripts/cli.js", dest: "dist/scripts" },
+                { src: "skills/*", dest: "dist/skills" },
+            ],
         }),
     ],
 };
diff --git a/scripts/cli.js b/scripts/cli.js
new file mode 100644
index 0000000000..73c567b083
--- /dev/null
+++ b/scripts/cli.js
@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+const { execSync, spawnSync } = require("child_process");
+const path = require("path");
+
+const [, , subcommand, ...rest] = process.argv;
+
+if (subcommand === "skills") {
+    const packageRoot = path.resolve(__dirname, "..");
+    execSync(`npx skills add ${packageRoot}`, { stdio: "inherit" });
+} else {
+    const codemodBin = path.resolve(__dirname, "../codemods/run-codemod.js");
+    const result = spawnSync(
+        process.execPath,
+        [codemodBin, subcommand, ...rest].filter(Boolean),
+        { stdio: "inherit" }
+    );
+    process.exit(result.status ?? 1);
+}
diff --git a/scripts/generate-skill-props.ts b/scripts/generate-skill-props.ts
new file mode 100644
index 0000000000..581b2a139c
--- /dev/null
+++ b/scripts/generate-skill-props.ts
@@ -0,0 +1,296 @@
+/**
+ * Generates ## Props sections in skill resource files from TypeScript source types.
+ *
+ * Run with: tsx scripts/generate-skill-props.ts
+ *
+ * For each component resource file under skills/fds-build/resources/,
+ * this script:
+ *   1. Reads the "Import:" line to find the source folder
+ *   2. Loads the corresponding src/.../types.ts via ts-morph
+ *   3. Flattens the interface hierarchy (skipping raw HTML/React base types)
+ *   4. Generates a markdown ## Props table
+ *   5. Inserts it before ## Rules (or ## Anti-patterns, or at the end)
+ *
+ * Re-run whenever @lifesg/react-design-system types change.
+ */
+
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+import {
+    InterfaceDeclaration,
+    Project,
+    TypeAliasDeclaration,
+    type SourceFile,
+} from "ts-morph";
+
+import { PropExtractor, type PropEntry } from "../tools/shared/prop-extractor";
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const ROOT_DIR = path.resolve(__dirname, "..");
+const SRC_DIR = path.join(ROOT_DIR, "src");
+const SKILLS_RESOURCES_DIR = path.join(
+    ROOT_DIR,
+    "skills",
+    "fds-build",
+    "resources"
+);
+
+// =============================================================================
+// Source path resolution
+// =============================================================================
+
+/** Extract the import subfolder from the resource file's "Import:" line. */
+function extractImportFolder(content: string): string | null {
+    const match = content.match(/@lifesg\/react-design-system\/([a-z0-9-]+)/);
+    return match ? match[1] : null;
+}
+
+/**
+ * Derive the source types.ts path for a resource file.
+ * Tries candidates in order and returns the first that exists on disk:
+ *   1. src/{importFolder}/{resourceName}/types.ts  (nested — form-select under form/)
+ *   2. src/{importFolder}/types.ts                 (top-level — accordion, otp-verification)
+ *   3. src/{importFolder}s/types.ts                (plural folder — animation → animations)
+ */
+function resolveSourceTypesPath(
+    resourceName: string,
+    importFolder: string
+): string {
+    const candidates = [
+        path.join(SRC_DIR, importFolder, resourceName, "types.ts"),
+        path.join(SRC_DIR, importFolder, "types.ts"),
+        path.join(SRC_DIR, `${importFolder}s`, "types.ts"),
+    ];
+    return candidates.find(fs.existsSync) ?? candidates[0];
+}
+
+// =============================================================================
+// Markdown generation
+// =============================================================================
+
+function escapeCell(s: string): string {
+    return s.replace(/\|/g, "\\|");
+}
+
+function generatePropsTable(props: PropEntry[]): string {
+    if (props.length === 0) return "";
+
+    const header = [
+        "| Prop | Type | Default | Description |",
+        "| ---- | ---- | ------- | ----------- |",
+    ];
+
+    const rows = props.map((p) => {
+        const namePart = p.required ? `\`${p.name}\` \\*` : `\`${p.name}\``;
+        return `| ${namePart} | \`${escapeCell(p.type)}\` | ${
+            p.defaultVal || "—"
+        } | ${escapeCell(p.description) || "—"} |`;
+    });
+
+    return [...header, ...rows].join("\n");
+}
+
+/** Build the full ## Props content to insert. Supports multiple interfaces (sub-sections). */
+function buildPropsContent(
+    interfaces: Array<{ title: string; props: PropEntry[] }>
+): string {
+    if (interfaces.length === 0) return "";
+
+    const sections = interfaces
+        .filter((i) => i.props.length > 0)
+        .map((i) => `${i.title}\n\n${generatePropsTable(i.props)}`);
+
+    if (sections.length === 0) return "";
+    return sections.join("\n\n");
+}
+
+// =============================================================================
+// Resource file processing
+// =============================================================================
+
+export function stripPropsSection(content: string): string {
+    const lines = content.split("\n");
+    const out: string[] = [];
+    let inProps = false;
+    for (const line of lines) {
+        if (/^## Props(\b|$)/.test(line)) {
+            inProps = true;
+            continue;
+        }
+        if (inProps && /^## /.test(line)) {
+            inProps = false;
+        }
+        if (!inProps) out.push(line);
+    }
+    return out.join("\n").replace(/\n{3,}/g, "\n\n");
+}
+
+export function insertPropsSection(
+    content: string,
+    propsBlock: string
+): string {
+    const stripped = stripPropsSection(content);
+    const marker = "\n\n" + propsBlock;
+
+    if (stripped.includes("\n## Rules")) {
+        return stripped.replace("\n## Rules", marker + "\n\n## Rules");
+    }
+    if (stripped.includes("\n## Anti-patterns")) {
+        return stripped.replace(
+            "\n## Anti-patterns",
+            marker + "\n\n## Anti-patterns"
+        );
+    }
+    return stripped.trimEnd() + marker + "\n";
+}
+
+function processResourceFile(
+    filePath: string,
+    project: Project
+): { skipped: boolean; reason?: string } {
+    const content = fs.readFileSync(filePath, "utf-8");
+
+    const importFolder = extractImportFolder(content);
+    if (!importFolder) return { skipped: true, reason: "no Import: line" };
+
+    const resourceName = path.basename(filePath, ".md");
+    const sourceTypesPath = resolveSourceTypesPath(resourceName, importFolder);
+
+    if (!fs.existsSync(sourceTypesPath)) {
+        return {
+            skipped: true,
+            reason: `no source: ${path.relative(ROOT_DIR, sourceTypesPath)}`,
+        };
+    }
+
+    let sourceFile: SourceFile | undefined;
+    try {
+        sourceFile =
+            project.getSourceFile(sourceTypesPath) ??
+            project.addSourceFileAtPathIfExists(sourceTypesPath);
+    } catch {
+        return { skipped: true, reason: "ts-morph load failed" };
+    }
+
+    if (!sourceFile) {
+        return { skipped: true, reason: "source file not found by ts-morph" };
+    }
+
+    // Collect interfaces and type aliases that have a JSDoc description (public API intent)
+    const hasJsDoc = (n: InterfaceDeclaration | TypeAliasDeclaration) =>
+        n.getJsDocs().some((d) => d.getCommentText());
+
+    const nodesFromFile = (sf: SourceFile) => [
+        ...sf.getInterfaces().filter((i) => i.isExported() && hasJsDoc(i)),
+        ...sf.getTypeAliases().filter((t) => t.isExported() && hasJsDoc(t)),
+    ];
+
+    let publicNodes: Array<InterfaceDeclaration | TypeAliasDeclaration> =
+        nodesFromFile(sourceFile);
+
+    // Barrel files (e.g. form/form-otp-verification/types.ts) only re-export from
+    // another file. Follow named re-exports one level deep.
+    if (publicNodes.length === 0) {
+        for (const exportDecl of sourceFile.getExportDeclarations()) {
+            const reFile = exportDecl.getModuleSpecifierSourceFile();
+            if (!reFile) continue;
+            const exportedNames = new Set(
+                exportDecl.getNamedExports().map((s) => s.getName())
+            );
+            const candidates = nodesFromFile(reFile).filter((n) =>
+                exportedNames.has(n.getName())
+            );
+            publicNodes = publicNodes.concat(candidates);
+        }
+    }
+
+    if (publicNodes.length === 0) {
+        return { skipped: true, reason: "no documented exported interfaces" };
+    }
+
+    const propExtractor = new PropExtractor();
+
+    // Build interface sections
+    const ifaceSections = publicNodes.map((node) => {
+        const props = propExtractor.collectProps(node);
+        const title =
+            publicNodes.length > 1
+                ? `## Props — \`${node.getName()}\``
+                : "## Props";
+        return { title, props };
+    });
+
+    const propsBlock = buildPropsContent(ifaceSections);
+    if (!propsBlock) return { skipped: true, reason: "no props extracted" };
+
+    const newContent = insertPropsSection(content, propsBlock);
+    fs.writeFileSync(filePath, newContent, "utf-8");
+
+    return { skipped: false };
+}
+
+// =============================================================================
+// Main
+// =============================================================================
+
+function main() {
+    const project = new Project({
+        tsConfigFilePath: path.join(ROOT_DIR, "tsconfig.json"),
+        skipAddingFilesFromTsConfig: true,
+    });
+
+    const resourceDirs = [path.join(SKILLS_RESOURCES_DIR, "components")];
+
+    let updated = 0;
+    let skipped = 0;
+    const updatedPaths: string[] = [];
+
+    for (const dir of resourceDirs) {
+        if (!fs.existsSync(dir)) continue;
+
+        for (const file of fs.readdirSync(dir).sort()) {
+            if (!file.endsWith(".md")) continue;
+            const filePath = path.join(dir, file);
+            const { skipped: wasSkipped, reason } = processResourceFile(
+                filePath,
+                project
+            );
+
+            if (wasSkipped) {
+                skipped++;
+                if (process.env.VERBOSE) {
+                    console.log(
+                        `  skip  ${file}${reason ? ` (${reason})` : ""}`
+                    );
+                }
+            } else {
+                updated++;
+                updatedPaths.push(filePath);
+                console.log(`  props ${file}`);
+            }
+        }
+    }
+
+    if (updatedPaths.length > 0) {
+        const { execSync } = require("child_process");
+        execSync(
+            `npx prettier --write ${updatedPaths
+                .map((p) => `"${p}"`)
+                .join(" ")}`,
+            {
+                stdio: "inherit",
+                cwd: ROOT_DIR,
+            }
+        );
+    }
+
+    console.log(`\nDone. Updated: ${updated}, Skipped: ${skipped}`);
+}
+
+if (require.main === module) {
+    main();
+}
diff --git a/skills/fds-build/SKILL.md b/skills/fds-build/SKILL.md
new file mode 100644
index 0000000000..650f1be8f3
--- /dev/null
+++ b/skills/fds-build/SKILL.md
@@ -0,0 +1,167 @@
+---
+name: "fds-build"
+description: "Use when building with @lifesg/react-design-system v4. Covers composition rules, correct import patterns, token usage, and component discovery."
+metadata:
+    version: "4.0.0-alpha"
+    audience: external
+    category: design-system
+---
+
+# Flagship Design System — Agent Skill
+
+You are helping build web applications with **`@lifesg/react-design-system`** for government digital products.
+
+---
+
+## Install
+
+```bash
+npm install @lifesg/react-design-system @lifesg/react-icons @floating-ui/react
+```
+
+Do not install `styled-components` — v4 uses CSS Modules for custom styles.
+
+Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
+
+**If the project is new or missing setup** — read `./resources/setup/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
+
+---
+
+## ThemeProvider
+
+Wrap your app in `ThemeProvider` to apply the correct theme CSS variables and enable dark/light mode.
+
+```tsx
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+import "@lifesg/react-design-system/theme/styles/lifesg.css";
+
+export default function App() {
+    return <ThemeProvider theme="lifesg">{/* your app */}</ThemeProvider>;
+}
+```
+
+Theme is a **string**: `"lifesg"` · `"bookingsg"` · `"ccube"` · `"mylegacy"` · `"oneservice"` · `"pa"` · `"supportgowhere"` · `"sgw-digital-lobby"` · `"careercompass"` · `"rbs"` · `"imda"` · `"spf"` · `"smgs"` · `"a11y-playground"`
+
+Dark/light mode: `mode` prop defaults to `"auto"` (OS preference). Override with `mode="light"` or `mode="dark"`.
+
+---
+
+## Component imports
+
+Always use subpath imports:
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+import { Form } from "@lifesg/react-design-system/form";
+```
+
+---
+
+## Page structure
+
+Every page must have `Navbar` at the top and `Footer` at the bottom.
+
+```tsx
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+
+<Navbar
+    resources={{ primary: { brandName: "MyService", logoSrc: "/logo.svg" } }}
+    items={{ desktop: [{ id: "home", children: "Home", href: "/" }] }}
+/>;
+{
+    /* page content */
+}
+<Footer />;
+```
+
+---
+
+## Design tokens
+
+Tokens are **plain CSS variable strings** — use directly in CSS Modules or inline styles.
+
+Prefer CSS Modules for layout and responsive styles:
+
+```css
+/* Component.module.css */
+.card {
+    background: var(--fds-colour-bg-strong);
+    padding: var(--fds-spacing-24);
+    border-radius: var(--fds-radius-md);
+
+    :global(body.fds-breakpoint-lg-min) & {
+        padding: var(--fds-spacing-32);
+    }
+}
+```
+
+> **CSS Modules gotcha:** always use `:global(body.fds-breakpoint-lg-min)` — never `:where(body.fds-breakpoint-lg-min)`. CSS Modules scopes every class selector it finds; `:global()` opts the breakpoint class out of scoping so it matches the runtime class `ThemeProvider` adds to `document.body`.
+
+Inline styles work for simple one-off values:
+
+```tsx
+import { Colour, Spacing } from "@lifesg/react-design-system/theme";
+
+<div style={{ color: Colour.text, padding: Spacing["spacing-24"] }} />;
+```
+
+**Responsive breakpoints** use body class selectors added by `ThemeProvider`:
+
+-   `body.fds-breakpoint-lg-min` — viewport ≥ lg (769px)
+-   `body.fds-breakpoint-md-min` — viewport ≥ md (481px)
+-   `body.fds-breakpoint-xl-min` — viewport ≥ xl (1201px)
+
+---
+
+## Icons
+
+1. `@lifesg/react-icons` first — read `./resources/components/icon.md` to discover available icon names.
+2. `material-symbols` as fallback only.
+3. Never guess icon names — verify the import exists before using.
+
+---
+
+## Rules
+
+-   Sentence case for all UI text — "Save changes" not "Save Changes"
+-   DS components over raw HTML — `Button` not `<button>`, `Form.Input` not `<input>`
+-   `Form.*` fields: `label` always required; `errorMessage` only after validation fails; `readOnly` on review screens, not `disabled`
+-   Never hardcode `px` values — always use `Spacing` tokens
+-   All `Form.*` components import from `@lifesg/react-design-system/form`
+
+---
+
+## For AI agents — task → resource map
+
+This skill is self-contained — all resource files live under `./resources/` relative to this file. No npm install or external lookup needed.
+
+**Do not write component code without reading its resource file first.**
+
+| Task                                                                  | What to read                                                |
+| --------------------------------------------------------------------- | ----------------------------------------------------------- |
+| New project / missing setup                                           | `./resources/setup/setup.md`                                |
+| Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword |
+| Use a component                                                       | `./resources/components/{name}.md`                          |
+| Grid system, breakpoints, column widths                               | `./resources/components/layout.md`                          |
+| Build a form page (single or multi-step)                              | `./resources/templates/form.md`                             |
+| Build a listing / search results page                                 | `./resources/templates/listing.md`                          |
+| Handle loading / error / empty states                                 | `./resources/patterns/states.md`                            |
+| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/foundations/tokens.md`                         |
+| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/foundations/layout-composition-patterns.md`    |
+
+**Reading strategy:** read `catalogue.md` once for discovery, then fetch only the specific component `{name}.md` files you need. Do not pre-load all component files.
+
+---
+
+## Gotchas
+
+| Symptom                                        | Fix                                                                                                                                                                                                        |
+| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| No styles / wrong fonts                        | Read `./resources/setup/setup.md` — `main.css` CDN link or theme CSS import is likely missing                                                                                                              |
+| Footer doesn't stick to bottom on short pages  | Apply a `className` to `ThemeProvider` and target that selector with `display: flex; flex-direction: column; flex: 1`                                                                                      |
+| Responsive breakpoint rules don't fire         | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                                               |
+| Theme CSS not loading                          | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                                       |
+| `styled-components` import error               | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                                      |
+| `RadioButton` with children throws in React 19 | v4 `RadioButton` spreads all props (including `children`) onto `<input>` — React 19 rejects children on void elements. Wrap in `<label>` with text outside: `<label><RadioButton .../> Label text</label>` |
+| Next.js App Router: no `#root` element         | Next.js renders into `<body>` directly. Replace `#root { ... }` with those styles on `body`, and `#root > div` with `body > div`. See setup.md Next.js section                                             |
diff --git a/skills/fds-build/catalogue.md b/skills/fds-build/catalogue.md
new file mode 100644
index 0000000000..a712a6e849
--- /dev/null
+++ b/skills/fds-build/catalogue.md
@@ -0,0 +1,181 @@
+# Flagship Component Catalogue
+
+One-liner per component. Read `./resources/components/{key}.md` for full props and usage rules before writing code.
+
+---
+
+## Buttons & Actions
+
+| Component | Key      | Also known as                                     | Pairs with               | Description                                                                                | Key props                                      |
+| --------- | -------- | ------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------- |
+| `Button`  | `button` | CTA, action button, submit button, primary button | `Form`, `Modal`, `Alert` | Button with optional text or icon. Style types: default/secondary/light/link + danger flag | `styleType` (req), `loading`, `danger`, `icon` |
+
+---
+
+## Form — Inputs
+
+All `Form.*` components import from `@lifesg/react-design-system/form`. `label` is required on every field.
+
+| Component                  | Key                          | Also known as                                                      | Pairs with             | Description                                          | Key props                                                      |
+| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | ---------------------- | ---------------------------------------------------- | -------------------------------------------------------------- |
+| `Form.Input`               | `form-input`                 | text field, labeled input, form field, input box                   | `Alert`, `Button`      | Standard labeled text input with error state         | `label` (req), `value`, `onChange`, `errorMessage`             |
+| `Form.Textarea`            | `form-textarea`              | multiline, long text, text area, comments box                      | `Alert`, `Button`      | Multi-line text input                                | `label` (req), `value`, `onChange`, `rows`                     |
+| `Form.Select`              | `form-select`                | dropdown, select, single select, picker                            | `Form.Input`, `Button` | Single-option dropdown                               | `label` (req), `options`, `selectedOption`, `onSelectOption`   |
+| `Form.MultiSelect`         | `form-multi-select`          | multi-select, multi-choice dropdown, multi-pick                    | `Form.Input`, `Button` | Multi-option dropdown                                | `label` (req), `options`, `selectedOptions`, `onSelectOptions` |
+| `Form.NestedSelect`        | `form-nested-select`         | hierarchical select, tree select, nested dropdown, category select | —                      | Parent–child option dropdown                         | `label` (req), `options` (nested tree)                         |
+| `Form.NestedMultiSelect`   | `form-nested-multi-select`   | hierarchical multi-select, nested multi-choice                     | —                      | Multi-select variant of nested dropdown              | `label` (req), `options` (nested tree), `selectedOptions`      |
+| `Form.PredictiveTextInput` | `form-predictive-text-input` | autocomplete, typeahead, search with suggestions, live search      | —                      | Text input with async suggestion fetch               | `label` (req), `fetchOptions` (async fn), `onSelectOption`     |
+| `Form.MaskedInput`         | `form-masked-input`          | masked field, NRIC field, redacted input, hidden value             | —                      | Partially masked value with reveal toggle            | `label` (req), `maskRange`, `value`, `onChange`                |
+| `Form.OtpVerification`     | `form-otp-verification`      | OTP, one-time password, verification code, 2FA                     | —                      | Full OTP send-and-verify flow                        | `label` (req), `length`, `onComplete`                          |
+| `Form.ESignature`          | `form-e-signature`           | signature pad, e-signature, digital signature, sign                | —                      | Signature capture canvas — returns base64            | `label` (req), `onResult`                                      |
+| `Input`                    | `input`                      | standalone input, bare input                                       | —                      | Text input without label — use `Form.Input` in forms | `value`, `onChange`                                            |
+| `OtpInput`                 | `otp-input`                  | OTP field, one-time password, verification code, 2FA               | —                      | Individual OTP digit inputs with countdown           | `numOfInput` (req), `cooldownDuration`, `onChange`             |
+
+---
+
+## Form — Numbers & Units
+
+| Component               | Key                       | Also known as                                          | Pairs with   | Description                                       | Key props                                        |
+| ----------------------- | ------------------------- | ------------------------------------------------------ | ------------ | ------------------------------------------------- | ------------------------------------------------ |
+| `Form.Slider`           | `form-slider`             | slider, range input, numeric slider, range slider      | `Form.Input` | Slider for a single numeric value                 | `label` (req), `min`, `max`, `value`, `onChange` |
+| `Form.PhoneNumberInput` | `form-phone-number-input` | phone input, mobile number, country code, tel          | —            | Phone number with country code selector           | `label` (req), `value`, `onChange`               |
+| `Form.UnitNumberInput`  | `form-unit-number-input`  | unit number, floor unit, #floor-unit, apartment number | —            | Specialised input for Singapore floor-unit format | `label` (req), `value`, `onChange`               |
+
+---
+
+## Form — Dates & Times
+
+| Component              | Key                      | Also known as                                         | Pairs with                   | Description                                                          | Key props                                           |
+| ---------------------- | ------------------------ | ----------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------- | --------------------------------------------------- |
+| `Form.DateInput`       | `form-date-input`        | date picker, date field, calendar input, datepicker   | `Calendar`                   | Single date with calendar picker                                     | `label` (req), `value`, `onChange`, `disabledDates` |
+| `Form.DateRangeInput`  | `form-date-range-input`  | date range, start end date, date period, from to date | `Calendar`                   | Paired start/end date pickers — 3 variants: range, week, fixed-range | `label` (req), `value`, `onChange`, `variant`       |
+| `Form.TimePicker`      | `form-timepicker`        | time input, time field, time picker, hour minute      | `Form.DateInput`             | Time input — 12hr or 24hr                                            | `label` (req), `value`, `onChange`, `format`        |
+| `Form.TimeRangePicker` | `form-time-range-picker` | time range, start end time, from to time              | `Form.DateInput`, `Calendar` | Paired start/end time pickers                                        | `label` (req), `value`, `onChange`                  |
+
+---
+
+## Form — Selection & Upload
+
+| Component     | Key            | Also known as                                                   | Pairs with            | Description                                                                    | Key props                                                    |
+| ------------- | -------------- | --------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------ |
+| `Toggle`      | `toggle`       | option card, checkbox card, radio card, yes/no, selectable card | `Form.Input`          | **Preferred** for checkbox/radio inputs in forms — renders as selectable card  | `indicator` (req), `title`, `checked`, `onChange`            |
+| `Checkbox`    | `checkbox`     | checkmark, tick box, tick                                       | `DataTable`, `Filter` | Compact boolean — use for table row selection or filter lists, not form fields | `checked`, `onChange`                                        |
+| `RadioButton` | `radio-button` | radio, single choice, radio group                               | `Filter`              | Compact single-choice — use `Toggle` for form cards                            | `value`, `checked`, `onChange`                               |
+| `FileUpload`  | `file-upload`  | file input, drag and drop, attachment, upload                   | `Alert`, `Button`     | Drag-and-drop upload area — parent manages file state                          | `label` (req), `accept`, `multiple`, `fileItems`, `onUpload` |
+
+---
+
+## Data Display
+
+| Component      | Key             | Also known as                                              | Pairs with                       | Description                                                                      | Key props                                            |
+| -------------- | --------------- | ---------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| `Card`         | `card`          | panel, content box, content card, surface                  | `Typography`, `Button`, `Layout` | Container for grouping related content                                           | `children`                                           |
+| `Accordion`    | `accordion`     | collapsible, expandable, disclosure, FAQ                   | `Typography`                     | Multiple grouped collapsible panels                                              | `items` (req — `{title, content}[]`)                 |
+| `BoxContainer` | `box-container` | collapsible section, collapsible panel, expandable section | `Typography`, `Alert`            | Single collapsible section — supports Edit CTA, error/warning state              | `title` (req), `collapsible`, `expanded`, `onToggle` |
+| `Timeline`     | `timeline`      | step list, event history, process steps, progress list     | `Typography`                     | Vertical sequence of events or steps                                             | `items` (req)                                        |
+| `LinkList`     | `link-list`     | related links, link group, resource list                   | `Card`                           | Styled list of links with descriptions and show-more toggle                      | `items` (req — `{title, href, description}[]`)       |
+| `Typography`   | `typography`    | text, heading, body text, paragraph, label, caption        | `Colour` tokens                  | Text components — `HeadingXXL`→`HeadingXS`, `BodyBL`→`BodyXS`, `LinkBL`→`LinkXS` | `weight`, `as` (override element)                    |
+| `Badge`        | `badge`         | count badge, notification dot, number badge, unread count  | `Navbar`, `Button (icon)`        | Numeric badge overlaid on another element                                        | `value` (req)                                        |
+| `Avatar`       | `avatar`        | user avatar, profile picture, initials, profile icon       | `Navbar`                         | User representation — image or initials fallback                                 | `name` or `imageUrl`                                 |
+
+---
+
+## Notifications & Status
+
+| Component            | Key                   | Also known as                                                     | Pairs with          | Description                                     | Key props                                                              |
+| -------------------- | --------------------- | ----------------------------------------------------------------- | ------------------- | ----------------------------------------------- | ---------------------------------------------------------------------- |
+| `Alert`              | `alert`               | inline alert, callout, info box, warning box, banner message      | `Form`, `Button`    | Inline callout — info/warning/success/error     | `type` (req: `"info"/"warning"/"success"/"error"`), `children`         |
+| `Toast`              | `toast`               | snackbar, flash message, notification, pop-up message             | `Button`            | Transient auto-dismissing notification          | `id`, `message` (req), `type`                                          |
+| `NotificationBanner` | `notification-banner` | banner, announcement, top banner, system banner                   | `Navbar`            | Persistent banner below Navbar                  | `type` (req), `children`                                               |
+| `Pill`               | `pill`                | status pill, status label, status badge, chip                     | `Card`, `DataTable` | Static status label — 1–2 words, no interaction | `color`, `children`                                                    |
+| `Tag`                | `tag`                 | filter chip, category label, filter tag, keyword tag              | `Filter`, `Card`    | Category/filter label — static or interactive   | `colorType`, `removable`, `onRemove`, `children`                       |
+| `ProgressIndicator`  | `progress-indicator`  | stepper, step indicator, progress steps, wizard steps, multi-step | `Button`, `Form`    | Step-by-step progress tracker                   | `steps` (req), `currentIndex` (req, 0-based), `displayExtractor` (req) |
+
+---
+
+## Navigation
+
+| Component    | Key          | Also known as                                      | Pairs with                    | Description                                                   | Key props                                                                                       |
+| ------------ | ------------ | -------------------------------------------------- | ----------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `Navbar`     | `navbar`     | top nav, navigation bar, header, app bar           | `Masthead`, `Footer`          | Top navigation — every page must include this                 | `resources.primary.brandName`, `items.desktop`                                                  |
+| `Footer`     | `footer`     | page footer, bottom bar                            | `Navbar`                      | Page footer — `<Footer />` with no props for standard variant | _(none required)_                                                                               |
+| `Breadcrumb` | `breadcrumb` | wayfinding, breadcrumb trail, crumbs               | `Navbar`                      | Hierarchical location breadcrumb                              | `items` (req — `{label, href}[]`)                                                               |
+| `Sidenav`    | `sidenav`    | sidebar navigation, side menu, left nav            | `Layout`                      | Vertical sidebar navigation — 4-level nesting                 | `items` (req), `selectedId`                                                                     |
+| `Tab`        | `tab`        | tabs, tabbed navigation, tab strip, tab bar        | `Filter`, `DataTable`         | Tabbed content switching                                      | `items` (req), `activeTabKey`, `onClickTab`                                                     |
+| `LocalNav`   | `local-nav`  | in-page nav, anchor links, section nav, jump links | `Layout`                      | In-page section navigation                                    | `items` (req — `{id, label}[]`)                                                                 |
+| `Menu`       | `menu`       | dropdown menu, context menu, action menu           | `Button`                      | Dropdown menu attached to a trigger                           | `items` (req), `trigger` (req)                                                                  |
+| `Pagination` | `pagination` | page controls, paging, page numbers                | `DataTable`, `Filter`, `Card` | Page navigation controls — always set `showFirstAndLastNav`   | `totalItems` (req), `pageSize` (req), `activePage`, `onPageChange`, `showFirstAndLastNav` (req) |
+
+---
+
+## Overlays
+
+| Component | Key       | Also known as                                 | Pairs with          | Description                                         | Key props                                            |
+| --------- | --------- | --------------------------------------------- | ------------------- | --------------------------------------------------- | ---------------------------------------------------- |
+| `Modal`   | `modal`   | dialog, popup, lightbox, confirmation dialog  | `Button`, `Form`    | Full overlay dialog — blocks background interaction | `show` (req); nest `Modal.Box` with `onClose` inside |
+| `Drawer`  | `drawer`  | side sheet, slide-in panel, tray, side drawer | `Filter`, `Sidenav` | Slide-in panel from screen edge                     | `show` (req), `onClose`                              |
+| `Popover` | `popover` | anchored popup, floating panel, overlay panel | `Button`            | Anchored floating content panel                     | `trigger` (req), `content` (req)                     |
+
+---
+
+## Filters & Search
+
+| Component | Key      | Also known as                                                | Pairs with                                                   | Description                                              | Key props                       |
+| --------- | -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------- |
+| `Filter`  | `filter` | filter panel, filter sidebar, faceted search, search filters | `DataTable`, `Pagination`, `Card`, `Checkbox`, `RadioButton` | Filter UI — auto-switches desktop sidebar / mobile modal | `items` (req), `onFilterChange` |
+
+---
+
+## Specialist / Complex
+
+| Component                 | Key                         | Also known as                                                                    | Pairs with                                 | Description                                                                                | Key props                                                        |
+| ------------------------- | --------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| `DataTable`               | `data-table`                | sortable table, data grid, table with selection                                  | `Pagination`, `Filter`, `Checkbox`, `Pill` | Sortable, configurable data table with row selection                                       | `columns` (req), `data` (req)                                    |
+| `Table`                   | `table`                     | basic table, html table, simple table                                            | `Typography`                               | Basic styled table wrapper                                                                 | `children`                                                       |
+| `Calendar`                | `calendar`                  | date calendar, month view, date picker calendar                                  | `Form.DateInput`, `Form.DateRangeInput`    | Full calendar month view — single or multi-select                                          | `value`, `onSelect`, `disabledDates`                             |
+| `DateNavigator`           | `date-navigator`            | date stepper, prev next date, date arrow                                         | `Calendar`                                 | Prev/next date navigation control                                                          | `value` (req), `onPrev`, `onNext`                                |
+| `TimeSlotBar`             | `time-slot-bar`             | time slots, booking slots, availability bar                                      | `Calendar`, `Form.DateInput`               | Horizontal time slot selection bar                                                         | `slots` (req), `selectedSlot`, `onSelectSlot`                    |
+| `TimeSlotBarWeek`         | `time-slot-bar-week`        | week slots, weekly time slots                                                    | `Calendar`                                 | Week-view time slot bar                                                                    | `slots` (req), `selectedSlot`, `onSelectSlot`                    |
+| `TimeSlotWeekView`        | `time-slot-week-view`       | week view, weekly calendar, weekly availability                                  | `Calendar`                                 | Full week-view time slot grid                                                              | `slots` (req), `selectedSlot`, `onSelectSlot`                    |
+| `Timetable`               | `timetable`                 | schedule grid, period grid, class timetable                                      | —                                          | Timetable / period grid display                                                            | `data` (req)                                                     |
+| `Schedule`                | `schedule`                  | daily schedule, time schedule, day view                                          | `Calendar`                                 | Daily schedule display                                                                     | `data` (req), `date`                                             |
+| `ErrorDisplay`            | `error-display`             | error page, empty state, no results, 404, 500, maintenance page, session timeout | `Button`                                   | Full-page or section error/empty state — covers HTTP errors, empty results, session states | `type` (req: `"404"/"500"/"maintenance"/"no-results"/"timeout"`) |
+| `FeedbackRating`          | `feedback-rating`           | star rating, rating widget, feedback, satisfaction survey                        | `Modal`, `Toast`                           | Rating/feedback capture widget                                                             | `rating`, `onRatingChange`                                       |
+| `CountdownTimer`          | `countdown-timer`           | timer, countdown, time remaining, session timer                                  | `Alert`, `Modal`                           | Countdown display                                                                          | `targetDate` or `duration` (req)                                 |
+| `FileDownload`            | `file-download`             | download link, file download, attachment download                                | `Card`                                     | File download link/button                                                                  | `filename` (req), `fileUrl` (req)                                |
+| `FullscreenImageCarousel` | `fullscreen-image-carousel` | image carousel, lightbox gallery, photo gallery                                  | `Card`, `Button`                           | Fullscreen image carousel — discriminated union items                                      | `items` (req — discriminated union), `show`, `onClose`           |
+| `UnEditableSection`       | `uneditable-section`        | read-only field, display field, view mode, review field                          | `Form`, `Card`                             | Read-only field display for review screens                                                 | `items` (req — `{label, value, displayWidth}[]`)                 |
+
+---
+
+## Branding & Platform
+
+| Component          | Key                 | Also known as                                      | Pairs with | Description                                                 | Key props                                     |
+| ------------------ | ------------------- | -------------------------------------------------- | ---------- | ----------------------------------------------------------- | --------------------------------------------- |
+| `SingpassButton`   | `singpass-button`   | Singpass login, Myinfo button, Singpass            | —          | Pre-built Singpass login button — do not custom style       | _(none — do not custom style)_                |
+| `SmartAppBanner`   | `smart-app-banner`  | app download banner, mobile app banner, app store  | `Navbar`   | App store download prompt banner                            | `show`, `appStoreUrl`, `playStoreUrl`         |
+| `Masthead`         | `masthead`          | gov.sg masthead, government masthead, sgd masthead | `Navbar`   | Official gov.sg masthead — required for government services | _(none required)_                             |
+| `LanguageSwitcher` | `language-switcher` | language selector, locale switcher, bilingual      | `Navbar`   | Language/locale selection control                           | `items` (req), `selectedLanguage`, `onSelect` |
+
+---
+
+## Layout & Utility
+
+| Component         | Key                | Also known as                                                               | Pairs with           | Description                                                                                                                                          | Key props                                                      |
+| ----------------- | ------------------ | --------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `Layout`          | `layout`           | grid, container, column, responsive layout, col                             | `Card`, `Typography` | Responsive grid — `Layout.Container type="grid"` + `Layout.ColDiv xsCols`                                                                            | `Layout.Container type` (req), `Layout.ColDiv xsCols lgCols`   |
+| `TextList`        | `text-list`        | bullet list, unordered list, ordered list, numbered list, ul, ol            | `Typography`, `Card` | Semantic lists — `TextList.Ul` (bullets) and `TextList.Ol` (numbered/lettered). Supports custom icon bullets                                         | `items` (req), `listStyleType`                                 |
+| `HistogramSlider` | `histogram-slider` | range slider with histogram, price range, distribution slider, filter range | `Filter`             | Range slider with histogram chart above — for filter panels where showing value distribution aids range selection                                    | `min` (req), `max` (req), `value`, `onChange`, `histogramData` |
+| `Divider`         | `divider`          | horizontal rule, separator, hr, line                                        | `Card`, `Accordion`  | Visual separator between sections                                                                                                                    | _(none required)_                                              |
+| `ImageButton`     | `image-button`     | image CTA, image card button, clickable image                               | `Layout`             | Image with text overlay as a button                                                                                                                  | `imageUrl` (req), `label`, `onClick`                           |
+| `Table`           | `table`            | basic table, html table, simple table, read-only table                      | `Typography`         | Styled HTML table wrapper — `Table.Container` + `Table` + `Table.Head/Body/Row/HeaderCell/Cell`. No sorting or selection — use `DataTable` for those | `children`                                                     |
+| `DashedBorder`    | `dashed-border`    | dashed outline, drop zone border, placeholder region                        | `FileUpload`         | Container with dashed SVG border — for drop zones, placeholder regions, or empty-state containers                                                    | `children`                                                     |
+
+---
+
+## Icons
+
+| Component   | Key         | Also known as                                                          | Pairs with         | Description                                                                                                                                                                                             | Key props                           |
+| ----------- | ----------- | ---------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| Icons       | `icon`      | icon, svg icon, react icon, arrow icon, tick icon, MUI                 | `Button`, `Navbar` | Icons from `@lifesg/react-icons` — separate package. Each icon is its own named export: `import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right"`. Never guess names — read the resource file. | `aria-label` (for standalone icons) |
+| `Animation` | `animation` | loading spinner, spinner, loading indicator, animate, transition, dots | —                  | Loading and transition animations — `LoadingSpinner`, `LoadingDots`, `LoadingDotsSpinner`. Import from `@lifesg/react-design-system/animations`                                                         | _(none required)_                   |
diff --git a/skills/fds-build/evals/evals.json b/skills/fds-build/evals/evals.json
new file mode 100644
index 0000000000..a9afd9c14b
--- /dev/null
+++ b/skills/fds-build/evals/evals.json
@@ -0,0 +1,519 @@
+{
+    "skill_name": "fds-build",
+    "evals": [
+        {
+            "id": 0,
+            "prompt": "Build a registration form page using @lifesg/react-design-system v4. The form should collect: full name, email, phone number, and date of birth. Include field validation — all fields required, email must be valid format. Show an error summary at the top if submission fails. Show a success Alert after successful submission. Include Navbar and Footer.",
+            "expected_output": "A React component using ThemeProvider from @lifesg/react-design-system/theme, Navbar, Footer, Layout.Container type=grid, Form.Input for name/email/phone, Form.DateInput for DOB, Button.Default type=submit with loading+disabled during async, Alert type=error for summary, Alert type=success after submission. errorMessage only set after validation fails. No raw <input> elements. No styled-components. No Tailwind.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-theme-provider",
+                    "description": "Wraps app in ThemeProvider from @lifesg/react-design-system/theme",
+                    "type": "contains",
+                    "value": "ThemeProvider"
+                },
+                {
+                    "id": "uses-form-input",
+                    "description": "Uses Form.Input not raw <input>",
+                    "type": "contains",
+                    "value": "Form.Input"
+                },
+                {
+                    "id": "no-raw-input",
+                    "description": "Does not use raw <input> elements",
+                    "type": "not_contains",
+                    "value": "<input"
+                },
+                {
+                    "id": "uses-form-date-input",
+                    "description": "Uses Form.DateInput for date of birth",
+                    "type": "contains",
+                    "value": "Form.DateInput"
+                },
+                {
+                    "id": "uses-alert-error",
+                    "description": "Uses Alert type=error for validation summary",
+                    "type": "contains",
+                    "value": "type=\"error\""
+                },
+                {
+                    "id": "uses-alert-success",
+                    "description": "Uses Alert type=success after submission",
+                    "type": "contains",
+                    "value": "type=\"success\""
+                },
+                {
+                    "id": "button-loading-disabled",
+                    "description": "Submit button uses both loading and disabled during async",
+                    "type": "contains",
+                    "value": "loading"
+                },
+                {
+                    "id": "uses-navbar",
+                    "description": "Page includes Navbar",
+                    "type": "contains",
+                    "value": "Navbar"
+                },
+                {
+                    "id": "uses-footer",
+                    "description": "Page includes Footer",
+                    "type": "contains",
+                    "value": "Footer"
+                },
+                {
+                    "id": "uses-layout-container",
+                    "description": "Uses Layout.Container for structure",
+                    "type": "contains",
+                    "value": "Layout.Container"
+                },
+                {
+                    "id": "no-styled-components",
+                    "description": "Does not import styled-components in v4",
+                    "type": "not_contains",
+                    "value": "from \"styled-components\""
+                },
+                {
+                    "id": "correct-form-import",
+                    "description": "Form imported from correct subpath",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/form"
+                }
+            ]
+        },
+        {
+            "id": 1,
+            "prompt": "Build a service listing page using @lifesg/react-design-system v4. Show a hero banner with a title and a search bar (location input + category dropdown + Search button). Below the hero, show a filter sidebar on the left (sort by radio buttons, category checkboxes) and a results area on the right with a result count and 3 placeholder Card components. Include Navbar and Footer.",
+            "expected_output": "A React component with Navbar, a hero section, Layout.Container, a two-column layout with Filter component on the left and results on the right. Results area shows Typography.BodyMD for count and Card components. Uses Form.Input for location, Form.Select for category, RadioButton for sort, Filter.Checkbox or Checkbox for categories. No DataTable for citizen-facing results.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-navbar-footer",
+                    "description": "Includes Navbar and Footer",
+                    "type": "contains",
+                    "value": "Navbar"
+                },
+                {
+                    "id": "uses-filter",
+                    "description": "Uses Filter component for sidebar",
+                    "type": "contains",
+                    "value": "Filter"
+                },
+                {
+                    "id": "uses-card-not-datatable",
+                    "description": "Uses Card for citizen-facing results, not DataTable",
+                    "type": "contains",
+                    "value": "Card"
+                },
+                {
+                    "id": "no-datatable",
+                    "description": "Does not use DataTable for citizen-facing listing",
+                    "type": "not_contains",
+                    "value": "DataTable"
+                },
+                {
+                    "id": "shows-result-count",
+                    "description": "Shows a result count using Typography",
+                    "type": "contains",
+                    "value": "result"
+                },
+                {
+                    "id": "uses-form-input-search",
+                    "description": "Search bar uses Form.Input",
+                    "type": "contains",
+                    "value": "Form.Input"
+                },
+                {
+                    "id": "uses-form-select",
+                    "description": "Category uses Form.Select not raw <select>",
+                    "type": "contains",
+                    "value": "Form.Select"
+                },
+                {
+                    "id": "no-raw-select",
+                    "description": "Does not use raw <select>",
+                    "type": "not_contains",
+                    "value": "<select"
+                },
+                {
+                    "id": "two-column-layout",
+                    "description": "Uses a two-column layout structure",
+                    "type": "contains",
+                    "value": "Layout.Container"
+                }
+            ]
+        },
+        {
+            "id": 2,
+            "prompt": "I need a delete confirmation modal using @lifesg/react-design-system v4. A button labelled 'Delete item' opens a modal. The modal has a title 'Delete this item?', a description 'This action cannot be undone.', a Cancel button and a red Confirm button. Clicking either closes the modal.",
+            "expected_output": "Uses Modal + Modal.Box with show controlled by useState. enableOverlayClick + onOverlayClick both call the same close handler. Modal.Box has showCloseButton and onClose. Direct child of Modal is not a Fragment. Confirm button uses danger prop. Both Cancel and Confirm call setShow(false).",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-modal",
+                    "description": "Uses Modal component",
+                    "type": "contains",
+                    "value": "Modal"
+                },
+                {
+                    "id": "uses-modal-box",
+                    "description": "Uses Modal.Box inside Modal",
+                    "type": "contains",
+                    "value": "Modal.Box"
+                },
+                {
+                    "id": "controlled-show",
+                    "description": "show prop controlled by state",
+                    "type": "contains",
+                    "value": "show="
+                },
+                {
+                    "id": "has-close-button",
+                    "description": "Modal.Box has showCloseButton",
+                    "type": "contains",
+                    "value": "showCloseButton"
+                },
+                {
+                    "id": "uses-danger",
+                    "description": "Confirm/delete button uses danger prop",
+                    "type": "contains",
+                    "value": "danger"
+                },
+                {
+                    "id": "no-fragment-child",
+                    "description": "Does not use Fragment as direct child of Modal",
+                    "type": "not_contains",
+                    "value": "<>"
+                },
+                {
+                    "id": "overlay-click-handled",
+                    "description": "Overlay click handled via enableOverlayClick + onOverlayClick",
+                    "type": "contains",
+                    "value": "onOverlayClick"
+                }
+            ]
+        },
+        {
+            "id": 3,
+            "prompt": "Build a dashboard page using @lifesg/react-design-system v4. Show 4 KPI metric cards in a responsive grid (2 columns on tablet, 4 on desktop). Each card shows a metric label, a large number value, and a percentage change badge. Below the cards, show a full-width section heading and a placeholder for a chart. Include Navbar and Footer.",
+            "expected_output": "Uses Layout.Container type=grid with Layout.ColDiv xsCols=8 mdCols=6 lgCols=3 for the 4-column responsive grid. Metric values use Typography.HeadingXL or similar large heading. Badge component for percentage change. Colour tokens used, not hardcoded hex. No Tailwind classes.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-layout-grid",
+                    "description": "Uses Layout.Container type=grid",
+                    "type": "contains",
+                    "value": "type=\"grid\""
+                },
+                {
+                    "id": "responsive-cols",
+                    "description": "ColDiv uses xsCols for mobile stacking",
+                    "type": "contains",
+                    "value": "xsCols"
+                },
+                {
+                    "id": "uses-desktop-cols",
+                    "description": "ColDiv uses lgCols for 4-column desktop layout",
+                    "type": "contains",
+                    "value": "lgCols"
+                },
+                {
+                    "id": "uses-card",
+                    "description": "Metric cards use Card component",
+                    "type": "contains",
+                    "value": "Card"
+                },
+                {
+                    "id": "uses-badge",
+                    "description": "Percentage change uses Badge component",
+                    "type": "contains",
+                    "value": "Badge"
+                },
+                {
+                    "id": "uses-navbar-footer",
+                    "description": "Includes Navbar and Footer",
+                    "type": "contains",
+                    "value": "Navbar"
+                },
+                {
+                    "id": "no-hardcoded-hex",
+                    "description": "Does not hardcode hex colour values",
+                    "type": "not_contains",
+                    "value": "#"
+                },
+                {
+                    "id": "no-tailwind",
+                    "description": "Does not use Tailwind class names",
+                    "type": "not_contains",
+                    "value": "className=\"flex"
+                }
+            ]
+        },
+        {
+            "id": 4,
+            "prompt": "I need to show a 'no results found' state on my listing page using @lifesg/react-design-system. The search returned zero results. Show the appropriate empty state with a 'Clear filters' action button.",
+            "expected_output": "Uses ErrorDisplay component with type='no-item-found'. Imports from @lifesg/react-design-system/error-display. Provides actionButton prop with children='Clear filters' and onClick handler. Does not build a custom empty state with raw Typography + Button.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-error-display",
+                    "description": "Uses ErrorDisplay component, not a custom empty state",
+                    "type": "contains",
+                    "value": "ErrorDisplay"
+                },
+                {
+                    "id": "correct-type",
+                    "description": "Uses type='no-item-found'",
+                    "type": "contains",
+                    "value": "no-item-found"
+                },
+                {
+                    "id": "correct-import",
+                    "description": "Imports from error-display subpath",
+                    "type": "contains",
+                    "value": "error-display"
+                },
+                {
+                    "id": "has-action-button",
+                    "description": "Includes actionButton prop for clear filters",
+                    "type": "contains",
+                    "value": "actionButton"
+                }
+            ]
+        },
+        {
+            "id": 5,
+            "prompt": "Add a loading state to my page. While data is fetching, show a full-page loading spinner centred in a card. Once loaded, show the content.",
+            "expected_output": "Uses LoadingSpinner imported from @lifesg/react-design-system/animations (not invented or from another library). Wrapped in a Card with centred layout. Conditional render based on isLoading state.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-loading-spinner",
+                    "description": "Uses LoadingSpinner component",
+                    "type": "contains",
+                    "value": "LoadingSpinner"
+                },
+                {
+                    "id": "correct-import",
+                    "description": "LoadingSpinner imported from animations subpath",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/animations"
+                },
+                {
+                    "id": "conditional-render",
+                    "description": "Loading state conditionally rendered",
+                    "type": "contains",
+                    "value": "isLoading"
+                },
+                {
+                    "id": "no-custom-spinner",
+                    "description": "Does not invent a custom spinner with raw CSS",
+                    "type": "not_contains",
+                    "value": "animation: spin"
+                }
+            ]
+        },
+        {
+            "id": 6,
+            "prompt": "Build a registration form using @lifesg/react-design-system v3. Collect full name, email, and a date of birth. On submit, show a success Toast. Include Navbar and Footer.",
+            "expected_output": "Uses StyleSheetManager + ThemeProvider with a theme object (e.g. LifeSGTheme) from @lifesg/react-design-system/theme. Uses styled-components for custom layout. Form.Input for name/email. Form.DateInput for DOB. Toast component for success feedback. No raw <input> elements. No plain CSS variables — tokens are interpolation functions inside styled templates.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-stylesheet-manager",
+                    "description": "Wraps app in StyleSheetManager (v3 requirement)",
+                    "type": "contains",
+                    "value": "StyleSheetManager"
+                },
+                {
+                    "id": "theme-object-not-string",
+                    "description": "ThemeProvider receives a theme object, not a string",
+                    "type": "contains",
+                    "value": "LifeSGTheme"
+                },
+                {
+                    "id": "uses-form-input",
+                    "description": "Uses Form.Input for text fields",
+                    "type": "contains",
+                    "value": "Form.Input"
+                },
+                {
+                    "id": "uses-form-date-input",
+                    "description": "Uses Form.DateInput for date of birth",
+                    "type": "contains",
+                    "value": "Form.DateInput"
+                },
+                {
+                    "id": "uses-toast",
+                    "description": "Uses Toast for success feedback",
+                    "type": "contains",
+                    "value": "Toast"
+                },
+                {
+                    "id": "no-css-variable-strings",
+                    "description": "Does not use plain CSS variable strings (v4 pattern) in styled-components",
+                    "type": "not_contains",
+                    "value": "var(--fds-"
+                },
+                {
+                    "id": "uses-subpath-imports",
+                    "description": "Imports use subpath pattern",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/form"
+                }
+            ]
+        },
+        {
+            "id": 7,
+            "prompt": "Build a Form.Select dropdown using @lifesg/react-design-system v4. The options are country objects: { value: 'sg', label: 'Singapore' }, { value: 'my', label: 'Malaysia' }. When the user selects an option, the closed selector should show the country name (e.g. 'Singapore'), not the code (e.g. 'sg').",
+            "expected_output": "Form.Select with options array, valueExtractor returning opt.value, listExtractor returning opt.label, and displayValueExtractor returning opt.label. Without displayValueExtractor the selector shows the raw value ('sg') instead of the label. All three extractors must be present.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-form-select",
+                    "description": "Uses Form.Select component",
+                    "type": "contains",
+                    "value": "Form.Select"
+                },
+                {
+                    "id": "has-value-extractor",
+                    "description": "Provides valueExtractor",
+                    "type": "contains",
+                    "value": "valueExtractor"
+                },
+                {
+                    "id": "has-list-extractor",
+                    "description": "Provides listExtractor",
+                    "type": "contains",
+                    "value": "listExtractor"
+                },
+                {
+                    "id": "has-display-value-extractor",
+                    "description": "Provides displayValueExtractor to show label not raw value in closed selector",
+                    "type": "contains",
+                    "value": "displayValueExtractor"
+                },
+                {
+                    "id": "extractor-returns-label",
+                    "description": "displayValueExtractor returns the label field, not value",
+                    "type": "contains",
+                    "value": "opt.label"
+                }
+            ]
+        },
+        {
+            "id": 8,
+            "prompt": "I need a read-only summary table showing 3 rows of data: Name, Status, and Date. No sorting or row selection needed. Use @lifesg/react-design-system.",
+            "expected_output": "Uses Table.Container wrapping Table with Table.Head, Table.Body, Table.Row, Table.HeaderCell and Table.Cell sub-components. Imports from @lifesg/react-design-system/table. Does not use DataTable (overkill for read-only data). Does not use raw <table> HTML.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-table-container",
+                    "description": "Wraps table in Table.Container for scroll behaviour",
+                    "type": "contains",
+                    "value": "Table.Container"
+                },
+                {
+                    "id": "uses-table-head",
+                    "description": "Uses Table.Head for header row",
+                    "type": "contains",
+                    "value": "Table.Head"
+                },
+                {
+                    "id": "uses-table-cell",
+                    "description": "Uses Table.Cell for data cells",
+                    "type": "contains",
+                    "value": "Table.Cell"
+                },
+                {
+                    "id": "correct-import",
+                    "description": "Imports Table from the table subpath",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/table"
+                },
+                {
+                    "id": "no-datatable",
+                    "description": "Does not use DataTable for a simple read-only table",
+                    "type": "not_contains",
+                    "value": "DataTable"
+                },
+                {
+                    "id": "no-raw-table",
+                    "description": "Does not use raw <table> HTML elements",
+                    "type": "not_contains",
+                    "value": "<table"
+                }
+            ]
+        },
+        {
+            "id": 9,
+            "prompt": "Add a back arrow icon and a settings gear icon to a page header using @lifesg/react-design-system. The back arrow should be on the left, the gear on the right.",
+            "expected_output": "Imports icons from @lifesg/react-icons subpaths: ArrowLeftIcon from @lifesg/react-icons/arrow-left and GearIcon from @lifesg/react-icons/gear. Does not import from @lifesg/react-design-system directly for icons. Does not use MUI icons when react-icons has a suitable match. Icon component names end in 'Icon'.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "imports-from-react-icons",
+                    "description": "Imports from @lifesg/react-icons, not the main DS package",
+                    "type": "contains",
+                    "value": "@lifesg/react-icons"
+                },
+                {
+                    "id": "uses-arrow-icon",
+                    "description": "Uses a named arrow icon (not a custom SVG)",
+                    "type": "contains",
+                    "value": "ArrowLeft"
+                },
+                {
+                    "id": "uses-gear-icon",
+                    "description": "Uses GearIcon for settings",
+                    "type": "contains",
+                    "value": "Gear"
+                },
+                {
+                    "id": "icon-names-end-in-icon",
+                    "description": "Icon component names end in Icon suffix",
+                    "type": "contains",
+                    "value": "Icon"
+                },
+                {
+                    "id": "no-custom-svg",
+                    "description": "Does not inline a custom <svg> instead of using the package",
+                    "type": "not_contains",
+                    "value": "<svg"
+                }
+            ]
+        },
+        {
+            "id": 10,
+            "prompt": "I have a form with a Yes/No question 'Do you agree to the terms?' and a filter panel with a 'Remember me' tick-box. Which DS components should I use for each? Use @lifesg/react-design-system v4.",
+            "expected_output": "Yes/No question in a form: use Toggle with type='yes' and type='no' (not RadioButton, not Checkbox). Filter tick-box: use Checkbox (not Toggle). Toggle is for card-style form selections; Checkbox is for compact boolean filter/table use.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-toggle-for-yes-no",
+                    "description": "Uses Toggle for the yes/no form question",
+                    "type": "contains",
+                    "value": "Toggle"
+                },
+                {
+                    "id": "toggle-type-yes",
+                    "description": "Toggle uses type='yes' and type='no'",
+                    "type": "contains",
+                    "value": "type=\"yes\""
+                },
+                {
+                    "id": "uses-checkbox-for-filter",
+                    "description": "Uses Checkbox for the compact filter tick-box",
+                    "type": "contains",
+                    "value": "Checkbox"
+                },
+                {
+                    "id": "no-radio-for-yes-no",
+                    "description": "Does not use RadioButton for the binary yes/no question",
+                    "type": "not_contains",
+                    "value": "RadioButton"
+                }
+            ]
+        }
+    ]
+}
diff --git a/skills/fds-build/resources/components/accordion.md b/skills/fds-build/resources/components/accordion.md
new file mode 100644
index 0000000000..1b33b0c5a0
--- /dev/null
+++ b/skills/fds-build/resources/components/accordion.md
@@ -0,0 +1,128 @@
+# Accordion
+
+Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
+
+## When to use
+
+Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
+
+## Composition
+
+```
+Accordion                    ← container, manages expand/collapse state
+├── Accordion.Item           ← expandable panel
+├── Accordion.Item
+└── Accordion.Item
+```
+
+All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
+
+## Variants
+
+| `type` on `Accordion.Item` | Usage                                |
+| -------------------------- | ------------------------------------ |
+| `"default"`                | Standard title size — default        |
+| `"small"`                  | Compact title size for dense layouts |
+
+## Usage
+
+```tsx
+import { Accordion } from "@lifesg/react-design-system/accordion";
+
+// Multiple items — all collapsed by default
+const FaqSection = () => (
+    <Accordion
+        title="Frequently asked questions"
+        headingLevel={2}
+        initialDisplay="collapse-all"
+        enableExpandAll
+    >
+        <Accordion.Item title="What is this service?">
+            <p>This service lets you manage your account settings.</p>
+        </Accordion.Item>
+        <Accordion.Item title="How do I reset my password?">
+            <p>Click "Forgot password" on the login page.</p>
+        </Accordion.Item>
+        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
+        <Accordion.Item
+            title={
+                <span>
+                    Can I use <strong>bold text</strong> in a title?
+                </span>
+            }
+        >
+            <p>Yes — wrap JSX title content in a span.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+
+// Controlled item — force one item open regardless of Expand All state
+const ControlledExample = () => (
+    <Accordion initialDisplay="collapse-all">
+        <Accordion.Item title="Always expanded" expanded={true}>
+            <p>This item ignores the parent initialDisplay.</p>
+        </Accordion.Item>
+        <Accordion.Item title="Follows parent state">
+            <p>This item collapses with the rest.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+```
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string \| JSX.Element`          | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop             | Type                            | Default | Description                                                                                                                                                                                                                                                                               |
+| ---------------- | ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*       | `string \| JSX.Element`         | —       | —                                                                                                                                                                                                                                                                                         |
+| `children` \*    | `JSX.Element \| JSX.Element[]`  | —       | —                                                                                                                                                                                                                                                                                         |
+| `expanded`       | `boolean`                       | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item.                                                                                 |
+| `id`             | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
+| `className`      | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
+| `type`           | `AccordionItemType`             | —       | Visual size variant for the accordion item.                                                                                                                                                                                                                                               |
+| `collapsible`    | `boolean`                       | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                                                                                                 |
+| `onExpandChange` | `((expanded: boolean) => void)` | —       | Called when the user toggles this item or the parent "Show all" / "Hide all" button fires. When provided, the item enters **controlled mode** — the caller must update the `expanded` prop in response. Without this prop, the item manages its own state internally (uncontrolled mode). |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Rules
+
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
+-   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
+-   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
+-   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
+
+## Anti-patterns
+
+-   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
+-   Using Accordion when all content should be visible at once — use a plain layout instead.
+-   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
+-   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/skills/fds-build/resources/components/alert.md b/skills/fds-build/resources/components/alert.md
new file mode 100644
index 0000000000..3142159a30
--- /dev/null
+++ b/skills/fds-build/resources/components/alert.md
@@ -0,0 +1,54 @@
+# Alert
+
+Import: `import { Alert } from "@lifesg/react-design-system/alert"`
+
+## When to use
+
+Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
+
+## Variants
+
+| `type`          | When to use                                |
+| --------------- | ------------------------------------------ |
+| `"success"`     | Action completed successfully              |
+| `"error"`       | Action failed or system error              |
+| `"warning"`     | User should proceed with caution           |
+| `"info"`        | Neutral informational message              |
+| `"description"` | Descriptive content with no status meaning |
+
+## Usage
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+
+<Alert type="warning" showIcon role="alert">
+    Your session will expire in 5 minutes. Save your work to avoid losing
+    progress.
+</Alert>;
+```
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Rules
+
+-   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
+-   Use `actionLink` for recoverable errors (retry, undo, view details).
+-   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
+-   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
+-   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
+
+## Anti-patterns
+
+-   Using Alert for form field validation errors — use inline form error patterns instead.
+-   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
+-   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/skills/fds-build/resources/components/animation.md b/skills/fds-build/resources/components/animation.md
new file mode 100644
index 0000000000..55ac88341e
--- /dev/null
+++ b/skills/fds-build/resources/components/animation.md
@@ -0,0 +1,18 @@
+# Animation
+
+Import: `import { Animation } from "@lifesg/react-design-system/animation"`
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
diff --git a/skills/fds-build/resources/components/avatar.md b/skills/fds-build/resources/components/avatar.md
new file mode 100644
index 0000000000..def3ad46c4
--- /dev/null
+++ b/skills/fds-build/resources/components/avatar.md
@@ -0,0 +1,10 @@
+# Avatar
+
+Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
diff --git a/skills/fds-build/resources/components/badge.md b/skills/fds-build/resources/components/badge.md
new file mode 100644
index 0000000000..b6a08e7cc8
--- /dev/null
+++ b/skills/fds-build/resources/components/badge.md
@@ -0,0 +1,18 @@
+# Badge
+
+Import: `import { Badge } from "@lifesg/react-design-system/badge"`
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Rules
+
+-   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
+-   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/skills/fds-build/resources/components/box-container.md b/skills/fds-build/resources/components/box-container.md
new file mode 100644
index 0000000000..a0cee68541
--- /dev/null
+++ b/skills/fds-build/resources/components/box-container.md
@@ -0,0 +1,61 @@
+# BoxContainer
+
+Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
+
+## When to use
+
+Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
+
+## Sub-components
+
+### BoxContainerSubComponentTestIds
+
+| Prop               | Type     | Description                            |
+| ------------------ | -------- | -------------------------------------- |
+| `title`            | `string` | Test id for the header title           |
+| `displayStateIcon` | `string` | Test id for the display state icon     |
+| `handle`           | `string` | Test id for the expand/collapse handle |
+
+## Variants
+
+| `displayState` | When to use                                |
+| -------------- | ------------------------------------------ |
+| `"default"`    | Normal state — no icon                     |
+| `"error"`      | Section has validation errors              |
+| `"warning"`    | Section has a warning that needs attention |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Rules
+
+-   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
+-   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
+-   Use `collapsible={false}` when the content must always be visible.
+-   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
+
+## Anti-patterns
+
+-   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
+-   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
+-   Nesting BoxContainer inside another BoxContainer.
diff --git a/skills/fds-build/resources/components/breadcrumb.md b/skills/fds-build/resources/components/breadcrumb.md
new file mode 100644
index 0000000000..41f37a4657
--- /dev/null
+++ b/skills/fds-build/resources/components/breadcrumb.md
@@ -0,0 +1,60 @@
+# Breadcrumb
+
+Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
+
+## When to use
+
+Use on pages within a multi-level hierarchy to help users navigate to parent pages.
+
+Do not use on:
+
+-   The home page
+-   Pages with no parent
+-   Focused flows such as forms or wizards
+
+## Variants
+
+| `separatorStyle`      | When to use              |
+| --------------------- | ------------------------ |
+| `"chevron"` (default) | Standard pages           |
+| `"slash"`             | Alternative visual style |
+
+## Usage
+
+```tsx
+import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
+
+<Breadcrumb
+    links={[
+        { children: "Home", href: "/" },
+        { children: "Services", href: "/services" },
+        { children: "Apply" },
+    ]}
+/>;
+```
+
+## Props
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Rules
+
+-   Always place the current page last in `links` — omit `href` on the last item.
+-   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+-   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
+-   When 5 or more items are present, middle items automatically collapse into an overflow menu.
+-   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
+
+## Anti-patterns
+
+-   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
+-   Do not use breadcrumbs on single-level or flat navigation structures.
+-   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/skills/fds-build/resources/components/button.md b/skills/fds-build/resources/components/button.md
new file mode 100644
index 0000000000..10f8ad5d19
--- /dev/null
+++ b/skills/fds-build/resources/components/button.md
@@ -0,0 +1,74 @@
+# Button
+
+Import: `import { Button } from "@lifesg/react-design-system/button"`
+
+## When to use
+
+`Button` handles all button variants in v4 — there are no separate `IconButton` or `ButtonWithIcon` components:
+
+| Need                | Usage                                                            |
+| ------------------- | ---------------------------------------------------------------- |
+| Text only           | `<Button>Label</Button>`                                         |
+| Text + icon         | `<Button icon={<Icon />}>Label</Button>` — icon defaults to left |
+| Icon only (no text) | `<Button icon={<Icon />} aria-label="..." />` — renders square   |
+
+## Size variants
+
+| Usage                                       | When to use                                             |
+| ------------------------------------------- | ------------------------------------------------------- |
+| `<Button>` or `<Button sizeType="default">` | Standard size — use for all buttons including hero CTAs |
+| `<Button sizeType="small">`                 | Dense layouts, toolbars                                 |
+| `<Button sizeType="large">`                 | Only when explicitly specified — do not use by default  |
+
+> **Deprecated:** `Button.Default`, `Button.Small`, `Button.Large` sub-components are deprecated in v4. Use `<Button sizeType="...">` instead.
+
+## Variants
+
+| `styleType`   | When to use                           |
+| ------------- | ------------------------------------- |
+| `"default"`   | Main action on the page               |
+| `"secondary"` | Cancel, go back, alternative option   |
+| `"light"`     | On colored or dark backgrounds        |
+| `"link"`      | Tertiary, de-emphasized inline action |
+
+Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
+
+## Usage
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+
+<Button styleType="default" onClick={() => {}}>
+    Save changes
+</Button>;
+```
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Rules
+
+-   `styleType` is mandatory.
+-   Use sentence case for all labels — "Save changes" not "Save Changes".
+-   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
+-   Do not use `sizeType="large"` unless explicitly required — default size is correct for hero CTAs.
+-   Combine `loading` and `disabled` during async operations to prevent double-submission.
+-   Never use raw `<button>` elements — always use design system button components.
+-   Do not nest buttons inside buttons or links.
+-   `danger` applies to any `styleType`.
+
+## Anti-patterns
+
+-   Do not use `sizeType="large"` as a default choice — it is a special case only.
+-   Do not use `Button.Default`, `Button.Small`, or `Button.Large` — these sub-components are deprecated in v4.
+-   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
+-   Do not use `loading` alone without also setting `disabled`.
diff --git a/skills/fds-build/resources/components/calendar.md b/skills/fds-build/resources/components/calendar.md
new file mode 100644
index 0000000000..4bdc7d2dee
--- /dev/null
+++ b/skills/fds-build/resources/components/calendar.md
@@ -0,0 +1,113 @@
+# Calendar
+
+Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
+
+## When to use
+
+-   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
+-   Use `variant="single"` for standard single-date selection.
+-   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
+
+## Usage
+
+### variant="single" — single date selection
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const AppointmentCalendar = () => {
+    const [date, setDate] = useState("2024-06-15");
+
+    return (
+        <Calendar
+            variant="single"
+            value={date}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(selected) => setDate(selected)}
+        />
+    );
+};
+```
+
+### variant="multi" — multiple date selection
+
+Note `values` (plural) and `onChange` receives the full updated array.
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const MultiDateCalendar = () => {
+    const [dates, setDates] = useState<string[]>([]);
+
+    return (
+        <Calendar
+            variant="multi"
+            values={dates}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            maxSelectable={5}
+            onChange={(selected) => setDates(selected)}
+        />
+    );
+};
+```
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                           |
+| ------- | -------- | ------------------------------------- |
+| `year`  | `number` | Current visible year in `YYYY` format |
+| `month` | `number` | Current visible month, 1–12           |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Rules
+
+-   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
+-   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
+-   All dates must be in `YYYY-MM-DD` format.
+-   Use `minDate`/`maxDate` to constrain selectable range.
+-   Use `disabledDates` for specific non-selectable dates within the allowed range.
+
+## Anti-patterns
+
+-   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
+-   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
+-   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/skills/fds-build/resources/components/card.md b/skills/fds-build/resources/components/card.md
new file mode 100644
index 0000000000..7984944542
--- /dev/null
+++ b/skills/fds-build/resources/components/card.md
@@ -0,0 +1,43 @@
+# Card
+
+Import: `import { Card } from "@lifesg/react-design-system/card"`
+
+## When to use
+
+Use to visually group related content — information panels, form sections, list items, or grid tiles.
+
+## Usage
+
+```tsx
+import styles from "./Card.module.css";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+<Card>
+    <div className={styles.cardBody}>
+        <Typography.HeadingSM>Card title</Typography.HeadingSM>
+        <Typography.BodyMD>Card content goes here.</Typography.BodyMD>
+    </div>
+</Card>;
+```
+
+```css
+/* Card.module.css */
+.cardBody {
+    padding: var(--fds-spacing-24);
+}
+```
+
+## Rules
+
+-   Card has no default padding — use `spacing-24` internal padding and `spacing-16` gap between content items as the standard.
+-   Shadow (`Shadow["md-subtle"]`) is applied automatically — do not add `box-shadow` manually.
+-   Do not nest cards inside cards.
+-   Use Typography components for all text inside Card — not raw HTML elements.
+-   Combine with `Layout.Container` and `Layout.ColDiv` for responsive card grids.
+
+## Anti-patterns
+
+-   Adding `box-shadow` via CSS — the Card component already applies the correct elevation shadow.
+-   Using raw `<div>` with custom styling instead of Card when the DS Card fits the use case.
+-   Nesting `<Card>` inside another `<Card>`.
diff --git a/skills/fds-build/resources/components/checkbox.md b/skills/fds-build/resources/components/checkbox.md
new file mode 100644
index 0000000000..bf98ce7a78
--- /dev/null
+++ b/skills/fds-build/resources/components/checkbox.md
@@ -0,0 +1,53 @@
+# Checkbox
+
+Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
+
+## When to use
+
+-   Simple boolean selections where a compact tick-box is sufficient.
+-   Table row selection (single or "select all").
+-   Filter lists with multiple independent options.
+-   "Select all" patterns using the `indeterminate` state.
+
+Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { Checkbox } from "@lifesg/react-design-system/checkbox";
+
+<label>
+    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
+    conditions
+</label>;
+```
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Rules
+
+-   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
+-   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
+-   Use the same `name` attribute when grouping checkboxes in a form.
+-   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
+-   `indeterminate` is a visual state; manage controlled `checked` separately.
+
+## Anti-patterns
+
+-   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
+-   Do not use `Checkbox` alone without a label — always provide accessible text.
+-   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/skills/fds-build/resources/components/countdown-timer.md b/skills/fds-build/resources/components/countdown-timer.md
new file mode 100644
index 0000000000..8d0791b053
--- /dev/null
+++ b/skills/fds-build/resources/components/countdown-timer.md
@@ -0,0 +1,20 @@
+# CountdownTimer
+
+Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
diff --git a/skills/fds-build/resources/components/data-table.md b/skills/fds-build/resources/components/data-table.md
new file mode 100644
index 0000000000..b99831d0f3
--- /dev/null
+++ b/skills/fds-build/resources/components/data-table.md
@@ -0,0 +1,142 @@
+# DataTable
+
+Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
+
+## When to use
+
+-   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
+-   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
+
+## Usage
+
+### Column definitions, sorting, selection, and custom cell rendering
+
+```tsx
+import { useState, useMemo } from "react";
+import {
+    DataTable,
+    SortIndicatorsProps,
+} from "@lifesg/react-design-system/data-table";
+import { Pill } from "@lifesg/react-design-system/pill";
+
+const rows = [
+    { id: "1", name: "Alice", status: "active", score: 90 },
+    { id: "2", name: "Bob", status: "inactive", score: 72 },
+    { id: "3", name: "Carol", status: "active", score: 85 },
+];
+
+const Example = () => {
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [sortState, setSortState] = useState<SortIndicatorsProps>({
+        score: "desc",
+    });
+
+    // onSelect: toggle a single row id
+    const handleSelect = (rowId: string, isSelected: boolean) => {
+        setSelectedIds((prev) =>
+            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
+        );
+    };
+
+    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
+    const handleSelectAll = (isAllSelected: boolean) => {
+        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
+    };
+
+    const handleHeaderClick = (fieldKey: string) => {
+        if (fieldKey === "score") {
+            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
+        }
+    };
+
+    const sorted = useMemo(
+        () =>
+            [...rows].sort((a, b) =>
+                sortState.score === "asc"
+                    ? a.score - b.score
+                    : b.score - a.score
+            ),
+        [sortState]
+    );
+
+    return (
+        <DataTable
+            headers={[
+                { fieldKey: "name", label: "Name", keyColumn: true },
+                { fieldKey: "status", label: "Status" },
+                { fieldKey: "score", label: "Score", clickable: true },
+            ]}
+            rows={sorted.map((row) => ({
+                ...row,
+                // custom cell: render status as a Pill
+                status: <Pill type="outline">{row.status}</Pill>,
+            }))}
+            selectedIds={selectedIds}
+            disabledIds={["2"]}
+            sortIndicators={sortState}
+            enableMultiSelect
+            enableSelectAll
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+            onHeaderClick={handleHeaderClick}
+        />
+    );
+};
+```
+
+## HeaderItemProps
+
+| Prop          | Type                        | Default | Description                                                            |
+| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
+| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
+| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
+| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
+| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
+| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Rules
+
+-   Each row object must have a unique `id: string` field.
+-   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
+-   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
+-   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
+-   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
+-   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
+
+## Anti-patterns
+
+-   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
+-   Do not omit `id` on row objects — selection and disabled logic will break silently.
+-   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/skills/fds-build/resources/components/date-navigator.md b/skills/fds-build/resources/components/date-navigator.md
new file mode 100644
index 0000000000..88671722d8
--- /dev/null
+++ b/skills/fds-build/resources/components/date-navigator.md
@@ -0,0 +1,25 @@
+# DateNavigator
+
+Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Rules
+
+-   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/skills/fds-build/resources/components/divider.md b/skills/fds-build/resources/components/divider.md
new file mode 100644
index 0000000000..a1e8ae18c3
--- /dev/null
+++ b/skills/fds-build/resources/components/divider.md
@@ -0,0 +1,23 @@
+# Divider
+
+Import: `import { Divider } from "@lifesg/react-design-system/divider"`
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Rules
+
+-   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/skills/fds-build/resources/components/drawer.md b/skills/fds-build/resources/components/drawer.md
new file mode 100644
index 0000000000..471293c85b
--- /dev/null
+++ b/skills/fds-build/resources/components/drawer.md
@@ -0,0 +1,78 @@
+# Drawer
+
+Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
+
+## When to use
+
+Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
+
+Do not use for:
+
+-   Primary forms that require focused attention
+-   Flows that need the full viewport
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { Drawer } from "@lifesg/react-design-system/drawer";
+import { Button } from "@lifesg/react-design-system/button";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+const FilterDrawer = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    return (
+        <>
+            <Button onClick={() => setShow(true)}>Open filters</Button>
+
+            <Drawer
+                show={show}
+                heading="Filter options"
+                onClose={handleClose}
+                onOverlayClick={handleClose}
+            >
+                <div style={{ padding: "1.5rem" }}>
+                    <Typography.HeadingMD style={{ marginBottom: "0.75rem" }}>
+                        Category
+                    </Typography.HeadingMD>
+                    <Typography.BodyBL style={{ marginBottom: "2rem" }}>
+                        Filter content goes here.
+                    </Typography.BodyBL>
+                    <Button styleType="secondary" onClick={handleClose}>
+                        Close
+                    </Button>
+                </div>
+            </Drawer>
+        </>
+    );
+};
+```
+
+## Props
+
+| Prop                 | Type              | Default | Description                                                                                                                                                                    |
+| -------------------- | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode` | —       | —                                                                                                                                                                              |
+| `className`          | `string`          | —       | —                                                                                                                                                                              |
+| `id`                 | `string`          | —       | —                                                                                                                                                                              |
+| `heading`            | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.                                                                                             |
+| `show`               | `boolean`         | —       | Controls whether the drawer is visible.                                                                                                                                        |
+| `onClose`            | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key.                                                                                      |
+| `onOverlayClick`     | `(() => void)`    | —       | Called when the user clicks the background overlay.                                                                                                                            |
+| `customCallToAction` | `React.ReactNode` | —       | Optional element rendered in the header, e.g. a link or button. Sits beside the title on wider drawers, and wraps onto its own line below the title once the drawer is narrow. |
+
+## Rules
+
+-   Always provide `onClose` so users can dismiss the panel via the close button.
+-   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
+-   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
+-   The drawer slides in from the right edge of the viewport.
+-   Content scrolls independently within the panel when it exceeds the panel height.
+
+## Anti-patterns
+
+-   Do not use the Drawer for full forms — use a dedicated page or ModalV2 instead.
+-   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/skills/fds-build/resources/components/error-display.md b/skills/fds-build/resources/components/error-display.md
new file mode 100644
index 0000000000..78eac167b9
--- /dev/null
+++ b/skills/fds-build/resources/components/error-display.md
@@ -0,0 +1,137 @@
+# ErrorDisplay
+
+Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
+
+## When to use
+
+Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
+
+Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
+
+## Variants
+
+| `type`                          | When to use                                                      |
+| ------------------------------- | ---------------------------------------------------------------- |
+| `"no-item-found"`               | Search or filter returned no results                             |
+| `"404"`                         | Page not found                                                   |
+| `"403"`                         | Access denied / permission error                                 |
+| `"500"`                         | Internal server error                                            |
+| `"400"`                         | Bad request                                                      |
+| `"408"`                         | Request timeout                                                  |
+| `"502"`                         | Bad gateway                                                      |
+| `"503"`                         | Service unavailable                                              |
+| `"504"`                         | Gateway timeout                                                  |
+| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
+| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
+| `"logout"`                      | User has been logged out                                         |
+| `"warning"`                     | General warning state                                            |
+| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
+| `"link-error"`                  | Broken or expired link                                           |
+| `"insufficient-credits"`        | User lacks credits to proceed                                    |
+| `"payment-unsuccessful"`        | Payment failed                                                   |
+| `"transfer-unsuccessful"`       | Transfer failed                                                  |
+| `"unsupported-browser"`         | Browser not supported                                            |
+| `"partially-supported-browser"` | Browser partially supported                                      |
+
+## Usage
+
+```tsx
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+{
+    /* No search results */
+}
+<ErrorDisplay
+    type="no-item-found"
+    title="No results found"
+    description="Try adjusting your search or filters."
+    actionButton={{ children: "Clear filters", onClick: handleClear }}
+/>;
+
+{
+    /* Page not found */
+}
+<ErrorDisplay type="404" />;
+
+{
+    /* Maintenance with scheduled date */
+}
+<ErrorDisplay
+    type="maintenance"
+    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
+/>;
+
+{
+    /* Session inactivity warning */
+}
+<ErrorDisplay
+    type="inactivity"
+    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
+/>;
+```
+
+## MaintenanceAdditionalAttributes
+
+| Prop            | Type     | Default | Description                            |
+| --------------- | -------- | ------- | -------------------------------------- |
+| `dateString` \* | `string` | —       | Date display for the maintenance error |
+
+## InactivityAdditionalAttributes
+
+| Prop             | Type     | Default | Description                                          |
+| ---------------- | -------- | ------- | ---------------------------------------------------- |
+| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Rules
+
+-   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
+-   `type` is required — it determines the default illustration, title, and description.
+-   Override `title` and `description` only when the defaults don't fit your context.
+-   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
+-   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
+-   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
+-   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
+
+## Anti-patterns
+
+-   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
+-   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
+-   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/skills/fds-build/resources/components/feedback-rating.md b/skills/fds-build/resources/components/feedback-rating.md
new file mode 100644
index 0000000000..764958b94b
--- /dev/null
+++ b/skills/fds-build/resources/components/feedback-rating.md
@@ -0,0 +1,61 @@
+# FeedbackRating
+
+Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
+
+## When to use
+
+Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
+
+## Usage
+
+### Complete controlled pattern
+
+```tsx
+import { useState } from "react";
+import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
+
+const RatingWidget = () => {
+    // Track rating separately — onSubmit does NOT receive it
+    const [rating, setRating] = useState(0);
+
+    const handleSubmit = () => {
+        // Read from state, not from onSubmit arguments (there are none)
+        submitFeedback({ stars: rating });
+    };
+
+    return (
+        <FeedbackRating
+            rating={rating}
+            onRatingChange={(value) => setRating(value)}
+            onSubmit={handleSubmit}
+            description="How was your experience?"
+            buttonLabel="Send feedback"
+        />
+    );
+};
+```
+
+**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Rules
+
+-   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
+-   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
+-   `rating` must be controlled state; the component does not manage selection internally.
+
+## Anti-patterns
+
+-   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/skills/fds-build/resources/components/file-download.md b/skills/fds-build/resources/components/file-download.md
new file mode 100644
index 0000000000..058ef19a0b
--- /dev/null
+++ b/skills/fds-build/resources/components/file-download.md
@@ -0,0 +1,54 @@
+# FileDownload
+
+Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
+
+## Sub-components
+
+-   `FileItemProps` — shape of each item in `fileItems`
+
+## FileItemProps
+
+| Prop                    | Type                        | Default | Description                                   |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
+| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
+| `name` \*               | `string`                    | —       | The name of the file                          |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
+| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
+| `size`                  | `number`                    | —       | The size of the file in bytes                 |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
+| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
+| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
+| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default       | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —             | —                                                                                                                                     |
+| `name` \*               | `string`                    | —             | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —             | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —             | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —             | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —             | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —             | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true          | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true          | Indicates the file is available and ready to be downloaded.                                                                           |
+| `clickLabel`            | `string`                    | the file name | Name for the card, used when `FileDownload` is given an `onClick`.                                                                    |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+| `onClick`       | `((file: FileItemDownloadProps) => void)`                | —          | Called when a file card itself is activated, as opposed to its download button. When omitted, activating the card triggers `onDownload` instead.                                                                                                                                        |
+
+## Rules
+
+-   `fileItems` and `onDownload` are required.
+-   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/skills/fds-build/resources/components/file-upload.md b/skills/fds-build/resources/components/file-upload.md
new file mode 100644
index 0000000000..a5d2d378c8
--- /dev/null
+++ b/skills/fds-build/resources/components/file-upload.md
@@ -0,0 +1,105 @@
+# FileUpload
+
+Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
+
+## When to use
+
+-   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
+-   Use `sortable` when file order matters for downstream processing.
+-   Use `editableFileItems` when image files need alt-text or descriptions.
+-   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
+
+## Usage
+
+```tsx
+import { FileUpload } from "@lifesg/react-design-system/file-upload";
+
+<FileUpload
+    title="Upload supporting documents"
+    description="PDF, JPG, or PNG. Max 5 MB each."
+    accept=".pdf,.jpg,.png"
+    fileItems={fileItems}
+    onChange={(files) => {}}
+    onDelete={(item) => {}}
+/>;
+```
+
+## Custom labels
+
+| Prop                             | Type     | Default          | Description                                       |
+| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
+| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Rules
+
+-   Always manage `fileItems` state in the parent — the component does not store files internally.
+-   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
+-   Always handle `onDelete` to remove the corresponding item from state.
+-   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
+-   Use `progress` on individual `FileItemProps` to show per-file upload progress.
+-   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
+-   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
+-   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
+
+## Anti-patterns
+
+-   Do not use without wiring `onChange` and `onDelete` — the list will not update.
+-   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
+-   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
+-   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/skills/fds-build/resources/components/filter.md b/skills/fds-build/resources/components/filter.md
new file mode 100644
index 0000000000..5b85101b52
--- /dev/null
+++ b/skills/fds-build/resources/components/filter.md
@@ -0,0 +1,228 @@
+# Filter
+
+Import: `import { Filter } from "@lifesg/react-design-system/filter"`
+
+## When to use
+
+Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
+
+## Composition
+
+```
+Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
+├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
+│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
+├── Filter.Item title="Category"
+│   └── Filter.Checkbox                 ← multi-select filter options
+└── Filter.Item title="..."
+    └── Filter.Checkbox
+```
+
+Manual variants (bypass auto-responsive):
+
+```
+Filter.Sidebar                          ← desktop sidebar only
+Filter.Modal                            ← mobile modal only
+Filter.Page                             ← full-page filter (mobile-only flows)
+```
+
+`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
+
+## Variants
+
+| Variant                  | When to use                                                     |
+| ------------------------ | --------------------------------------------------------------- |
+| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
+| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
+| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
+
+## Usage
+
+### Auto-responsive Filter (recommended)
+
+`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
+
+```tsx
+import { useState } from "react";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+const ListingFilter = () => {
+    const [category, setCategory] = useState("all");
+    const [activeCount, setActiveCount] = useState(0);
+
+    const handleClear = () => {
+        setCategory("all");
+        setActiveCount(0);
+    };
+
+    return (
+        <Filter
+            count={activeCount}
+            onClear={handleClear}
+            onDone={() => {
+                /* commit draft state */
+            }}
+            onDismiss={() => {
+                /* discard draft state */
+            }}
+        >
+            {(mode) => (
+                <>
+                    <Filter.Item title="Category">
+                        <RadioButton
+                            name="category"
+                            value="all"
+                            checked={category === "all"}
+                            onChange={() => setCategory("all")}
+                        >
+                            All
+                        </RadioButton>
+                        <RadioButton
+                            name="category"
+                            value="news"
+                            checked={category === "news"}
+                            onChange={() => setCategory("news")}
+                        >
+                            News
+                        </RadioButton>
+                    </Filter.Item>
+                    <Filter.Item title="Sort by" collapsible={false}>
+                        <RadioButton name="sort" value="newest" defaultChecked>
+                            Newest first
+                        </RadioButton>
+                        <RadioButton name="sort" value="oldest">
+                            Oldest first
+                        </RadioButton>
+                    </Filter.Item>
+                </>
+            )}
+        </Filter>
+    );
+};
+```
+
+Key points:
+
+-   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
+-   `collapsible={false}` on sort sections keeps them always expanded.
+-   `count` drives the active-filter badge in the header.
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Rules
+
+-   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
+-   Always provide `onClear` to reset all filter state in a single handler.
+-   Set `collapsible={false}` on sort sections — sort options should always be visible.
+-   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
+-   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
+-   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
+-   Use `count` to show the number of active filters in the header.
+-   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
+-   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
+
+## Anti-patterns
+
+-   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
+-   Do not use `headerTitle`, `toggleFilterButtonLabel`, or `doneButtonLabel` directly on `Filter` — these are deprecated. Use `customLabels` instead.
+-   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
+-   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/skills/fds-build/resources/components/footer.md b/skills/fds-build/resources/components/footer.md
new file mode 100644
index 0000000000..036792657b
--- /dev/null
+++ b/skills/fds-build/resources/components/footer.md
@@ -0,0 +1,94 @@
+# Footer
+
+Import: `import { Footer } from "@lifesg/react-design-system/footer"`
+
+## When to use
+
+Place at the bottom of every page. Required on all pages.
+
+## Variants
+
+| Variant                 | When to use                                                      |
+| ----------------------- | ---------------------------------------------------------------- |
+| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
+| `links`                 | Pages with navigational footer links (max 2 columns)             |
+| `copyrightInfo`         | Custom copyright text required                                   |
+| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
+
+## Usage
+
+```tsx
+import { Footer } from "@lifesg/react-design-system/footer";
+
+{
+    /* Standard footer — no props required */
+}
+<Footer />;
+
+{
+    /* Footer with navigation links */
+}
+<Footer
+    links={[
+        [
+            { children: "About us", href: "/about" },
+            { children: "Contact", href: "/contact" },
+        ],
+    ]}
+    lastUpdated={new Date("2025-01-01")}
+/>;
+```
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Rules
+
+-   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
+-   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
+    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
+    -   Page content area: `flex: 1`
+-   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
+-   `copyrightInfo` overrides `lastUpdated` — do not set both.
+-   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
+-   `links` is a 2D array: each inner array is one column of links.
+
+## Anti-patterns
+
+-   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
+-   Do not pass `children` and `links` together — `children` replaces the top section entirely.
+-   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/skills/fds-build/resources/components/form-date-input.md b/skills/fds-build/resources/components/form-date-input.md
new file mode 100644
index 0000000000..9143167b6a
--- /dev/null
+++ b/skills/fds-build/resources/components/form-date-input.md
@@ -0,0 +1,85 @@
+# Form.DateInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
+-   Any form field that requires calendar-based date selection.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.DateInput className={styles.dateInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .dateInput {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class — `max-width` constrains the component without conflicting with its internal `width: 100%`.
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
+-   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
+-   Use `disabledDates` for known blackout dates (e.g. public holidays).
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review or summary screens where the value should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
+-   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
+
+## Anti-patterns
+
+-   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
+-   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
+-   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
+-   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/skills/fds-build/resources/components/form-date-range-input.md b/skills/fds-build/resources/components/form-date-range-input.md
new file mode 100644
index 0000000000..a3ff41d107
--- /dev/null
+++ b/skills/fds-build/resources/components/form-date-range-input.md
@@ -0,0 +1,146 @@
+# Form.DateRangeInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
+-   Use `variant="week"` when the selection must always be a full calendar week.
+-   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
+
+## Usage
+
+`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const LeavePeriodField = () => {
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
+
+    return (
+        <Form.DateRangeInput
+            label="Leave period"
+            value={start}
+            valueEnd={end}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(s, e) => {
+                setStart(s);
+                setEnd(e);
+            }}
+        />
+    );
+};
+```
+
+```tsx
+{
+    /* variant="week" — whole-week selection */
+}
+<Form.DateRangeInput
+    label="Select week"
+    variant="week"
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+
+{
+    /* variant="fixed-range" — valueEnd derived automatically; only store start */
+}
+<Form.DateRangeInput
+    label="14-day quarantine period"
+    variant="fixed-range"
+    numberOfDays={14}
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.DateRangeInput className={styles.dateRangeInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .dateRangeInput {
+    max-width: 24rem;
+}
+```
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
+-   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review screens where the range should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container.
+-   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
+-   `numberOfDays` only applies when `variant="fixed-range"`.
+
+## Anti-patterns
+
+-   Do not use for single-date selection — use `Form.DateInput` instead.
+-   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
+-   Do not rely on `error` alone without an `errorMessage`.
+-   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/skills/fds-build/resources/components/form-e-signature.md b/skills/fds-build/resources/components/form-e-signature.md
new file mode 100644
index 0000000000..4e98aa3820
--- /dev/null
+++ b/skills/fds-build/resources/components/form-e-signature.md
@@ -0,0 +1,55 @@
+# Form.ESignature
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
+-   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
+-   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
+-   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
+-   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
+-   `value` and the `onChange` return value are both base64-encoded PNG strings.
+-   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
+
+## Anti-patterns
+
+-   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
+-   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
+-   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/skills/fds-build/resources/components/form-input.md b/skills/fds-build/resources/components/form-input.md
new file mode 100644
index 0000000000..0c64781046
--- /dev/null
+++ b/skills/fds-build/resources/components/form-input.md
@@ -0,0 +1,65 @@
+# Form.Input
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
+
+## Variants
+
+| `styleType`            | When to use                                                                                 |
+| ---------------------- | ------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
+| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+<Form.Input
+    label="Full name"
+    placeholder="Enter your name"
+    value={value}
+    onChange={(e) => {}}
+/>;
+```
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
+-   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
+-   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
+-   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
+
+## Anti-patterns
+
+-   Do not use `disabled` on review screens — use `readOnly`.
+-   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/skills/fds-build/resources/components/form-masked-input.md b/skills/fds-build/resources/components/form-masked-input.md
new file mode 100644
index 0000000000..336a9379f6
--- /dev/null
+++ b/skills/fds-build/resources/components/form-masked-input.md
@@ -0,0 +1,69 @@
+# Form.MaskedInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
+-   Read-only fields that are loaded asynchronously and should show a loading / error state.
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, the value is permanently unmasked.                                                                                                     |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
+-   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
+-   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
+-   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
+-   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
+-   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
+-   `loadState` only takes effect when `readOnly` is also `true`.
+-   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
+
+## Anti-patterns
+
+-   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
+-   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
+-   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/skills/fds-build/resources/components/form-multi-select.md b/skills/fds-build/resources/components/form-multi-select.md
new file mode 100644
index 0000000000..69530e7217
--- /dev/null
+++ b/skills/fds-build/resources/components/form-multi-select.md
@@ -0,0 +1,100 @@
+# Form.MultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "doc", label: "Document" },
+    { value: "img", label: "Image" },
+    { value: "pdf", label: "PDF" },
+];
+
+<Form.MultiSelect
+    label="File types"
+    options={options}
+    selectedOptions={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOptions={(opts) => {}}
+/>;
+```
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                             |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
+-   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
+-   Use `optionsLoadState` to communicate async loading states.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   `onSelectOptions` receives the complete updated selection array — not a delta.
+-   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
+
+## Anti-patterns
+
+-   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/skills/fds-build/resources/components/form-nested-multi-select.md b/skills/fds-build/resources/components/form-nested-multi-select.md
new file mode 100644
index 0000000000..fe04d8fb5d
--- /dev/null
+++ b/skills/fds-build/resources/components/form-nested-multi-select.md
@@ -0,0 +1,159 @@
+# Form.NestedMultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                              |
+| ------------ | ---------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state                                                      |
+| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
+| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
+
+## Usage
+
+### Multi-select with parallel keyPaths / values arrays
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface SkillValue {
+    id: string;
+    name: string;
+}
+
+const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
+    {
+        key: "design",
+        label: "Design",
+        subItems: [
+            {
+                key: "design-ux",
+                label: "UX Design",
+                value: { id: "ux", name: "UX Design" },
+            },
+            {
+                key: "design-ui",
+                label: "UI Design",
+                value: { id: "ui", name: "UI Design" },
+            },
+        ],
+    },
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "eng-fe",
+                label: "Frontend",
+                value: { id: "fe", name: "Frontend" },
+            },
+            {
+                key: "eng-be",
+                label: "Backend",
+                value: { id: "be", name: "Backend" },
+            },
+        ],
+    },
+];
+
+const NestedMultiSelectExample = () => {
+    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
+    const [keyPaths, setKeyPaths] = useState<string[][]>([
+        ["design", "design-ux"], // pre-selected: UX Design
+    ]);
+    const [values, setValues] = useState<SkillValue[]>([
+        { id: "ux", name: "UX Design" },
+    ]);
+
+    return (
+        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
+            label="Skills"
+            options={options}
+            selectedKeyPaths={keyPaths}
+            // onSelectOptions provides the NEXT full selection state — replace, don't merge
+            onSelectOptions={(nextKeyPaths, nextValues) => {
+                setKeyPaths(nextKeyPaths);
+                setValues(nextValues as SkillValue[]);
+            }}
+            valueToStringFunction={(val) => val.name}
+            enableSearch
+        />
+    );
+};
+```
+
+**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                                                  |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Rules
+
+-   Every option node must have a unique `key` string — key paths are used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
+-   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
+-   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
+-   Do not use when only one option can be selected — use `Form.NestedSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/skills/fds-build/resources/components/form-nested-select.md b/skills/fds-build/resources/components/form-nested-select.md
new file mode 100644
index 0000000000..a0e28d7a57
--- /dev/null
+++ b/skills/fds-build/resources/components/form-nested-select.md
@@ -0,0 +1,151 @@
+# Form.NestedSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                            |
+| ------------ | -------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state based on selected path                             |
+| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
+| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
+
+## Usage
+
+### Three-level hierarchy with controlled keyPath
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface RoleValue {
+    id: string;
+    label: string;
+}
+
+const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "engineering-frontend",
+                label: "Frontend",
+                subItems: [
+                    {
+                        key: "engineering-frontend-react",
+                        label: "React Developer",
+                        value: { id: "fe-react", label: "React Developer" },
+                    },
+                    {
+                        key: "engineering-frontend-vue",
+                        label: "Vue Developer",
+                        value: { id: "fe-vue", label: "Vue Developer" },
+                    },
+                ],
+            },
+            {
+                key: "engineering-backend",
+                label: "Backend",
+                value: { id: "be", label: "Backend Developer" },
+            },
+        ],
+    },
+];
+
+const NestedSelectExample = () => {
+    // keyPath is the path of keys from root to selected node
+    const [keyPath, setKeyPath] = useState<string[]>([]);
+    const [value, setValue] = useState<RoleValue | undefined>();
+
+    return (
+        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
+            label="Job role"
+            options={options}
+            selectedKeyPath={keyPath}
+            // onChange receives the full key path and the node's value
+            onChange={(path, val) => {
+                setKeyPath(path);
+                setValue(val);
+            }}
+            valueToStringFunction={(val) => val.label}
+            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
+            enableSearch
+        />
+    );
+};
+```
+
+**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                                                                                |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Rules
+
+-   Every option node must have a unique `key` string — the key path is used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
+-   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
+-   `selectableCategory` enables selection of non-leaf (parent category) nodes.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
+-   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/components/form-otp-verification.md b/skills/fds-build/resources/components/form-otp-verification.md
new file mode 100644
index 0000000000..59780485e5
--- /dev/null
+++ b/skills/fds-build/resources/components/form-otp-verification.md
@@ -0,0 +1,175 @@
+# Form.OtpVerification
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Flows that require identity verification via a one-time password sent to a phone number or email address.
+-   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
+
+## Usage
+
+### Email variant
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+
+const EmailOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [email, setEmail] = useState("");
+
+    return (
+        <Form.OtpVerification
+            label="Verify your email"
+            type="email"
+            emailValue={email}
+            onEmailChange={setEmail}
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                // Throw to surface the error inline — do NOT return an error string
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Invalid email address");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={300}
+        />
+    );
+};
+```
+
+### Phone variant (`fixedCountry` required)
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
+
+const PhoneOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
+
+    return (
+        <Form.OtpVerification
+            label="Verify your mobile number"
+            type="phone-number"
+            phoneNumberValue={phone}
+            onPhoneNumberChange={setPhone}
+            fixedCountry // required when type="phone-number"; hides country selector
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Invalid phone number");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={180}
+        />
+    );
+};
+```
+
+**Key gotcha — callbacks must throw, not return error strings.**
+The component catches the thrown error and displays `error.message` inline.
+Returning a value (or nothing) always signals success and advances the state machine.
+
+## Phone-number-specific props
+
+| Prop                  | Type                                     | Description                                            |
+| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
+| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
+| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
+| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
+
+## Email-specific props
+
+| Prop            | Type                      | Description                     |
+| --------------- | ------------------------- | ------------------------------- |
+| `emailValue`    | `string`                  | Controlled email value          |
+| `onEmailChange` | `(value: string) => void` | Called when email input changes |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                 |
+| ------------- | -------- | --------------------------- |
+| `number`      | `string` | Phone number                |
+| `countryCode` | `string` | Country code (e.g. `"+65"`) |
+
+## Form-specific props
+
+| Prop    | Type                       | Description |
+| ------- | -------------------------- | ----------- |
+| `label` | `string \| FormLabelProps` | Field label |
+
+## Props
+
+| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
+| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
+| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
+| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
+| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
+| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
+| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
+| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
+| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
+| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
+| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
+| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
+| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
+| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
+| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
+| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
+| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
+| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
+| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
+-   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
+-   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
+-   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
+-   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
+-   `otpState` is externally controlled — the component does not manage its own flow state.
+-   `fixedCountry` is required when `type="phone-number"`.
+
+## Anti-patterns
+
+-   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
+-   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
+-   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
+-   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/skills/fds-build/resources/components/form-phone-number-input.md b/skills/fds-build/resources/components/form-phone-number-input.md
new file mode 100644
index 0000000000..16e1ce32ac
--- /dev/null
+++ b/skills/fds-build/resources/components/form-phone-number-input.md
@@ -0,0 +1,87 @@
+# Form.PhoneNumberInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
+
+## When to use
+
+-   Collecting a phone number that requires a country code prefix.
+-   International forms where users may have numbers from different countries.
+-   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.PhoneNumberInput className={styles.phoneNumberInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .phoneNumberInput {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                                                                                                             |
+| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `number`      | `string` | The phone number                                                                                                        |
+| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
+-   Use `enableSearch` when the country list is long and users need to find their country quickly.
+-   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
+-   Use `allowClear` when the field can be optionally cleared by the user.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+
+## Anti-patterns
+
+-   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
+-   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
+-   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/skills/fds-build/resources/components/form-predictive-text-input.md b/skills/fds-build/resources/components/form-predictive-text-input.md
new file mode 100644
index 0000000000..05bf4536ee
--- /dev/null
+++ b/skills/fds-build/resources/components/form-predictive-text-input.md
@@ -0,0 +1,108 @@
+# Form.PredictiveTextInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
+-   Users need to type to narrow down results before selecting.
+
+## Usage
+
+### Location search — three extractors working together
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+interface Location {
+    id: string;
+    name: string;
+    address: string;
+}
+
+const LocationSearchExample = () => {
+    const [selected, setSelected] = useState<Location | undefined>();
+
+    const fetchOptions = async (input: string): Promise<Location[]> => {
+        const res = await api.searchLocations(input);
+        return res.results;
+    };
+
+    return (
+        <Form.PredictiveTextInput<Location, string>
+            label="Search location"
+            minimumCharacters={3} // fetch only after 3 chars typed
+            fetchOptions={fetchOptions}
+            // Populates the text field when an option is selected
+            valueExtractor={(item) => item.name}
+            // Populates each row in the dropdown list
+            listExtractor={(item) => `${item.name} — ${item.address}`}
+            // Displays the chosen value as a chip / confirmation label
+            displayValueExtractor={(item) => item.name}
+            selectedOption={selected}
+            onSelectOption={(item) => setSelected(item ?? undefined)}
+        />
+    );
+};
+```
+
+**How the three extractors divide responsibility:**
+
+| Extractor               | When it runs               | What it renders                  |
+| ----------------------- | -------------------------- | -------------------------------- |
+| `listExtractor`         | While the dropdown is open | Each option row in the list      |
+| `valueExtractor`        | After selection            | The text field value             |
+| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
+
+Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   `fetchOptions` is required — it must be async and return an array of option objects.
+-   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
+-   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
+-   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
+-   Use `selectedOption` and `onSelectOption` for controlled selection.
+-   Set `errorMessage` when the selected option fails validation.
+-   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
+-   Generic type `T` is the option object shape; `V` is the extracted value type.
+
+## Anti-patterns
+
+-   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
+-   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
+-   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/skills/fds-build/resources/components/form-select.md b/skills/fds-build/resources/components/form-select.md
new file mode 100644
index 0000000000..235942cf46
--- /dev/null
+++ b/skills/fds-build/resources/components/form-select.md
@@ -0,0 +1,103 @@
+# Form.Select
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "sg", label: "Singapore" },
+    { value: "my", label: "Malaysia" },
+];
+
+<Form.Select
+    label="Country"
+    options={options}
+    selectedOption={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOption={(opt) => {}}
+/>;
+```
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                             |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `isOptionDisabled`           | `((item: T) => boolean)`                                      | —             | Returns `true` if the given option should be shown but not selectable.                                                                           |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
+-   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
+-   `options` is the only mandatory component-specific prop.
+-   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
+
+## Anti-patterns
+
+-   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/skills/fds-build/resources/components/form-slider.md b/skills/fds-build/resources/components/form-slider.md
new file mode 100644
index 0000000000..cdc911c2f5
--- /dev/null
+++ b/skills/fds-build/resources/components/form-slider.md
@@ -0,0 +1,116 @@
+# Form.Slider
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
+-   When the relative position of a value matters more than typing an exact number.
+
+## Usage
+
+### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const BudgetSlider = () => {
+    const [displayValue, setDisplayValue] = useState(500);
+
+    const handleChange = (value: number) => {
+        // Safe: fires continuously during drag — update display only
+        setDisplayValue(value);
+    };
+
+    const handleChangeEnd = (value: number) => {
+        // Safe: fires once on mouse/touch release — trigger API calls here
+        fetchResults({ maxBudget: value });
+    };
+
+    return (
+        <Form.Slider
+            label={`Budget: $${displayValue}`}
+            min={0}
+            max={2000}
+            step={100}
+            value={displayValue}
+            onChange={handleChange}
+            onChangeEnd={handleChangeEnd}
+            showSliderLabels
+            sliderLabelPrefix="$"
+            showIndicatorLabel
+            indicatorLabelPrefix="$"
+        />
+    );
+};
+```
+
+**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
+
+### Custom track colours
+
+`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
+
+```tsx
+<Form.Slider
+    label="Risk level"
+    min={0}
+    max={10}
+    colors={["#4caf50", "#e0e0e0"]}
+    showSliderLabels
+    sliderLabelSuffix=" / 10"
+/>
+```
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Always set `min` and `max` to meaningful bounds for the use case.
+-   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
+-   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
+-   Enable `showSliderLabels` so users know the range bounds.
+-   Enable `showIndicatorLabel` so users can see the current value while dragging.
+-   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
+-   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
+-   `colors` array format is `[leftTrack, rightTrack]`.
+
+## Anti-patterns
+
+-   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
+-   Do not use when the user needs to enter a precise value — prefer a number input in that case.
+-   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/skills/fds-build/resources/components/form-textarea.md b/skills/fds-build/resources/components/form-textarea.md
new file mode 100644
index 0000000000..2f6097f0b3
--- /dev/null
+++ b/skills/fds-build/resources/components/form-textarea.md
@@ -0,0 +1,116 @@
+# Form.Textarea
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
+
+## Usage
+
+### 1. Basic controlled textarea
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const [value, setValue] = useState("");
+
+<Form.Textarea
+    label="Description"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    placeholder="Enter a description..."
+    rows={4}
+/>;
+```
+
+### 2. With `maxLength` — auto-renders a character counter
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+/>;
+{
+    /* A counter "0 / 200" appears below automatically — no extra code needed */
+}
+```
+
+### 3. With `renderCustomCounter`
+
+The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    renderCustomCounter={(maxLength, currentValueLength) => (
+        <span
+            style={{
+                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
+            }}
+        >
+            {currentValueLength} of {maxLength} characters used
+        </span>
+    )}
+/>
+```
+
+### 4. With `transformValue`
+
+`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
+
+```tsx
+<Form.Textarea
+    label="Reference code"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    transformValue={(raw) => raw.toUpperCase()}
+    maxLength={50}
+/>;
+{
+    /* User types "abc" → stored value becomes "ABC" */
+}
+```
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
+-   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
+-   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
+-   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
+-   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
+-   Provide `errorMessage` rather than `error` alone.
+-   Setting native `maxLength` renders a character counter below the textarea automatically.
+-   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
+-   `error` is redundant when `errorMessage` is provided.
+-   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
+
+## Anti-patterns
+
+-   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
+-   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
+-   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/components/form-time-range-picker.md b/skills/fds-build/resources/components/form-time-range-picker.md
new file mode 100644
index 0000000000..733b36ab0b
--- /dev/null
+++ b/skills/fds-build/resources/components/form-time-range-picker.md
@@ -0,0 +1,98 @@
+# Form.TimeRangePicker
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
+-   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
+-   Use `variant="dial"` (default) for freeform time selection.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.TimeRangePicker className={styles.timeRangePicker} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .timeRangePicker {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Combobox-variant-specific props
+
+| Prop                     | Type     | Default | Description                                                  |
+| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
+| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
+| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
+| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
+| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
+| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
+
+## TimeRangePickerValue
+
+| Prop    | Type     | Description                                                                                                 |
+| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
+| `end`   | `string` | End time, same format as `start`                                                                            |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
+-   Match `format` to the expected string format in `TimeRangePickerValue`.
+-   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
+-   Set `errorMessage` rather than `error` alone.
+-   Use `dropdownRootNode` when inside a modal or scrollable container.
+-   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
+-   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
+
+## Anti-patterns
+
+-   Do not use for single time selection — use `Form.TimePicker` instead.
+-   Do not mix dial and combobox time string formats — the format differs between variants.
+-   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/skills/fds-build/resources/components/form-timepicker.md b/skills/fds-build/resources/components/form-timepicker.md
new file mode 100644
index 0000000000..a5d70d1e45
--- /dev/null
+++ b/skills/fds-build/resources/components/form-timepicker.md
@@ -0,0 +1,77 @@
+# Form.Timepicker
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
+
+## When to use
+
+-   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
+-   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
+-   Use `format="24hr"` (default) for operational or technical contexts.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.Timepicker className={styles.timepicker} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .timepicker {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
+-   Use `alignment="right"` when the picker is near the right edge of the viewport.
+-   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
+-   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
+
+## Anti-patterns
+
+-   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
+-   Do not mix 12hr format strings with `format="24hr"` or vice versa.
+-   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/skills/fds-build/resources/components/form-unit-number-input.md b/skills/fds-build/resources/components/form-unit-number-input.md
new file mode 100644
index 0000000000..705823bf47
--- /dev/null
+++ b/skills/fds-build/resources/components/form-unit-number-input.md
@@ -0,0 +1,138 @@
+# Form.UnitNumberInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
+-   Any address form that includes a unit number field for Singapore addresses.
+
+## Usage
+
+### Basic controlled usage with validation guard
+
+`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const UnitField = () => {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState("");
+
+    const handleChange = (val: string) => {
+        if (val === "Invalid unit number") {
+            setError("Please enter a valid unit number.");
+            // Do not persist — keep previous valid value in state
+        } else {
+            setError("");
+            setValue(val); // e.g. "03-12"
+        }
+    };
+
+    return (
+        <Form.UnitNumberInput
+            label="Unit number"
+            value={value}
+            onChange={handleChange}
+            errorMessage={error}
+        />
+    );
+};
+```
+
+### `onBlur` zero-pads automatically
+
+After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    value={value}
+    onChange={handleChange}
+    onBlur={(formatted) => {
+        // e.g. user typed "3-2" → formatted is "03-02"
+        setValue(formatted);
+    }}
+/>
+```
+
+### `onChangeRaw` — separate floor and unit
+
+Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    onChangeRaw={(parts: string[]) => {
+        const [floor, unit] = parts; // e.g. ["03", "12"]
+        setFloor(floor);
+        setUnit(unit);
+    }}
+/>
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.UnitNumberInput className={styles.unitNumberInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .unitNumberInput {
+    max-width: 24rem;
+}
+```
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
+-   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
+-   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
+-   Set `errorMessage` to explain validation failures.
+-   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
+-   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
+-   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
+
+## Anti-patterns
+
+-   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
+-   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
+-   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/skills/fds-build/resources/components/fullscreen-image-carousel.md b/skills/fds-build/resources/components/fullscreen-image-carousel.md
new file mode 100644
index 0000000000..3a59c86eca
--- /dev/null
+++ b/skills/fds-build/resources/components/fullscreen-image-carousel.md
@@ -0,0 +1,159 @@
+# FullscreenImageCarousel
+
+Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
+
+## When to use
+
+Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
+
+## Sub-components
+
+-   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
+
+## Usage
+
+### Mixed image and custom items
+
+Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
+
+```tsx
+import { useState } from "react";
+import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
+
+const DocViewer = () => {
+    const [show, setShow] = useState(false);
+
+    const items = [
+        // Image item — type may be omitted
+        {
+            src: "https://example.com/photo.jpg",
+            alt: "Site photo",
+            fileName: "photo.jpg",
+            fileSize: "1.2 MB",
+        },
+        // Custom item — type is required
+        {
+            type: "custom" as const,
+            itemLabel: "PDF",
+            thumbnailSrc: "https://example.com/pdf-thumb.svg",
+            renderContent: () => (
+                <iframe
+                    src="https://example.com/document.pdf"
+                    title="PDF preview"
+                    style={{ width: "100%", height: "100%", border: "none" }}
+                />
+            ),
+        },
+    ];
+
+    const handleDelete = (item, index) => {
+        // Remove the item from your state; the delete button only appears
+        // because onDelete is provided.
+        removeItem(index);
+    };
+
+    return (
+        <>
+            <button onClick={() => setShow(true)}>View files</button>
+            <FullscreenImageCarousel
+                show={show}
+                items={items}
+                onClose={() => setShow(false)}
+                onDelete={handleDelete} // omit to hide delete button
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselCustomAction`
+
+| Prop           | Type                                                              | Default | Description                              |
+| -------------- | ----------------------------------------------------------------- | ------- | ---------------------------------------- |
+| `icon` \*      | `JSX.Element`                                                     | —       | Icon element rendered inside the button. |
+| `ariaLabel` \* | `string`                                                          | —       | Accessible name for the button.          |
+| `onClick` \*   | `(item: FullscreenImageCarouselItemProps, index: number) => void` | —       | Called when the action is activated.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                                                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop.                                                 |
+| `customActions`          | `FullscreenImageCarouselCustomAction[]`                                | —        | Additional icon buttons rendered in the top bar, positioned before the default buttons. Applies to every item. An item's own `customActions` replaces this list for that item. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.                                                  |
+| `topBarRef`              | `React.Ref<HTMLDivElement>`                                            | —        | Ref to the top bar element, which holds the file info and the action buttons.                                                                                                  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type                                    | Default | Description                                                                                                                                                                         |
+| --------------- | --------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`          | `"image"`                               | —       | —                                                                                                                                                                                   |
+| `src` \*        | `string`                                | —       | URL of the full-resolution image shown in the slide.                                                                                                                                |
+| `alt`           | `string`                                | —       | Accessible label for the image.                                                                                                                                                     |
+| `thumbnailSrc`  | `string`                                | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.                                                                                                    |
+| `renderContent` | `never`                                 | —       | —                                                                                                                                                                                   |
+| `fileName`      | `string`                                | —       | Display name of the file shown in the top info bar.                                                                                                                                 |
+| `fileSize`      | `string`                                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                                                                            |
+| `customActions` | `FullscreenImageCarouselCustomAction[]` | —       | Replaces the component-level `customActions` while this item is active. Leave `undefined` to inherit the component-level list. Pass `[]` to render no custom actions for this item. |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                                    | Default | Description                                                                                                                                                                         |
+| ------------------ | --------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*          | `"custom"`                              | —       | —                                                                                                                                                                                   |
+| `thumbnailSrc`     | `string`                                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                                                                 |
+| `itemLabel`        | `string`                                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                                                               |
+| `renderContent` \* | `() => React.ReactNode`                 | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer).                                                |
+| `fileName`         | `string`                                | —       | Display name of the file shown in the top info bar.                                                                                                                                 |
+| `fileSize`         | `string`                                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                                                                            |
+| `customActions`    | `FullscreenImageCarouselCustomAction[]` | —       | Replaces the component-level `customActions` while this item is active. Leave `undefined` to inherit the component-level list. Pass `[]` to render no custom actions for this item. |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type                                    | Default | Description                                                                                                                                                                         |
+| --------------- | --------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`          | `"image"`                               | —       | —                                                                                                                                                                                   |
+| `thumbnailSrc`  | `string`                                | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.                                                                                                    |
+| `renderContent` | `never`                                 | —       | —                                                                                                                                                                                   |
+| `fileName`      | `string`                                | —       | Display name of the file shown in the top info bar.                                                                                                                                 |
+| `fileSize`      | `string`                                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                                                                            |
+| `customActions` | `FullscreenImageCarouselCustomAction[]` | —       | Replaces the component-level `customActions` while this item is active. Leave `undefined` to inherit the component-level list. Pass `[]` to render no custom actions for this item. |
+
+## Rules
+
+-   Always provide `show` and `items` — both are required.
+-   Always wire `onClose` to set `show` to `false`; the component does not close itself.
+-   Do not reorder the `items` array while a delete is in flight.
+-   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
+
+## Anti-patterns
+
+-   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/skills/fds-build/resources/components/histogram-slider.md b/skills/fds-build/resources/components/histogram-slider.md
new file mode 100644
index 0000000000..9c7501df95
--- /dev/null
+++ b/skills/fds-build/resources/components/histogram-slider.md
@@ -0,0 +1,41 @@
+# HistogramSlider
+
+Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
+
+A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Rules
+
+-   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
+-   `interval` must match the gap between `minValue` of consecutive bins.
+-   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
+-   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/skills/fds-build/resources/components/icon.md b/skills/fds-build/resources/components/icon.md
new file mode 100644
index 0000000000..2af881a6d9
--- /dev/null
+++ b/skills/fds-build/resources/components/icon.md
@@ -0,0 +1,167 @@
+# Icons
+
+Icons come from `@lifesg/react-icons` — a separate package. Each icon is its own named export.
+
+## Import pattern
+
+Icon names follow `{name}` → component name is `{PascalCase}Icon`:
+
+```tsx
+import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right";
+import { TickCircleFillIcon } from "@lifesg/react-icons/tick-circle-fill";
+import { PersonIcon } from "@lifesg/react-icons/person";
+```
+
+Pattern: `kebab-case` name → import path `@lifesg/react-icons/{name}` → component `{PascalCase}Icon`
+
+## Available icons
+
+Icons come in two variants: outline (default) and filled (`-fill` suffix).
+
+### Arrows & Navigation
+
+`arrow-up` `arrow-down` `arrow-left` `arrow-right`
+`arrow-up-circle` `arrow-up-circle-fill` `arrow-down-circle` `arrow-down-circle-fill`
+`arrow-left-circle` `arrow-left-circle-fill` `arrow-right-circle` `arrow-right-circle-fill`
+`arrow-left-up` `arrow-left-down` `arrow-right-up` `arrow-right-down`
+`chevron-up` `chevron-down` `chevron-left` `chevron-right`
+`chevron-2-left` `chevron-2-right`
+`chevron-line-left` `chevron-line-right`
+`caret-up` `caret-down` `caret-left` `caret-right`
+`multi-chevron-up-down` `multi-chevron-down-up`
+`navigation` `navigation-fill`
+`external` `return`
+
+### Actions
+
+`plus` `plus-circle` `plus-circle-fill`
+`minus` `minus-circle` `minus-circle-fill` `minus-square` `minus-square-fill`
+`cross` `cross-circle` `cross-circle-fill`
+`tick` `tick-circle` `tick-circle-fill`
+`pencil` `pencil-fill` `pencil-stroke` `pencil-stroke-fill`
+`bin` `bin-fill`
+`copy` `copy-fill`
+`download` `upload`
+`share` `link`
+`login` `logout`
+`refresh` `replay` `retry`
+`drag-handle`
+`filter`
+`sort-ascending` `sort-descending`
+`fullscreen-open` `fullscreen-close`
+`read-more`
+`eraser`
+
+### Status & Feedback
+
+`tick-circle` `tick-circle-fill`
+`cross-circle` `cross-circle-fill`
+`exclamation-circle` `exclamation-circle-fill`
+`exclamation-triangle` `exclamation-triangle-fill`
+`i-circle` `i-circle-fill`
+`questionmark-circle` `questionmark-circle-fill`
+`thumb-up` `thumb-up-fill`
+`star` `star-fill` `star-half`
+
+### People & Identity
+
+`person` `person-fill`
+`person-2` `person-2-fill`
+`person-group` `person-group-fill`
+`person-plus` `person-plus-fill`
+`person-minus` `person-minus-fill`
+`person-2-plus` `person-2-plus-fill`
+`person-2-minus` `person-2-minus-fill`
+`person-gear` `person-gear-fill`
+`person-off` `person-off-fill`
+`id-card` `id-card-fill`
+
+### Communication
+
+`envelope` `envelope-fill`
+`envelope-open` `envelope-open-fill`
+`bell` `bell-fill`
+`phone` `phone-fill`
+`inbox` `inbox-fill`
+`speaker` `speaker-fill`
+
+### Files & Documents
+
+`doc` `doc-fill`
+`doc-pencil` `doc-pencil-fill`
+`album` `album-fill`
+`box` `box-fill`
+`index`
+`text` `text-fill`
+
+### Calendar & Time
+
+`calendar` `calendar-fill`
+`calendar-event` `calendar-event-fill`
+`calendar-plus` `calendar-plus-fill`
+`calendar-cross` `calendar-cross-fill`
+`calendar-dot` `calendar-dot-fill`
+`calendar-pencil` `calendar-pencil-fill`
+`calendar-tick` `calendar-tick-fill`
+`clock` `clock-fill`
+`recurring` `non-recurring`
+
+### Location & Maps
+
+`map` `map-fill`
+`pin` `pin-fill`
+`point`
+`navigation` `navigation-fill`
+`globe`
+`house` `house-fill`
+`building`
+`floor-plan` `floor-plan-fill`
+
+### Devices & Media
+
+`camera` `camera-fill`
+`tablet` `tablet-fill`
+`phone` `phone-fill`
+`cloud` `cloud-fill`
+`cloud-arrow-up` `cloud-arrow-up-fill`
+`cloud-arrow-down` `cloud-arrow-down-fill`
+`cloud-tick` `cloud-tick-fill`
+`qr`
+
+### UI & Layout
+
+`menu`
+`ellipsis-horizontal` `ellipsis-vertical`
+`gear` `gear-fill`
+`lock` `lock-fill`
+`eye` `eye-fill`
+`eye-slash` `eye-slash-fill`
+`list`
+`square` `square-fill`
+`square-2x2` `square-2x2-fill`
+`square-tick` `square-tick-fill`
+`circle` `circle-dot`
+`toggle-on` `toggle-on-fill`
+`toggle-off` `toggle-off-fill`
+`magnifier` `magnifier-plus` `magnifier-minus`
+
+### Misc
+
+`bookmark` `bookmark-fill`
+`chart` `chart-fill`
+`car`
+`dollar`
+`printer` `printer-fill`
+`lightbulb` `lightbulb-fill`
+`language`
+`ticket` `ticket-fill`
+`triangle-forward` `triangle-forward-fill`
+`align-left` `align-center` `align-right` `align-justify`
+`placeholder` `placeholder-image`
+
+## Rules
+
+-   Never guess an icon name — verify it exists in the list above before importing.
+-   `-fill` variants are the solid/filled version; the base name is outline.
+-   Fallback: if no suitable icon exists in `@lifesg/react-icons`, use `@mui/icons-material` as a secondary source.
+-   For icon-only buttons (`<Button icon={<Icon />} />`), always set `aria-label` — the icon alone is not accessible.
diff --git a/skills/fds-build/resources/components/image-button.md b/skills/fds-build/resources/components/image-button.md
new file mode 100644
index 0000000000..bdcb2bd27c
--- /dev/null
+++ b/skills/fds-build/resources/components/image-button.md
@@ -0,0 +1,12 @@
+# ImageButton
+
+Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
diff --git a/skills/fds-build/resources/components/input.md b/skills/fds-build/resources/components/input.md
new file mode 100644
index 0000000000..2ad6979937
--- /dev/null
+++ b/skills/fds-build/resources/components/input.md
@@ -0,0 +1,51 @@
+# Input
+
+Import: `import { Input } from "@lifesg/react-design-system/input"`
+
+## When to use
+
+Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
+
+## Variants
+
+| `styleType`            | When to use                                                                                                      |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
+| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Rules
+
+-   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
+-   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
+-   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
+-   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
+-   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
+
+## Anti-patterns
+
+-   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/skills/fds-build/resources/components/language-switcher.md b/skills/fds-build/resources/components/language-switcher.md
new file mode 100644
index 0000000000..655a6c359e
--- /dev/null
+++ b/skills/fds-build/resources/components/language-switcher.md
@@ -0,0 +1,15 @@
+# LanguageSwitcher
+
+Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Rules
+
+-   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/skills/fds-build/resources/components/layout.md b/skills/fds-build/resources/components/layout.md
new file mode 100644
index 0000000000..b77a8d0948
--- /dev/null
+++ b/skills/fds-build/resources/components/layout.md
@@ -0,0 +1,156 @@
+# Layout
+
+Import: `import { Layout } from "@lifesg/react-design-system/layout"`
+
+## Composition
+
+```
+Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
+├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
+├── Layout.ColDiv xsCols lgCols
+└── Layout.ColDiv xsCols lgCols
+
+Layout.Container type="flex"        ← horizontal flexbox row
+└── {children}
+
+Layout.Container type="flex-column" ← vertical flexbox column
+└── {children}
+```
+
+`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
+
+-   `Layout.ColDiv` — responsive grid column div
+
+## Usage
+
+```tsx
+import { Layout } from "@lifesg/react-design-system/layout";
+
+<Layout.Container type="grid">
+    <Layout.ColDiv xsCols={8} lgCols={6}>
+        Content
+    </Layout.ColDiv>
+</Layout.Container>;
+```
+
+| `type`          | Use case                         |
+| --------------- | -------------------------------- |
+| `"grid"`        | Responsive column grid (default) |
+| `"flex"`        | Horizontal flexbox layout        |
+| `"flex-column"` | Vertical flexbox layout          |
+
+## Breakpoints
+
+| Breakpoint | Min width | Columns | Gutter | Device                |
+| ---------- | --------- | ------- | ------ | --------------------- |
+| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
+| `xs`       | 321px     | 8       | 16px   | Small mobile          |
+| `sm`       | 376px     | 8       | 16px   | Mobile                |
+| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
+| `lg`       | 769px     | 12      | 32px   | Desktop               |
+| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
+| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
+
+### Common column widths
+
+| Use case                             | `xsCols` | `lgCols` | `xlCols` |
+| ------------------------------------ | -------- | -------- | -------- |
+| Full width                           | 8        | 12       | —        |
+| Full width (form progress indicator) | 12       | 12       | —        |
+| Narrow content (forms)               | 12       | 9        | 8        |
+| Half-width (2-up cards)              | 8        | 6        | —        |
+| Third-width (3-up cards)             | 8        | 4        | —        |
+| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
+| Sidebar                              | 8        | 3        | —        |
+| Main + sidebar main                  | 8        | 9        | —        |
+
+## Responsive styles
+
+Use CSS Module classes for responsive styles in v4. The `MediaQuery` breakpoint body classes replace `@media` queries in CSS Modules.
+
+```tsx
+import styles from "./MyComponent.module.css";
+
+<div className={styles.responsiveDiv}>...</div>;
+```
+
+```css
+/* MyComponent.module.css */
+.responsiveDiv {
+    padding: var(--fds-spacing-16);
+}
+
+:global(body.fds-breakpoint-lg-min) .responsiveDiv {
+    padding: var(--fds-spacing-32);
+}
+```
+
+| CSS Module selector                        | Query type          | When it applies                  |
+| ------------------------------------------ | ------------------- | -------------------------------- |
+| `:global(body.fds-breakpoint-md-min) .cls` | `min-width: 481px`  | md and up (tablet+)              |
+| `:global(body.fds-breakpoint-lg-min) .cls` | `min-width: 769px`  | lg and up (desktop+)             |
+| `:global(body.fds-breakpoint-md-max) .cls` | `max-width: 768px`  | md and below (mobile only)       |
+| `:global(body.fds-breakpoint-lg-max) .cls` | `max-width: 1200px` | lg and below (non-large-desktop) |
+
+Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Use CSS Modules for component-level styles — do not use plain inline styles for layout concerns.
+-   Use `:where(body.fds-breakpoint-{bp}-min)` selectors for responsive styles — never hardcoded pixel breakpoints.
+-   Use CSS custom properties for spacing (e.g. `var(--fds-spacing-16)`) — never hardcode pixel values.
+
+Grid rules:
+
+-   Always use `type="grid"` on Container for responsive column layouts.
+-   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
+-   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
+-   Never nest `Layout.Container` inside another `Layout.Container`.
+-   A column span applies to all larger viewports until overridden.
diff --git a/skills/fds-build/resources/components/link-list.md b/skills/fds-build/resources/components/link-list.md
new file mode 100644
index 0000000000..471477e898
--- /dev/null
+++ b/skills/fds-build/resources/components/link-list.md
@@ -0,0 +1,120 @@
+# LinkList
+
+Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
+
+## When to use
+
+Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
+
+## Sub-components
+
+### LinkListItemProps
+
+| Prop                   | Type                                                   | Default | Description                                        |
+| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
+| `title`                | `string`                                               | —       | Link label — required                              |
+| `description`          | `string`                                               | —       | First-level supporting text below the title        |
+| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
+| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
+| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
+| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
+
+Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
+
+### Custom labels
+
+| Prop       | Type     | Default       | Description                    |
+| ---------- | -------- | ------------- | ------------------------------ |
+| `viewMore` | `string` | `"View more"` | Label for the show-more button |
+| `viewLess` | `string` | `"View less"` | Label for the show-less button |
+
+## Variants
+
+| `style`     | Usage                                                  |
+| ----------- | ------------------------------------------------------ |
+| `"default"` | Standard size — use in main content areas              |
+| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
+
+| `loadMode` | Usage                                                         |
+| ---------- | ------------------------------------------------------------- |
+| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
+| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
+
+## Usage
+
+```tsx
+import { LinkList } from "@lifesg/react-design-system/link-list";
+
+<LinkList
+    items={[
+        {
+            title: "Apply for a grant",
+            description: "Find out if you qualify.",
+            href: "/grants/apply",
+        },
+        { title: "Check application status", href: "/grants/status" },
+        { title: "Download forms", href: "/grants/forms" },
+    ]}
+    maxShown={2}
+/>;
+```
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string \| JSX.Element`                                     | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string \| JSX.Element`                                     | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Rules
+
+-   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
+-   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
+-   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
+-   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
+-   Use `description` to give users enough context to choose the right link without clicking.
+
+## Anti-patterns
+
+-   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
+-   Omitting `description` when link titles are ambiguous.
+-   Using LinkList for non-link content — use a list or table instead.
diff --git a/skills/fds-build/resources/components/local-nav.md b/skills/fds-build/resources/components/local-nav.md
new file mode 100644
index 0000000000..d9a0db7e27
--- /dev/null
+++ b/skills/fds-build/resources/components/local-nav.md
@@ -0,0 +1,119 @@
+# LocalNav
+
+Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
+
+## When to use
+
+Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
+
+## Sub-components
+
+`LocalNavMenu`, `LocalNavDropdown`
+
+## Variants
+
+| Component          | Viewport          | Behaviour                                                              |
+| ------------------ | ----------------- | ---------------------------------------------------------------------- |
+| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
+| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
+
+## Usage
+
+```tsx
+import {
+    LocalNavMenu,
+    LocalNavDropdown,
+} from "@lifesg/react-design-system/local-nav";
+
+const navItems = [
+    { title: "Overview", id: "overview" },
+    { title: "Eligibility", id: "eligibility" },
+    { title: "How to apply", id: "how-to-apply" },
+];
+
+{
+    /* Desktop */
+}
+<LocalNavMenu
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+
+{
+    /* Mobile / tablet */
+}
+<LocalNavDropdown
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    defaultLabel="Jump to section"
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+```
+
+## Props — `TitleAddonProps`
+
+| Prop    | Type          | Default | Description                                                             |
+| ------- | ------------- | ------- | ----------------------------------------------------------------------- |
+| `left`  | `JSX.Element` | —       | Element rendered immediately before the title.                          |
+| `right` | `JSX.Element` | —       | Element rendered after the title, flushed to the far right of the item. |
+
+## Props — `LocalNavItemProps`
+
+| Prop         | Type                        | Default | Description                                                                                                                                                 |
+| ------------ | --------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*   | `string \| React.ReactNode` | —       | —                                                                                                                                                           |
+| `id`         | `string`                    | —       | —                                                                                                                                                           |
+| `titleAddon` | `TitleAddonProps`           | —       | Optional addon element rendered alongside the item title. Ignored when a custom `renderItem` is provided, since the caller then controls the item's layout. |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Rules
+
+-   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
+-   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
+-   Place `LocalNavMenu` on the left side of the page content area — not above it.
+-   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
+-   Keep item labels short — long labels cause overflow.
+-   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
+
+## Anti-patterns
+
+-   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
+-   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
+-   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/skills/fds-build/resources/components/masthead.md b/skills/fds-build/resources/components/masthead.md
new file mode 100644
index 0000000000..815ca760b9
--- /dev/null
+++ b/skills/fds-build/resources/components/masthead.md
@@ -0,0 +1,14 @@
+# Masthead
+
+Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Rules
+
+-   No mandatory props.
+-   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/skills/fds-build/resources/components/menu.md b/skills/fds-build/resources/components/menu.md
new file mode 100644
index 0000000000..626ac316ec
--- /dev/null
+++ b/skills/fds-build/resources/components/menu.md
@@ -0,0 +1,109 @@
+# Menu
+
+Import: `import { Menu } from "@lifesg/react-design-system/menu"`
+
+## When to use
+
+Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
+
+Common use cases:
+
+-   Avatar / user account menu in authenticated dashboards
+-   Navbar link dropdown for sub-navigation
+
+## Sub-components
+
+`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
+
+## Variants
+
+| Use case          | Structure                                                                                                                   |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
+| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
+| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
+
+## Usage
+
+```tsx
+import { Menu } from "@lifesg/react-design-system/menu";
+import { Button } from "@lifesg/react-design-system/button";
+
+<Menu
+    menuContent={
+        <Menu.Content>
+            <Menu.Section showDivider={false}>
+                <Menu.Link href="/profile">Profile</Menu.Link>
+                <Menu.Link href="/settings">Settings</Menu.Link>
+            </Menu.Section>
+            <Menu.Section>
+                <Menu.Item label="Sign out" onClick={() => {}} />
+            </Menu.Section>
+        </Menu.Content>
+    }
+>
+    <Button styleType="secondary">Account</Button>
+</Menu>;
+```
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                 | Default | Description                                                      |
+| ------------- | -------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `ReactElement<MenuSectionProps> \| ReactElement<MenuSectionProps>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                             | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                                                                                                                                                                                      |
+| ------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.                                                                                                                                                                             |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above.                                                                                                                                                                      |
+| `columns`     | `number`                               | —       | Renders section children in a grid with the given number of columns on desktop. Items flow vertically (top-to-bottom) within each column before wrapping to the next. Has no effect on mobile viewports, which always render as a single column. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                                                                                                                                                                                         |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Rules
+
+-   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
+-   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
+-   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
+-   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
+-   For user account menus, always show the user's name and email as the first section.
+-   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
+
+## Anti-patterns
+
+-   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
+-   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
+-   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/skills/fds-build/resources/components/modal.md b/skills/fds-build/resources/components/modal.md
new file mode 100644
index 0000000000..091e7e1f52
--- /dev/null
+++ b/skills/fds-build/resources/components/modal.md
@@ -0,0 +1,150 @@
+# ModalV2
+
+Import: `import { ModalV2 } from "@lifesg/react-design-system/modal-v2"`
+
+## When to use
+
+Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
+
+> **Note:** `Modal` is deprecated. Use `ModalV2` — it provides improved scroll behaviour, proper focus management via `@floating-ui/react`, and a composable slot-based API.
+
+## Sub-components
+
+`ModalV2`, `ModalV2.Card`, `ModalV2.Header`, `ModalV2.Content`, `ModalV2.Footer`, `ModalV2.CloseButton`
+
+## Variants
+
+| Use case            | Structure                                                        |
+| ------------------- | ---------------------------------------------------------------- |
+| Confirmation dialog | `ModalV2.Header` + `ModalV2.Content` + `ModalV2.Footer`          |
+| Detail view         | `ModalV2.Header` (close only, no title) + `ModalV2.Content`      |
+| Short form          | `ModalV2.Header` + `ModalV2.Content` (fields) + `ModalV2.Footer` |
+
+## Usage
+
+### Confirmation dialog
+
+```tsx
+import { useState } from "react";
+import { ModalV2 } from "@lifesg/react-design-system/modal-v2";
+import { Button } from "@lifesg/react-design-system/button";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+const ConfirmDeleteModal = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    const handleConfirm = () => {
+        // perform action
+        setShow(false);
+    };
+
+    return (
+        <>
+            <Button onClick={() => setShow(true)}>Delete item</Button>
+
+            <ModalV2
+                show={show}
+                onClose={handleClose}
+                enableOverlayClick
+                onOverlayClick={handleClose}
+            >
+                <ModalV2.Card>
+                    <ModalV2.Header title="Delete this item?" />
+                    <ModalV2.Content>
+                        <Typography.BodyBL>
+                            This action cannot be undone.
+                        </Typography.BodyBL>
+                    </ModalV2.Content>
+                    <ModalV2.Footer
+                        primaryButton={
+                            <Button onClick={handleConfirm}>Confirm</Button>
+                        }
+                        secondaryButton={
+                            <Button styleType="secondary" onClick={handleClose}>
+                                Cancel
+                            </Button>
+                        }
+                    />
+                </ModalV2.Card>
+            </ModalV2>
+        </>
+    );
+};
+```
+
+### Detail view (close button only, no title)
+
+```tsx
+<ModalV2 show={show} onClose={handleClose}>
+    <ModalV2.Card>
+        <ModalV2.Header />
+        <ModalV2.Content>
+            <Typography.BodyBL>Supplementary details here.</Typography.BodyBL>
+        </ModalV2.Content>
+    </ModalV2.Card>
+</ModalV2>
+```
+
+## Props — `ModalCardProps`
+
+| Prop          | Type                        | Default | Description                                                                                                                       |
+| ------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `React.ReactNode`           | —       | —                                                                                                                                 |
+| `elementRef`  | `React.Ref<HTMLDivElement>` | —       | Ref to the modal card DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+| `fullscreen`  | `boolean`                   | —       | When `true`, the card expands to fill the viewport with no border-radius, padding, or box-shadow.                                 |
+
+## Props — `ModalHeaderProps`
+
+| Prop                  | Type                | Default | Description                                                                                                                    |
+| --------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title`               | `string`            | —       | Heading text rendered in the header. Always centered regardless of `closeButtonPosition`. Omit for a close-button-only header. |
+| `closeButtonPosition` | `"left" \| "right"` | "right" | Which side of the header the close button is placed on. The title alignment adjusts automatically.                             |
+
+## Props — `ModalContentProps`
+
+| Prop          | Type              | Default | Description |
+| ------------- | ----------------- | ------- | ----------- |
+| `children` \* | `React.ReactNode` | —       | —           |
+
+## Props — `ModalFooterProps`
+
+| Prop              | Type              | Default | Description                                     |
+| ----------------- | ----------------- | ------- | ----------------------------------------------- |
+| `primaryButton`   | `React.ReactNode` | —       | Node rendered in the primary action position.   |
+| `secondaryButton` | `React.ReactNode` | —       | Node rendered in the secondary action position. |
+
+## Props — `ModalV2Props`
+
+| Prop                    | Type                      | Default  | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false    | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —        | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom" | Direction from which the modal animates in and out.                                                                                                     |
+| `enableOverlayClick`    | `boolean`                 | true     | Whether clicking the overlay backdrop triggers `onOverlayClick`. The caller is responsible for dismissing the modal in the callback.                    |
+| `rootComponentId`       | `string`                  | —        | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —        | The z-index applied to the overlay stack.                                                                                                               |
+| `onClose`               | `(() => void)`            | —        | Called when the modal is dismissed via the Escape key and close button.                                                                                 |
+| `onOverlayClick`        | `(() => void)`            | —        | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true     | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+| `disableInitialFocus`   | `boolean`                 | false    | Disables automatic focus on the modal container when it opens. When `true`, the consumer is responsible for focusing an element within the modal.       |
+
+## Rules
+
+-   Always pass `onClose` to `ModalV2` — it is used by `ModalV2.Header` / `ModalV2.CloseButton` via context.
+-   Always wrap content in `ModalV2.Card` — it handles internal layout of slots.
+-   Use `ModalV2.Header` (not `ModalV2.CloseButton`) when the modal has a title — the header provides the close button automatically.
+-   Use `ModalV2.CloseButton` only for custom layouts where `ModalV2.Header` is not present.
+-   Pass action buttons to `ModalV2.Footer` via `primaryButton` / `secondaryButton` — do not place them inside `ModalV2.Content`.
+-   Provide `enableOverlayClick` + `onOverlayClick` together to allow overlay dismissal.
+-   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
+-   Keep modal content focused — one task or decision per modal.
+
+## Anti-patterns
+
+-   Do not use the deprecated `Modal` — use `ModalV2`.
+-   Do not pass a Fragment as the direct child of `ModalV2` — use `ModalV2.Card` or a forwardRef component.
+-   Do not put buttons inside `ModalV2.Content` — use `ModalV2.Footer`.
+-   Do not stack modals unless using `zIndex` explicitly.
+-   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
diff --git a/skills/fds-build/resources/components/navbar.md b/skills/fds-build/resources/components/navbar.md
new file mode 100644
index 0000000000..af8a0a5bef
--- /dev/null
+++ b/skills/fds-build/resources/components/navbar.md
@@ -0,0 +1,270 @@
+# Navbar
+
+Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
+
+## When to use
+
+Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
+
+## Variants
+
+| `layout`    | When to use                                     |
+| ----------- | ----------------------------------------------- |
+| `"default"` | Centered content container — standard pages     |
+| `"stretch"` | Full-width content — must match Footer `layout` |
+
+## Usage
+
+### Complete Navbar with link items, a submenu, and an action button
+
+`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
+
+```tsx
+import { useState } from "react";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+
+const AppNavbar = () => {
+    const [selectedId, setSelectedId] = useState("home");
+
+    return (
+        <Navbar
+            masthead
+            selectedId={selectedId}
+            onItemClick={(item) => item.id && setSelectedId(item.id)}
+            items={{
+                desktop: [
+                    // itemType defaults to "link"
+                    {
+                        id: "home",
+                        children: "Home",
+                        href: "/",
+                    },
+                    {
+                        id: "guides",
+                        children: "Guides",
+                        href: "/guides",
+                        // subMenu items share the same shape as top-level link items
+                        subMenu: [
+                            {
+                                id: "guides-start",
+                                children: "Getting started",
+                                href: "/guides/start",
+                            },
+                            {
+                                id: "guides-api",
+                                children: "API reference",
+                                href: "/guides/api",
+                            },
+                        ],
+                    },
+                    {
+                        // itemType: "component" — renders arbitrary JSX; no href or id needed
+                        itemType: "component",
+                        children: <UserAvatar />,
+                    },
+                ],
+            }}
+            actionButtons={{
+                desktop: [
+                    {
+                        type: "button",
+                        args: { children: "Log in", styleType: "secondary" },
+                    },
+                ],
+            }}
+            resources={{
+                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+            }}
+        />
+    );
+};
+```
+
+Key points:
+
+-   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
+-   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
+-   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
+-   `selectedId` matches against the `id` field of link items to highlight the active page.
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                                                                                                                                                     |
+| ---------------- | -------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                                                                                                                                                               |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                                                                                                                                                               |
+| `subMenuColumns` | `number`                   | —           | Renders `subMenu` as a multi-column layout on desktop. Items flow vertically (top-to-bottom) within each column before wrapping to the next. Has no effect on the mobile drawer, which always renders `subMenu` as an expandable vertical list. |
+| `id` \*          | `string`                   | —           | —                                                                                                                                                                                                                                               |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                                                                                                                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                                                                                                                                                   |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site.                                                                                                                                   |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                                                                                                                                                             |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Rules
+
+-   Always set `masthead` — all government services must display the masthead.
+-   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
+-   `items.desktop` is required; the component crashes without it.
+-   `items.mobile` is optional — falls back to `desktop` if omitted.
+-   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Limit action buttons to 2–3 maximum.
+-   Use SVG format for brand logos.
+-   When using `fixed`, add corresponding top padding to page content to prevent overlap.
+-   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
+-   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
+-   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
+-   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
+-   The `"download"` button type is pre-programmed for LifeSG purposes.
+-   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
+
+## Anti-patterns
+
+-   Do not omit `masthead` — it is required for government compliance.
+-   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
+-   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
+-   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
+-   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/skills/fds-build/resources/components/notification-banner.md b/skills/fds-build/resources/components/notification-banner.md
new file mode 100644
index 0000000000..1db204b125
--- /dev/null
+++ b/skills/fds-build/resources/components/notification-banner.md
@@ -0,0 +1,106 @@
+# NotificationBanner
+
+Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
+
+## When to use
+
+Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
+
+## Sub-components
+
+-   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
+
+## HOC
+
+```ts
+withNotificationBanner(data: NotificationContentAttributes[])
+```
+
+### NotificationContentAttributes
+
+| Prop              | Type                                       | Default | Description                                      |
+| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
+| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
+| `content`         | `string`                                   | —       | Text content — required                          |
+| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
+
+## Usage
+
+```tsx
+import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
+
+<NotificationBanner dismissible sticky onDismiss={() => {}}>
+    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
+    <NotificationBanner.Link href="/status">
+        View status
+    </NotificationBanner.Link>
+</NotificationBanner>;
+```
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Rules
+
+-   Place directly below the Navbar — above all page content.
+-   Use for page-wide or system-wide notices only — not for section-specific messages.
+-   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
+-   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
+-   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
+-   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
+
+## Anti-patterns
+
+-   Using NotificationBanner for section-specific messages — use Alert instead.
+-   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
+-   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/skills/fds-build/resources/components/pagination.md b/skills/fds-build/resources/components/pagination.md
new file mode 100644
index 0000000000..e20716b857
--- /dev/null
+++ b/skills/fds-build/resources/components/pagination.md
@@ -0,0 +1,104 @@
+# Pagination
+
+Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
+
+## When to use
+
+Use below lists or tables when content is split across multiple pages.
+
+## Usage
+
+### Basic pagination (1-based indexing)
+
+```tsx
+import { useState } from "react";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+
+const ResultsList = () => {
+    const totalItems = 243;
+    const pageSize = 10;
+    // activePage is 1-based: page 1 is the first page, not page 0
+    const [activePage, setActivePage] = useState(1);
+
+    return (
+        <>
+            <MyResultsTable
+                items={results.slice(
+                    (activePage - 1) * pageSize,
+                    activePage * pageSize
+                )}
+            />
+            <Pagination
+                totalItems={totalItems}
+                pageSize={pageSize}
+                activePage={activePage}
+                onPageChange={(page) => setActivePage(page)} // page is 1-based
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+### With page size changer
+
+`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
+
+```tsx
+const [activePage, setActivePage] = useState(1);
+const [pageSize, setPageSize] = useState(10);
+
+<Pagination
+    totalItems={500}
+    pageSize={pageSize}
+    activePage={activePage}
+    onPageChange={(page) => setActivePage(page)}
+    onPageSizeChange={(page, size) => {
+        setPageSize(size);
+        setActivePage(page); // component resets to page 1 on size change
+    }}
+    showFirstAndLastNav
+    showPageSizeChanger
+/>;
+```
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `variant`             | `"default" \| "full" \| "compact"`           | "default"           | Controls whether the pagination follows the responsive layout or always renders the full or compact layout.   |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown in the full layout to change the `pageSize`.                                  |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Rules
+
+-   `activePage` is 1-based — the first page is `1`, not `0`.
+-   Always provide `onPageChange` to update `activePage` when the user changes page.
+-   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
+-   Always center-align pagination below the results list.
+-   Place pagination below the results — never above.
+-   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
+-   The page size changer is only visible in the desktop viewport.
+-   The selected option in the page size changer takes precedence over `pageSize`.
+
+## Anti-patterns
+
+-   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
+-   Do not left- or right-align pagination.
+-   Do not place pagination above the results.
+-   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/skills/fds-build/resources/components/pill.md b/skills/fds-build/resources/components/pill.md
new file mode 100644
index 0000000000..0a9fc887f9
--- /dev/null
+++ b/skills/fds-build/resources/components/pill.md
@@ -0,0 +1,55 @@
+# Pill
+
+Import: `import { Pill } from "@lifesg/react-design-system/pill"`
+
+## When to use
+
+Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
+
+## Variants
+
+| `type`      | Usage                                                    |
+| ----------- | -------------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses          |
+| `"solid"`   | Higher emphasis — use when the status needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Pill } from "@lifesg/react-design-system/pill";
+
+<Pill type="outline" colorType="green">
+    Approved
+</Pill>;
+```
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Rules
+
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Use `"solid"` sparingly — reserve for statuses that need emphasis.
+-   Keep label text to 1–2 words — text does not wrap inside a pill.
+-   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
+
+## Anti-patterns
+
+-   Using Pill for categories or filters — use Tag instead.
+-   Using `"red"` for non-error states.
+-   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/skills/fds-build/resources/components/popover.md b/skills/fds-build/resources/components/popover.md
new file mode 100644
index 0000000000..aca1778832
--- /dev/null
+++ b/skills/fds-build/resources/components/popover.md
@@ -0,0 +1,80 @@
+# Popover
+
+Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
+
+## When to use
+
+Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
+
+## Variants
+
+Two usage patterns are available:
+
+-   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
+-   **`Popover` component** — a standalone popover that you control manually.
+
+## Usage
+
+```tsx
+import { withPopover } from "@lifesg/react-design-system/popover";
+import { Button } from "@lifesg/react-design-system/button";
+
+{
+    /* Preferred: HOC wraps an existing element */
+}
+{
+    withPopover(<Button styleType="link">What is this?</Button>, {
+        content: "This field requires your NRIC number.",
+        trigger: "click",
+    });
+}
+```
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Rules
+
+-   Use `withPopover` for most cases — it handles trigger logic automatically.
+-   Use the `Popover` component directly when you need full manual control over visibility.
+-   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/skills/fds-build/resources/components/progress-indicator.md b/skills/fds-build/resources/components/progress-indicator.md
new file mode 100644
index 0000000000..6cc2ddcc3b
--- /dev/null
+++ b/skills/fds-build/resources/components/progress-indicator.md
@@ -0,0 +1,47 @@
+# ProgressIndicator
+
+Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
+
+## When to use
+
+Use in multi-step forms or wizards to show the user's position within the flow.
+
+## Usage
+
+```tsx
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+
+const steps = [
+    { label: "Personal details" },
+    { label: "Documents" },
+    { label: "Review" },
+];
+
+<ProgressIndicator
+    steps={steps}
+    currentIndex={1}
+    displayExtractor={(step) => step.label}
+/>;
+```
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Rules
+
+-   `currentIndex` is zero-based — the first step is `0`.
+-   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
+-   Update `currentIndex` as the user moves between steps.
+-   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
+
+## Anti-patterns
+
+-   Do not use ProgressIndicator on single-step pages.
+-   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/skills/fds-build/resources/components/radio-button.md b/skills/fds-build/resources/components/radio-button.md
new file mode 100644
index 0000000000..3c0e1a0dcd
--- /dev/null
+++ b/skills/fds-build/resources/components/radio-button.md
@@ -0,0 +1,66 @@
+# RadioButton
+
+Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
+
+## When to use
+
+-   User must choose exactly one option from a small set (typically 2–5 options).
+-   Options are mutually exclusive.
+
+Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+<div role="radiogroup" aria-labelledby="group-label">
+    <label>
+        <RadioButton
+            name="plan"
+            value="basic"
+            checked={selected === "basic"}
+            onChange={(e) => {}}
+        />
+        Basic
+    </label>
+    <label>
+        <RadioButton
+            name="plan"
+            value="pro"
+            checked={selected === "pro"}
+            onChange={(e) => {}}
+        />
+        Pro
+    </label>
+</div>;
+```
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Rules
+
+-   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
+-   Always set the same `name` on all buttons in a group for native radio behaviour.
+-   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
+-   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
+
+## Anti-patterns
+
+-   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
+-   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
+-   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/skills/fds-build/resources/components/schedule.md b/skills/fds-build/resources/components/schedule.md
new file mode 100644
index 0000000000..fd7490feda
--- /dev/null
+++ b/skills/fds-build/resources/components/schedule.md
@@ -0,0 +1,78 @@
+# Schedule
+
+Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
+
+## Sub-components
+
+-   `ScheduleEntityProps` — a service/resource row with its time slots
+-   `ScheduleSlotProps` — a single bookable timeslot cell
+-   `SchedulePopoverProps` — popover config for a slot
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Rules
+
+-   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
+-   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/skills/fds-build/resources/components/sidenav.md b/skills/fds-build/resources/components/sidenav.md
new file mode 100644
index 0000000000..e129772477
--- /dev/null
+++ b/skills/fds-build/resources/components/sidenav.md
@@ -0,0 +1,183 @@
+# Sidenav
+
+Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
+
+## When to use
+
+Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
+
+Do not use for:
+
+-   Consumer-facing pages (use Navbar nav items or LocalNav instead)
+-   Simple single-section apps
+
+## Sub-components
+
+```
+Sidenav                          ← fixed sidebar container
+├── Sidenav.Group                ← logical section (optional separator)
+│   ├── Sidenav.Item             ← top-level nav link (no children)
+│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
+│   │   ├── Sidenav.DrawerSubitem
+│   │   └── Sidenav.DrawerSubitem
+│   └── Sidenav.Item
+└── Sidenav.Group
+    └── Sidenav.Item
+```
+
+`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
+
+## Variants
+
+| Depth    | Components used                              |
+| -------- | -------------------------------------------- |
+| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
+| 2 levels | + `Sidenav.DrawerItem`                       |
+| 3 levels | + `Sidenav.DrawerSubitem`                    |
+
+## Usage
+
+### 2-group, 3-item nav with full nesting
+
+```tsx
+import { CalendarIcon } from "@lifesg/react-icons/calendar";
+import { DocIcon } from "@lifesg/react-icons/doc";
+import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
+import { useState } from "react";
+import { Sidenav } from "@lifesg/react-design-system/sidenav";
+
+const AdminSidenav = () => {
+    const [selectedId, setSelectedId] = useState("dashboard");
+
+    return (
+        <Sidenav>
+            {/* Group 1 — top-level items with no sub-items: onClick fires */}
+            <Sidenav.Group separator>
+                <Sidenav.Item
+                    id="dashboard"
+                    title="Dashboard"
+                    icon={<Square2x2Icon />}
+                    selected={selectedId === "dashboard"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+
+            {/* Group 2 — Reports has sub-items so onClick is omitted;
+                clicking it opens the drawer instead */}
+            <Sidenav.Group>
+                <Sidenav.Item
+                    id="reports"
+                    title="Reports"
+                    icon={<DocIcon />}
+                    selected={
+                        selectedId === "monthly-reports" ||
+                        selectedId === "annual-reports"
+                    }
+                >
+                    {/* DrawerItem with no children: onClick fires */}
+                    <Sidenav.DrawerItem
+                        id="monthly-reports"
+                        title="Monthly reports"
+                        onClick={(id) => setSelectedId(id)}
+                    />
+                    {/* DrawerItem with children: onClick is omitted */}
+                    <Sidenav.DrawerItem
+                        id="annual-reports"
+                        title="Annual reports"
+                        selected={selectedId === "annual-reports"}
+                    >
+                        <Sidenav.DrawerSubitem
+                            id="annual-summary"
+                            title="Summary"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                        <Sidenav.DrawerSubitem
+                            id="annual-detail"
+                            title="Detailed breakdown"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                    </Sidenav.DrawerItem>
+                </Sidenav.Item>
+                <Sidenav.Item
+                    id="bookings"
+                    title="Bookings"
+                    icon={<CalendarIcon />}
+                    selected={selectedId === "bookings"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+        </Sidenav>
+    );
+};
+```
+
+Key wiring notes:
+
+-   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
+-   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
+-   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
+-   `separator` on `Sidenav.Group` draws a dividing line below that group.
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Rules
+
+-   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
+-   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
+-   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
+-   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
+
+## Anti-patterns
+
+-   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
+-   Do not nest deeper than 3 levels.
+-   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/skills/fds-build/resources/components/singpass-button.md b/skills/fds-build/resources/components/singpass-button.md
new file mode 100644
index 0000000000..c9809ab886
--- /dev/null
+++ b/skills/fds-build/resources/components/singpass-button.md
@@ -0,0 +1,14 @@
+# SingpassButton
+
+Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Rules
+
+-   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/skills/fds-build/resources/components/smart-app-banner.md b/skills/fds-build/resources/components/smart-app-banner.md
new file mode 100644
index 0000000000..7ebe6f9d7e
--- /dev/null
+++ b/skills/fds-build/resources/components/smart-app-banner.md
@@ -0,0 +1,28 @@
+# SmartAppBanner
+
+Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
diff --git a/skills/fds-build/resources/components/tab.md b/skills/fds-build/resources/components/tab.md
new file mode 100644
index 0000000000..3e4b633a9f
--- /dev/null
+++ b/skills/fds-build/resources/components/tab.md
@@ -0,0 +1,107 @@
+# Tab
+
+Import: `import { Tab } from "@lifesg/react-design-system/tab"`
+
+## When to use
+
+Use to switch between related views within the same context — not for navigating between pages.
+
+## Sub-components
+
+```
+Tab                          ← tab strip container, manages active state
+├── Tab.Item                 ← individual tab (title + panel content)
+├── Tab.Item
+└── Tab.Item
+```
+
+All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
+
+## Variants
+
+| Mode                         | When to use                                |
+| ---------------------------- | ------------------------------------------ |
+| Uncontrolled (default)       | Tab manages its own active state           |
+| Controlled (`currentActive`) | Parent needs to control which tab is shown |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabContextProps`
+
+| Prop            | Type                                       | Default | Description                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `React.ReactNode`                          | —       | —                                                                                                                                                                                                                    |
+| `initialActive` | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                               |
+| `currentActive` | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes. |
+| `onTabClick`    | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                              |
+
+## Props — `TabListProps`
+
+| Prop                     | Type                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `React.ReactNode`          | —       | —                                                                                                                                                                                                                                      |
+| `fullWidthIndicatorLine` | `boolean`                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet` | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabListItemProps`
+
+| Prop         | Type              | Default | Description                                                                         |
+| ------------ | ----------------- | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*   | `string`          | —       | Text label rendered in the tab link bar for this item.                              |
+| `titleAddon` | `TitleAddonProps` | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `width`      | `string`          | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TabPanelProps`
+
+| Prop          | Type              | Default | Description                                                              |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------------ |
+| `index` \*    | `number`          | —       | Zero-based index identifying which active tab this panel corresponds to. |
+| `children` \* | `React.ReactNode` | —       | —                                                                        |
+| `className`   | `string`          | —       | —                                                                        |
+| `id`          | `string`          | —       | —                                                                        |
+
+## Rules
+
+-   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
+-   Tab order is determined by the order of `Tab.Item` children.
+-   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
+-   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
+-   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
+-   Set `headingLevel` to match the component's position in the page heading hierarchy.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+
+## Anti-patterns
+
+-   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
+-   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
+-   Do not use long labels — they truncate on mobile and tablet.
+-   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/skills/fds-build/resources/components/table.md b/skills/fds-build/resources/components/table.md
new file mode 100644
index 0000000000..9c6726931f
--- /dev/null
+++ b/skills/fds-build/resources/components/table.md
@@ -0,0 +1,65 @@
+# Table
+
+Import: `import { Table } from "@lifesg/react-design-system/table"`
+
+## When to use
+
+-   Displaying read-only structured data with no sorting, selection, or pagination needed.
+-   Use `DataTable` instead when you need sortable columns, row selection, or pagination controls.
+
+## Composition
+
+`Table` is a thin styled wrapper over semantic HTML table elements:
+
+| Sub-component      | Renders as             |
+| ------------------ | ---------------------- |
+| `Table.Container`  | `<div>` scroll wrapper |
+| `Table`            | `<table>`              |
+| `Table.Head`       | `<thead>`              |
+| `Table.Body`       | `<tbody>`              |
+| `Table.Row`        | `<tr>`                 |
+| `Table.HeaderCell` | `<th>`                 |
+| `Table.Cell`       | `<td>`                 |
+
+Always wrap with `Table.Container` so the table scrolls horizontally on narrow viewports.
+
+## Usage
+
+```tsx
+import { Table } from "@lifesg/react-design-system/table";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+const ServiceTable = () => (
+    <Table.Container>
+        <Table>
+            <Table.Head>
+                <Table.Row>
+                    <Table.HeaderCell>Service</Table.HeaderCell>
+                    <Table.HeaderCell>Status</Table.HeaderCell>
+                    <Table.HeaderCell>Last updated</Table.HeaderCell>
+                </Table.Row>
+            </Table.Head>
+            <Table.Body>
+                <Table.Row>
+                    <Table.Cell>MyService</Table.Cell>
+                    <Table.Cell>Active</Table.Cell>
+                    <Table.Cell>1 Jan 2024</Table.Cell>
+                </Table.Row>
+            </Table.Body>
+        </Table>
+    </Table.Container>
+);
+```
+
+## Rules
+
+-   Always wrap in `Table.Container` — it provides horizontal scroll on small viewports.
+-   Use `Table.HeaderCell` (`<th>`) for column headers, not `Table.Cell`.
+-   Use `DataTable` for sortable, selectable, or paginated tables — `Table` is read-only only.
+-   All props pass through to the underlying HTML element — use `style` or `className` for custom layout only when DS tokens don't cover the need.
+
+## Anti-patterns
+
+-   Do not use `Table` when rows need to be selected or sorted — use `DataTable`.
+-   Do not nest tables.
+-   Do not omit `Table.Container` — the table will overflow on mobile without it.
diff --git a/skills/fds-build/resources/components/tag.md b/skills/fds-build/resources/components/tag.md
new file mode 100644
index 0000000000..bd2baedf88
--- /dev/null
+++ b/skills/fds-build/resources/components/tag.md
@@ -0,0 +1,68 @@
+# Tag
+
+Import: `import { Tag } from "@lifesg/react-design-system/tag"`
+
+## When to use
+
+Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
+
+## Variants
+
+| `type`      | Usage                                                 |
+| ----------- | ----------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses       |
+| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Tag } from "@lifesg/react-design-system/tag";
+
+{
+    /* Static category tag */
+}
+<Tag type="outline" colorType="blue">
+    Health
+</Tag>;
+
+{
+    /* Interactive filter tag */
+}
+<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
+    Finance
+</Tag>;
+```
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Rules
+
+-   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
+-   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Keep label text short — text does not wrap inside a tag.
+-   Use Tag for categories, filters, and tagging — use Pill for statuses.
+
+## Anti-patterns
+
+-   Using Tag for status labels — use Pill instead.
+-   Setting `interactive` without providing an `onClick` handler.
+-   Using `"red"` for non-error states.
diff --git a/skills/fds-build/resources/components/text-list.md b/skills/fds-build/resources/components/text-list.md
new file mode 100644
index 0000000000..cc8e8f826b
--- /dev/null
+++ b/skills/fds-build/resources/components/text-list.md
@@ -0,0 +1,44 @@
+# TextList
+
+Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
+
+## When to use
+
+Use for semantic list content. For navigation links, use `LinkList` instead.
+
+## Sub-components
+
+| Sub-component | Renders | When to use                                  |
+| ------------- | ------- | -------------------------------------------- |
+| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
+| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Rules
+
+-   Children must be `<li>` elements.
+-   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/skills/fds-build/resources/components/time-slot-bar-week.md b/skills/fds-build/resources/components/time-slot-bar-week.md
new file mode 100644
index 0000000000..7a5318eafc
--- /dev/null
+++ b/skills/fds-build/resources/components/time-slot-bar-week.md
@@ -0,0 +1,66 @@
+# TimeSlotBarWeek
+
+Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                        |
+| ----------------- | ---------------------------- | ---------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot      |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
+| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
+| `label`           | `string`                     | Text content within the slot cell  |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                 | Type                     | Default     | Description                                       |
+| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
+| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/skills/fds-build/resources/components/time-slot-bar.md b/skills/fds-build/resources/components/time-slot-bar.md
new file mode 100644
index 0000000000..e8f366f749
--- /dev/null
+++ b/skills/fds-build/resources/components/time-slot-bar.md
@@ -0,0 +1,57 @@
+# TimeSlotBar
+
+Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
+
+## TimeSlot
+
+| Prop              | Type                         | Default | Description                                |
+| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
+| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
+| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
+| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
+| `label`           | `string`                     | —       | Text content within the slot cell          |
+| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                    | Type                     | Default     | Description                                                            |
+| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
+| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
+| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
+| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
+| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
+| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
diff --git a/skills/fds-build/resources/components/time-slot-week-view.md b/skills/fds-build/resources/components/time-slot-week-view.md
new file mode 100644
index 0000000000..9dc74a2177
--- /dev/null
+++ b/skills/fds-build/resources/components/time-slot-week-view.md
@@ -0,0 +1,70 @@
+# TimeSlotWeekView
+
+Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                                                       |
+| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot                                     |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
+| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
+| `label`           | `string`                     | Text content within the slot cell                                 |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
+
+## TimeSlotBarStyleAttributes
+
+| Prop             | Type                     | Default     | Description                                       |
+| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `color` \*       | `string`                 | —           | The color of the slot                             |
+| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
+-   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/skills/fds-build/resources/components/timeline.md b/skills/fds-build/resources/components/timeline.md
new file mode 100644
index 0000000000..5efdb5c83e
--- /dev/null
+++ b/skills/fds-build/resources/components/timeline.md
@@ -0,0 +1,69 @@
+# Timeline
+
+Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
+
+## When to use
+
+Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
+
+## Sub-components
+
+### TimelineItemProps
+
+| Prop       | Type                                                                                                         | Default | Description                                            |
+| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
+| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
+| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
+| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
+| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
+
+## Variants
+
+| `variant`             | Usage                                |
+| --------------------- | ------------------------------------ |
+| `"completed"`         | Step or event is done                |
+| `"current"`           | Step currently in progress           |
+| `"upcoming-active"`   | Next actionable step                 |
+| `"upcoming-inactive"` | Future step, not yet actionable      |
+| `"error"`             | Step has an error                    |
+| `"disabled"`          | Step is not available                |
+| `"numeric"`           | Numbered step — use for instructions |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Rules
+
+-   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
+-   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
+-   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
+-   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
+-   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
+
+## Anti-patterns
+
+-   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
+-   Providing more than 2 status pills per item — only 2 will render.
+-   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/skills/fds-build/resources/components/timetable.md b/skills/fds-build/resources/components/timetable.md
new file mode 100644
index 0000000000..1a74d42025
--- /dev/null
+++ b/skills/fds-build/resources/components/timetable.md
@@ -0,0 +1,123 @@
+# Timetable
+
+Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
+
+## TimeTableRowData
+
+| Prop                    | Type                                                       | Default   | Description                                               |
+| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
+| `name` \*               | `string`                                                   | —         | Row header name                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
+| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
+| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
+| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
+| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
+| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
+
+## TimeTableRowCellData
+
+| Prop                  | Type                                                            | Default | Description                                                        |
+| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
+| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
+| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
+| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
+| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
+| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
+| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
+| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
+
+## TimeTableCellStyleAttributes
+
+| Prop                      | Type                                           | Description                                                                      |
+| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
+| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
+| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
+| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
+| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
+| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Rules
+
+-   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/skills/fds-build/resources/components/toast.md b/skills/fds-build/resources/components/toast.md
new file mode 100644
index 0000000000..82c044c2a9
--- /dev/null
+++ b/skills/fds-build/resources/components/toast.md
@@ -0,0 +1,72 @@
+# Toast
+
+Import: `import { Toast } from "@lifesg/react-design-system/toast"`
+
+## When to use
+
+Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
+
+## Sub-components
+
+### ActionButtonProps
+
+| Prop      | Type         | Default | Description                                         |
+| --------- | ------------ | ------- | --------------------------------------------------- |
+| `label`   | `string`     | —       | Label of the action button — required               |
+| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
+
+## Variants
+
+| `type`      | When to use                   |
+| ----------- | ----------------------------- |
+| `"success"` | Action completed successfully |
+| `"error"`   | Action failed or system error |
+| `"warning"` | Completed with caution        |
+| `"info"`    | Neutral status update         |
+
+## Usage
+
+```tsx
+import { Toast } from "@lifesg/react-design-system/toast";
+
+<Toast
+    type="success"
+    label="Changes saved successfully."
+    autoDismiss
+    onDismiss={() => {}}
+/>;
+```
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Rules
+
+-   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
+-   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
+-   Use `actionButton` for recoverable errors (retry, undo).
+-   Use `title` + `label` together when the toast message has a heading and a description.
+-   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
+
+## Anti-patterns
+
+-   Using Toast for errors that require user action without providing an `actionButton`.
+-   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
+-   Replacing Alert with Toast for section-specific inline messages.
diff --git a/skills/fds-build/resources/components/toggle.md b/skills/fds-build/resources/components/toggle.md
new file mode 100644
index 0000000000..73d1b055bb
--- /dev/null
+++ b/skills/fds-build/resources/components/toggle.md
@@ -0,0 +1,119 @@
+# Toggle
+
+Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
+
+## When to use
+
+-   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
+-   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
+
+## Variants
+
+| `type`       | When to use                                                  |
+| ------------ | ------------------------------------------------------------ |
+| `"checkbox"` | Multiple options can be selected or deselected independently |
+| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
+| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
+| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
+
+| `styleType`   | When to use                                                  |
+| ------------- | ------------------------------------------------------------ |
+| `"default"`   | Standard bordered card                                       |
+| `"no-border"` | Borderless — for contexts where the border is visually noisy |
+
+| `type`       | Behaviour                            |
+| ------------ | ------------------------------------ |
+| `"checkbox"` | Allows deselection — standard toggle |
+| `"radio"`    | No deselection — radio-style         |
+| `"yes"`      | No deselection — tick indicator      |
+| `"no"`       | No deselection — cross indicator     |
+
+## Usage
+
+```tsx
+import { Toggle } from "@lifesg/react-design-system/toggle";
+import { Form } from "@lifesg/react-design-system/form";
+
+{/* Checkbox group */}
+<Form.Label>Select your preferences</Form.Label>
+<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
+  Email notifications
+</Toggle>
+<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
+  SMS notifications
+</Toggle>
+```
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Rules
+
+-   `children` (main label) is mandatory.
+-   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
+-   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
+-   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
+-   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
+-   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
+-   Use `childrenMaxLines` to constrain label height in dense list layouts.
+-   Place a `Form.Label` above each toggle group to provide the question or field label.
+
+### Spacing
+
+| Layout                    | Gap                                  |
+| ------------------------- | ------------------------------------ |
+| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
+| Side by side (yes / no)   | `spacing-16` between the two Toggles |
+
+```tsx
+{/* Stacked — checkbox or radio */}
+<Form.Label>Declaration</Form.Label>
+<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
+  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
+  <div style={{ marginBottom: Spacing["spacing-8"] }} />
+  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
+</ToggleWrapper>
+
+{/* Side by side — yes / no */}
+<Form.Label>Do you have a disability?</Form.Label>
+<YesNoGroup> {/* display: flex; gap: spacing-16 */}
+  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
+  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
+</YesNoGroup>
+```
+
+## Anti-patterns
+
+-   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
+-   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
+-   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
+-   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/skills/fds-build/resources/components/typography.md b/skills/fds-build/resources/components/typography.md
new file mode 100644
index 0000000000..ef489dbe6f
--- /dev/null
+++ b/skills/fds-build/resources/components/typography.md
@@ -0,0 +1,86 @@
+# Typography
+
+Import: `import { Typography } from "@lifesg/react-design-system/typography"`
+
+## When to use
+
+Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
+
+## Sub-components
+
+**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
+
+**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
+
+**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
+
+## Variants
+
+| Component         | Default element | Usage                                  |
+| ----------------- | --------------- | -------------------------------------- |
+| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
+| `HeadingXL`       | `h2`            | Page title or primary section heading  |
+| `HeadingLG`       | `h3`            | Section heading                        |
+| `HeadingMD`       | `h4`            | Subsection heading                     |
+| `HeadingSM`       | —               | Card heading, secondary heading        |
+| `HeadingXS`       | —               | Small heading                          |
+| `BodyBL`          | —               | Default paragraph text                 |
+| `BodyMD`          | —               | Medium body text                       |
+| `BodySM`          | —               | Helper text                            |
+| `BodyXS`          | —               | Metadata, timestamps                   |
+| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
+
+## Usage
+
+```tsx
+import { Typography } from "@lifesg/react-design-system/typography";
+
+<>
+    <Typography.HeadingXL>Page title</Typography.HeadingXL>
+    <Typography.BodyBL paragraph>
+        Supporting body text for the section. Use{" "}
+        <Typography.LinkMD href="/learn-more">
+            link components
+        </Typography.LinkMD>{" "}
+        for inline anchors.
+    </Typography.BodyBL>
+</>;
+```
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Rules
+
+-   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
+-   Text color is not set by the component — apply via `styled()` using Colour tokens.
+-   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
+-   Do not use Typography for parent containers — use Font tokens instead.
+-   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
+-   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+-   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
+-   Use the `weight` prop to adjust emphasis, not opacity.
+-   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
+-   Always use the `external` prop for links that navigate outside the domain.
+
+## Anti-patterns
+
+-   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
+-   Skipping heading levels for visual sizing — use the `as` prop instead.
+-   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
+-   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/skills/fds-build/resources/components/uneditable-section.md b/skills/fds-build/resources/components/uneditable-section.md
new file mode 100644
index 0000000000..deb443a0e0
--- /dev/null
+++ b/skills/fds-build/resources/components/uneditable-section.md
@@ -0,0 +1,84 @@
+# UneditableSection
+
+Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
+
+## When to use
+
+-   Displaying read-only label/value pairs on summary or review screens.
+-   Showing retrieved or pre-filled data the user cannot edit.
+
+## Sub-components
+
+-   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
+-   `UneditableSection.Item` — individual label/value item
+
+## Usage
+
+```tsx
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+<UneditableSection
+    title="Personal details"
+    items={[
+        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
+        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
+        { label: "Address", value: "123 Example Road, Singapore 123456" },
+    ]}
+/>;
+```
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Rules
+
+-   Always supply `items` with a `label` and `value` for each field.
+-   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
+-   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
+-   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
+-   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
+
+## Anti-patterns
+
+-   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
+-   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/skills/fds-build/resources/foundations/layout-composition-patterns.md b/skills/fds-build/resources/foundations/layout-composition-patterns.md
new file mode 100644
index 0000000000..14956b9c19
--- /dev/null
+++ b/skills/fds-build/resources/foundations/layout-composition-patterns.md
@@ -0,0 +1,53 @@
+# Layout & Composition Patterns
+
+Cross-cutting rules for assembling FDS components into polished layouts. Apply alongside per-page template files.
+
+---
+
+## Vertical Spacing Rhythm
+
+| Between…                                   | Token        |
+| ------------------------------------------ | ------------ |
+| Page title and first content section       | `spacing-32` |
+| Major page sections (cards → table)        | `spacing-48` |
+| Cards in a grid row (gap)                  | `spacing-24` |
+| Heading and its body text within a section | `spacing-8`  |
+| Form fields within a group                 | `spacing-24` |
+| Form field groups (personal → address)     | `spacing-32` |
+| Button row and the content above it        | `spacing-32` |
+| Last content section and page bottom       | `spacing-64` |
+
+Apply spacing tokens via inline `style` props:
+
+```tsx
+<section style={{ marginBottom: Spacing["spacing-48"] }}>...</section>
+```
+
+---
+
+## Visual Hierarchy
+
+Every page must use at least three distinct text levels.
+
+| Level   | Component              | Colour token   | Use for                                 |
+| ------- | ---------------------- | -------------- | --------------------------------------- |
+| Primary | `Typography.HeadingXL` | `text`         | Page title — one per page               |
+| Section | `Typography.HeadingMD` | `text`         | Section headings within the page        |
+| Card    | `Typography.HeadingSM` | `text`         | Card titles, panel headers              |
+| Body    | `Typography.BodyMD`    | `text`         | Default body text, descriptions         |
+| Support | `Typography.BodySM`    | `text-subtle`  | Secondary info, timestamps, helper text |
+| Caption | `Typography.BodyXS`    | `text-subtler` | Footnotes, disclaimers, metadata        |
+
+Page title pattern: `Typography.HeadingXL` as `h1`, `Typography.BodyMD` with `style={{ color: Colour["text-subtle"] }}` directly below as subtitle.
+
+---
+
+## Anti-patterns
+
+| Anti-pattern                            | Fix                                                               |
+| --------------------------------------- | ----------------------------------------------------------------- |
+| All text the same size and colour       | Use at least 3 Typography sizes; `text-subtle` for secondary text |
+| No spacing between page sections        | `spacing-48` between major sections                               |
+| Summary metric cards stacked vertically | Use a responsive grid: 3–4 across on desktop, stacked on mobile   |
+| Buttons touching content above          | `spacing-32` above button row                                     |
+| Missing page-bottom spacing             | `spacing-64` padding-bottom on page wrapper                       |
diff --git a/skills/fds-build/resources/foundations/tokens.md b/skills/fds-build/resources/foundations/tokens.md
new file mode 100644
index 0000000000..81656fda6f
--- /dev/null
+++ b/skills/fds-build/resources/foundations/tokens.md
@@ -0,0 +1,547 @@
+# Design Tokens
+
+All tokens are imported from `@lifesg/react-design-system/theme`.
+
+```tsx
+import {
+    Colour,
+    Spacing,
+    Radius,
+    Font,
+} from "@lifesg/react-design-system/theme";
+```
+
+Tokens are **plain CSS variable strings** scoped to `[data-fds-<theme>]` — use them directly in inline `style={{}}` props or as values in CSS Modules. They do not need to be called as functions and do not require `styled-components` or `useTheme`.
+
+```tsx
+// Inline style
+<div
+    style={{
+        background: Colour["bg-stronger"],
+        padding: Spacing["spacing-16"],
+    }}
+/>;
+
+// CSS Modules
+.container {
+    background: var(--fds-colour-bg-stronger);
+    padding: var(--fds-spacing-16);
+}
+```
+
+---
+
+## Anti-patterns
+
+| Anti-pattern                                                      | Why it fails                               | Correct alternative                       |
+| ----------------------------------------------------------------- | ------------------------------------------ | ----------------------------------------- |
+| Using `Colour[...]` inside a `styled-components` template literal | `styled-components` is not installed in v4 | Use in `style={{}}` or CSS Modules        |
+| Hardcoding `var(--fds-*)` directly                                | FDS internal variable names may change     | Use `Colour[...]` / `Spacing[...]` tokens |
+| Hardcoding hex values                                             | Breaks theming                             | Always use a Colour token                 |
+
+---
+
+## Overriding
+
+### In CSS
+
+Override tokens by setting the same variables in your own CSS, scoped to the theme attribute:
+
+```css
+[data-fds-theme="lifesg"] {
+    --fds-colour-primary-50: #1768be;
+    --fds-colour-text-error: #a04747;
+}
+
+/* Dark mode overrides */
+[data-fds-theme="lifesg"][data-fds-theme-mode="dark"] {
+    --fds-colour-primary-50: #6cb4ff;
+}
+```
+
+Place overrides after the theme CSS import so they take precedence.
+
+### In JavaScript
+
+Override CSS variables dynamically via the `style` prop on `ThemeProvider`:
+
+```tsx
+<ThemeProvider
+    theme="lifesg"
+    style={{
+        "--fds-colour-bg-primary": "#1768be",
+    }}
+/>
+```
+
+---
+
+## Colour
+
+### Quick decision
+
+| I need a colour for…                     | Token                           |
+| ---------------------------------------- | ------------------------------- |
+| Page / card background                   | `Colour.bg`                     |
+| Emphasis panel / CTA surface             | `Colour["bg-strong"]`           |
+| Brand-tinted surface                     | `Colour["bg-primary-subtlest"]` |
+| Hover state (custom interactive)         | `Colour["bg-hover"]`            |
+| Selected state                           | `Colour["bg-selected"]`         |
+| Disabled background                      | `Colour["bg-disabled"]`         |
+| Modal / drawer backdrop                  | `Colour["overlay-strong"]`      |
+| Body copy, headings                      | `Colour.text`                   |
+| Form labels, UI labels                   | `Colour["text-subtle"]`         |
+| Descriptions, helper text, metadata      | `Colour["text-subtler"]`        |
+| Placeholders                             | `Colour["text-subtlest"]`       |
+| Active / brand text                      | `Colour["text-primary"]`        |
+| Link text                                | `Colour.hyperlink`              |
+| Text on dark backgrounds                 | `Colour["text-inverse"]`        |
+| Disabled text                            | `Colour["text-disabled"]`       |
+| Default border (inputs, cards, dividers) | `Colour.border`                 |
+| Emphasis border                          | `Colour["border-strong"]`       |
+| Brand border / active indicator          | `Colour["border-primary"]`      |
+| Focus ring                               | `Colour["border-focus"]`        |
+| Error border                             | `Colour["border-error"]`        |
+| Default icon                             | `Colour.icon`                   |
+| Secondary / subtle icon                  | `Colour["icon-subtle"]`         |
+| Brand icon                               | `Colour["icon-primary"]`        |
+| Icon on dark backgrounds                 | `Colour["icon-inverse"]`        |
+
+### Notation
+
+Single-word tokens use dot notation: `Colour.text`, `Colour.border`, `Colour.bg`, `Colour.icon`
+
+Hyphenated tokens use bracket notation: `Colour["text-subtle"]`, `Colour["bg-hover"]`
+
+### Usage
+
+```tsx
+// Inline style — most common
+<p style={{ color: Colour["text-subtle"] }}>Secondary text</p>;
+
+// CSS Modules — assign token to a variable
+import styles from "./Card.module.css";
+
+const Card = () => (
+    <div
+        className={styles.card}
+        style={{
+            background: Colour["bg-stronger"],
+            borderColor: Colour.border,
+        }}
+    />
+);
+```
+
+DS components (Button, Form.Input, Card, etc.) handle their own colour states — only apply Colour tokens to custom elements.
+
+### Status tokens
+
+| Status  | Background   | Text           | Icon           | Border           |
+| ------- | ------------ | -------------- | -------------- | ---------------- |
+| Success | `bg-success` | `text-success` | `icon-success` | `border-success` |
+| Warning | `bg-warning` | `text-warning` | `icon-warning` | `border-warning` |
+| Error   | `bg-error`   | `text-error`   | `icon-error`   | `border-error`   |
+| Info    | `bg-info`    | `text-info`    | `icon-info`    | `border-info`    |
+
+All follow bracket notation: `Colour["bg-success"]`, `Colour["text-error"]`.
+
+### Full token reference
+
+#### Text colours
+
+| Token key                | Use for                                    |
+| ------------------------ | ------------------------------------------ |
+| `text`                   | Default body text                          |
+| `text-subtle`            | Secondary / supporting text                |
+| `text-subtler`           | Tertiary / caption-like text               |
+| `text-subtlest`          | Weakest text — muted labels, hints         |
+| `text-primary`           | Brand-coloured text (links, active labels) |
+| `text-hover`             | Text colour on hover states                |
+| `text-selected`          | Text in selected / active state            |
+| `text-selected-hover`    | Text in selected state on hover            |
+| `text-disabled`          | Disabled state text                        |
+| `text-disabled-subtle`   | Subtle disabled text                       |
+| `text-disabled-subtlest` | Faintest disabled text                     |
+| `text-selected-disabled` | Text in selected + disabled state          |
+| `text-success`           | Success state text                         |
+| `text-warning`           | Warning state text                         |
+| `text-error`             | Inline validation error text               |
+| `text-info`              | Informational state text                   |
+| `text-inverse`           | Text on dark / inverted backgrounds        |
+
+#### Icon colours
+
+| Token key                | Use for                           |
+| ------------------------ | --------------------------------- |
+| `icon`                   | Default icon fill                 |
+| `icon-subtle`            | Subdued / secondary icon          |
+| `icon-strongest`         | Highest-contrast icon (very dark) |
+| `icon-primary`           | Brand-coloured icon               |
+| `icon-primary-subtle`    | Muted brand icon                  |
+| `icon-primary-subtlest`  | Faintest brand icon               |
+| `icon-hover`             | Icon on hover                     |
+| `icon-selected`          | Icon in selected state            |
+| `icon-selected-hover`    | Icon in selected state on hover   |
+| `icon-disabled`          | Disabled icon                     |
+| `icon-disabled-subtle`   | Subtle disabled icon              |
+| `icon-selected-disabled` | Icon in selected + disabled state |
+| `icon-success`           | Success state icon                |
+| `icon-warning`           | Warning state icon                |
+| `icon-error`             | Error state icon                  |
+| `icon-error-strong`      | Strong / filled error icon        |
+| `icon-info`              | Informational icon                |
+| `icon-inverse`           | Icon on dark background           |
+| `icon-primary-inverse`   | Brand icon on inverted background |
+
+#### Border colours
+
+| Token key                  | Use for                                     |
+| -------------------------- | ------------------------------------------- |
+| `border`                   | Default input / card / divider borders      |
+| `border-strong`            | Stronger divider or emphasis border         |
+| `border-stronger`          | Strongest border emphasis                   |
+| `border-primary`           | Brand-coloured border                       |
+| `border-primary-subtle`    | Muted brand-coloured border                 |
+| `border-focus`             | Focus ring on interactive elements          |
+| `border-focus-strong`      | Strong focus ring (accessibility highlight) |
+| `border-hover`             | Border on hover                             |
+| `border-hover-strong`      | Strong border on hover                      |
+| `border-selected`          | Selected / active state border              |
+| `border-selected-subtle`   | Subtle selected state border                |
+| `border-selected-subtlest` | Faintest selected state border              |
+| `border-selected-hover`    | Selected state border on hover              |
+| `border-disabled`          | Disabled state border                       |
+| `border-selected-disabled` | Selected + disabled state border            |
+| `border-error`             | Error state border                          |
+| `border-error-focus`       | Focus ring inside error state               |
+| `border-error-strong`      | Strong error state border                   |
+| `border-success`           | Success state border                        |
+| `border-warning`           | Warning state border                        |
+| `border-info`              | Informational border                        |
+
+#### Background colours
+
+| Token key                      | Use for                                     |
+| ------------------------------ | ------------------------------------------- |
+| `bg`                           | Default surface background                  |
+| `bg-strong`                    | Slightly elevated surface                   |
+| `bg-stronger`                  | Card / panel surface                        |
+| `bg-strongest`                 | Highest elevation surface                   |
+| `bg-hover`                     | Background on hover                         |
+| `bg-hover-strong`              | Strong hover background                     |
+| `bg-hover-subtle`              | Subtle hover background                     |
+| `bg-hover-neutral`             | Neutral hover (non-primary elements)        |
+| `bg-hover-neutral-strong`      | Strong neutral hover background             |
+| `bg-selected`                  | Selected item background                    |
+| `bg-selected-hover`            | Selected item background on hover           |
+| `bg-selected-strong`           | Strong selected state                       |
+| `bg-selected-strongest`        | Strongest selected fill                     |
+| `bg-selected-strongest-hover`  | Strongest selected fill on hover            |
+| `bg-disabled`                  | Disabled element background                 |
+| `bg-selected-disabled`         | Selected + disabled background              |
+| `bg-primary`                   | Brand-coloured fill                         |
+| `bg-primary-subtle`            | Subtle brand tint                           |
+| `bg-primary-subtler`           | Lighter brand tint                          |
+| `bg-primary-subtlest`          | Faintest brand tint                         |
+| `bg-primary-hover`             | Brand background on hover                   |
+| `bg-primary-subtlest-hover`    | Faintest brand tint on hover                |
+| `bg-primary-subtlest-selected` | Faintest brand tint in selected state       |
+| `bg-success`                   | Success state background                    |
+| `bg-success-hover`             | Success background on hover                 |
+| `bg-success-strong`            | Strong success fill (badges, chips)         |
+| `bg-success-strong-hover`      | Strong success fill on hover                |
+| `bg-warning`                   | Warning state background                    |
+| `bg-warning-hover`             | Warning background on hover                 |
+| `bg-warning-strong`            | Strong warning fill                         |
+| `bg-warning-strong-hover`      | Strong warning fill on hover                |
+| `bg-error`                     | Error state background                      |
+| `bg-error-hover`               | Error background on hover                   |
+| `bg-error-strong`              | Strong error fill                           |
+| `bg-error-strong-hover`        | Strong error fill on hover                  |
+| `bg-info`                      | Informational background                    |
+| `bg-info-hover`                | Informational background on hover           |
+| `bg-info-strong`               | Strong informational fill                   |
+| `bg-info-strong-hover`         | Strong informational fill on hover          |
+| `bg-inverse`                   | Dark / inverted background                  |
+| `bg-inverse-subtle`            | Subtle inverted background                  |
+| `bg-inverse-subtler`           | Lighter inverted background                 |
+| `bg-inverse-subtlest`          | Faintest inverted background                |
+| `bg-inverse-hover`             | Inverted background on hover                |
+| `bg-available`                 | Available / open slot (scheduling contexts) |
+| `overlay-strong`               | Modal / drawer backdrop                     |
+| `overlay-subtle`               | Soft overlay                                |
+
+#### Hyperlink
+
+| Token key           | Use for                 |
+| ------------------- | ----------------------- |
+| `hyperlink`         | Default link colour     |
+| `hyperlink-inverse` | Link on dark background |
+
+#### Focus
+
+| Token key            | Use for                           |
+| -------------------- | --------------------------------- |
+| `focus-ring`         | Keyboard focus outline colour     |
+| `focus-ring-inverse` | Focus outline on dark backgrounds |
+
+### Rules
+
+-   Never hardcode hex values — always use a Colour token
+-   Use a token that most closely matches the semantics e.g. `hyperlink` for link text — not `text-primary`
+-   DS components (Button, Form.Input, Card, etc.) handle their own colour states — only apply Colour tokens to custom elements
+
+---
+
+## Spacing
+
+Base-4 system
+
+```tsx
+<div style={{ gap: Spacing["spacing-16"], padding: Spacing["spacing-24"] }} />
+```
+
+| Token         | Value | Frequency    | Typical use                             |
+| ------------- | ----- | ------------ | --------------------------------------- |
+| `spacing-0`   | 0px   | Rare         | Reset / collapse                        |
+| `spacing-4`   | 4px   | Rare         | Tight inline gaps                       |
+| `spacing-8`   | 8px   | **Common**   | Icon-text gaps, heading-to-body gaps    |
+| `spacing-12`  | 12px  | Occasional   | Tight component gaps                    |
+| `spacing-16`  | 16px  | **Dominant** | List items, form fields, component gaps |
+| `spacing-20`  | 20px  | Occasional   | Medium-small spacing                    |
+| `spacing-24`  | 24px  | **Dominant** | Card padding, section gaps              |
+| `spacing-32`  | 32px  | Common       | Large spacing, section padding          |
+| `spacing-40`  | 40px  | Occasional   | Extra-large spacing                     |
+| `spacing-48`  | 48px  | Occasional   | Page-level vertical rhythm              |
+| `spacing-64`  | 64px  | Rare         | XXL spacing                             |
+| `spacing-72`  | 72px  | Rare         | Extra-large structural spacing          |
+| `layout-xs`   | —     | —            | Layout grid gutter xs breakpoint        |
+| `layout-sm`   | —     | —            | Layout grid gutter sm breakpoint        |
+| `layout-md`   | —     | —            | Layout grid gutter md breakpoint        |
+| `layout-lg`   | —     | —            | Layout grid gutter lg breakpoint        |
+| `layout-xl`   | —     | —            | Layout grid gutter xl breakpoint        |
+| `layout-xxl`  | —     | —            | Layout grid gutter xxl breakpoint       |
+| `layout-xxxl` | —     | —            | Layout grid gutter xxxl breakpoint      |
+
+Always bracket notation: `Spacing["spacing-16"]`
+
+Never hardcode `px` values — always use a Spacing token.
+
+---
+
+## Radius
+
+| Token         | Value  | Use                                                  |
+| ------------- | ------ | ---------------------------------------------------- |
+| `Radius.none` | 0px    | Full-bleed, tables                                   |
+| `Radius.xs`   | 2px    | Rarely needed                                        |
+| `Radius.sm`   | 4px    | **Default** — form elements, small custom components |
+| `Radius.md`   | 8px    | Cards, panels, overlays                              |
+| `Radius.lg`   | 12px   | Modals, large overlays                               |
+| `Radius.full` | 9999px | Pills, avatars, circular elements                    |
+
+Always dot notation: `Radius.sm`, `Radius.md`
+
+DS components have radius baked in — do not override.
+
+---
+
+## Typography
+
+Use `Typography.*` components for all rendered text.
+
+| Component                | Default element | When to use                       |
+| ------------------------ | --------------- | --------------------------------- |
+| `Typography.HeadingXXL`  | `h1`            | Hero / landing page title         |
+| `Typography.HeadingXL`   | `h2`            | Page title (top of view)          |
+| `Typography.HeadingLG`   | `h3`            | Section heading — most common     |
+| `Typography.HeadingMD`   | `h4`            | Card heading, subsection          |
+| `Typography.HeadingSM`   | `h5`            | Small heading, list header        |
+| `Typography.HeadingXS`   | `h6`            | Tiny heading, emphasized label    |
+| `Typography.BodyBL`      | `p`             | Default body text, paragraphs     |
+| `Typography.BodyBLSmall` | `p`             | Emphasized small body text        |
+| `Typography.BodyMD`      | `p`             | Medium body text                  |
+| `Typography.BodySM`      | `p`             | Small text, captions, helper text |
+| `Typography.BodyXS`      | `p`             | Metadata, timestamps, footnotes   |
+
+Use the `as` prop when visual size and semantic heading level don't match:
+
+```tsx
+<Typography.HeadingLG as="h2">Section title</Typography.HeadingLG>
+```
+
+Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+
+### Rules
+
+-   Sentence case for all UI text — "Save changes" not "Save Changes"
+-   Heading level follows reading order, not visual size
+
+### Font tokens
+
+`Font.Spec[...]` tokens return CSS variable strings for individual font properties. Use `Typography.*` components for all text content in JSX — only use `Font` tokens when you need to apply font styles to a non-text container element.
+
+```tsx
+// Match an icon size to adjacent text — use Font.Spec for raw values
+<img style={{ height: Font.Spec["heading-size-xxl"] }} />
+```
+
+---
+
+## Breakpoints / Media Queries
+
+`ThemeProvider` automatically adds `fds-breakpoint-*` classes to `<body>` based on the current viewport width. Use these classes in CSS to apply responsive styles:
+
+-   `body.fds-breakpoint-{tier}` — viewport is within that tier's range
+-   `body.fds-breakpoint-{tier}-min` — viewport is at or above the tier's minimum
+-   `body.fds-breakpoint-{tier}-max` — viewport is at or below the tier's maximum
+
+```css
+/* Card.module.css */
+.grid {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+:global(body.fds-breakpoint-lg-min) .grid {
+    grid-template-columns: repeat(3, 1fr);
+}
+```
+
+For JS conditional logic, use the media query hooks:
+
+```tsx
+import {
+    Breakpoint,
+    useMaxWidthMediaQuery,
+    useMinWidthMediaQuery,
+    useMediaQuery,
+    useResolvedBreakpointToken,
+    parsePxOrRemValue,
+} from "@lifesg/react-design-system/theme";
+
+const ExampleComponent = () => {
+    // Simple max/min width checks
+    const isMobile = useMaxWidthMediaQuery("sm");
+    const isDesktop = useMinWidthMediaQuery("lg");
+
+    // Custom query
+    const isTablet = useMediaQuery({ maxWidth: Breakpoint["lg-max"] });
+
+    // When the actual pixel value is required (e.g. for a third-party library)
+    const tablet = parsePxOrRemValue(
+        useResolvedBreakpointToken(Breakpoint["lg-max"])
+    );
+};
+```
+
+### Breakpoint tiers
+
+| Tier  | Screen width   | `*-min` value | `*-max` value | Columns | Gutter | Margin |
+| ----- | -------------- | ------------- | ------------- | ------- | ------ | ------ |
+| `xxs` | 0 – 320 px     | —             | 320 px        | 8       | 16 px  | 24 px  |
+| `xs`  | 321 – 375 px   | 321 px        | 375 px        | 8       | 16 px  | 24 px  |
+| `sm`  | 376 – 480 px   | 376 px        | 480 px        | 8       | 16 px  | 24 px  |
+| `md`  | 481 – 768 px   | 481 px        | 768 px        | 8       | 16 px  | 24 px  |
+| `lg`  | 769 – 1200 px  | 769 px        | 1200 px       | 12      | 32 px  | 48 px  |
+| `xl`  | 1201 – 1440 px | 1201 px       | 1440 px       | 12      | 32 px  | 48 px  |
+| `xxl` | ≥ 1441 px      | 1441 px       | —             | 12      | 32 px  | 48 px  |
+
+---
+
+## Shadow Tokens
+
+```tsx
+<div style={{ boxShadow: Shadow["sm-subtle"] }} />
+```
+
+| Token key         | Common use                            |
+| ----------------- | ------------------------------------- |
+| `xs-subtle`       | Subtle glow / container resting state |
+| `xs-strong`       | Strong glow / hover or active state   |
+| `xs-focus-strong` | Keyboard focus ring on inputs         |
+| `xs-error-strong` | Error focus ring on inputs            |
+| `sm-subtle`       | Card / panel resting elevation        |
+| `sm-strong`       | Card hover / lifted state             |
+| `md-subtle`       | Modal / drawer resting elevation      |
+| `md-strong`       | Modal hover or prominent elevation    |
+
+---
+
+## Border Tokens
+
+`Border` is a flat object of CSS variable strings. Compose border properties manually using the tokens.
+
+```tsx
+import { Border } from "@lifesg/react-design-system/theme";
+
+// Individual properties
+<div
+    style={{
+        borderWidth: Border["width-010"],
+        borderStyle: Border.solid,
+        borderColor: Colour.border,
+    }}
+/>
+
+// Shorthand using template literal
+<div style={{ border: `${Border["width-010"]} ${Border.solid} ${Colour.border}` }} />
+```
+
+For dashed border styling, use the `DashedBorder` component instead:
+
+```tsx
+import { DashedBorder } from "@lifesg/react-design-system/dashed-border";
+import { Border, Colour, Radius } from "@lifesg/react-design-system/theme";
+
+<DashedBorder
+    radius={Radius["sm"]}
+    thickness={Border["width-040"]}
+    colour={Colour["border"]}
+>
+    {/* children */}
+</DashedBorder>;
+```
+
+### Token reference
+
+| Token key   | Value | Common use                  |
+| ----------- | ----- | --------------------------- |
+| `width-005` | 0.5px | Hairline divider            |
+| `width-010` | 1px   | Default input / card border |
+| `width-020` | 2px   | Emphasis / selected border  |
+| `width-040` | 4px   | Strong emphasis border      |
+| `solid`     | solid | Border style                |
+
+---
+
+## Motion Tokens
+
+```tsx
+<button
+    style={{
+        transition: `background ${Motion["duration-250"]} ${Motion["ease-default"]}`,
+    }}
+/>
+```
+
+For elements with dynamic height or width (e.g. expandable panels), use `react-spring` instead — CSS transitions cannot handle layout animation with dynamic content.
+
+### Duration
+
+| Token key       | Value  | Use for                 |
+| --------------- | ------ | ----------------------- |
+| `duration-150`  | 150ms  | Checkboxes, toggles     |
+| `duration-250`  | 250ms  | Buttons, fades          |
+| `duration-350`  | 350ms  | Icons, short movements  |
+| `duration-500`  | 500ms  | Search bars, toasts     |
+| `duration-800`  | 800ms  | Notifications, cards    |
+| `duration-1000` | 1000ms | Full-screen transitions |
+
+### Easing
+
+| Token key       | Value                                  | Use for                               |
+| --------------- | -------------------------------------- | ------------------------------------- |
+| `ease-default`  | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | Non-moving elements — opacity, colour |
+| `ease-standard` | `cubic-bezier(0.86, 0, 0.07, 1)`       | Visible throughout motion — dropdowns |
diff --git a/skills/fds-build/resources/patterns/states.md b/skills/fds-build/resources/patterns/states.md
new file mode 100644
index 0000000000..dd16fdfbaa
--- /dev/null
+++ b/skills/fds-build/resources/patterns/states.md
@@ -0,0 +1,300 @@
+# States Pattern
+
+Loading, empty, error, and success states for async operations and data absence.
+
+---
+
+## Loading states
+
+### Full-page loading
+
+```tsx
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+if (isLoading) {
+    return (
+        <Layout.Container type="grid">
+            <Layout.ColDiv xsCols={8} lgCols={12}>
+                <Card
+                    style={{
+                        textAlign: "center",
+                        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+                    }}
+                >
+                    <LoadingSpinner />
+                    {/* import { LoadingSpinner } from "@lifesg/react-design-system/loading-spinner" */}
+                    <Typography.BodyBL>Loading...</Typography.BodyBL>
+                </Card>
+            </Layout.ColDiv>
+        </Layout.Container>
+    );
+}
+```
+
+### Skeleton loading (preferred for content-heavy pages)
+
+Render placeholder blocks matching the shape of real content. Use a CSS `pulse` animation (`opacity 0.5 → 1` at 1.5s). Show the same grid structure as the loaded state — same column count, same card shapes.
+
+### Button loading (inline async)
+
+```tsx
+<Button type="submit" loading={isSubmitting} disabled={isSubmitting}>
+    {isSubmitting ? "Submitting..." : "Submit"}
+</Button>
+```
+
+Always combine `loading` + `disabled` during async to prevent double-submission.
+
+---
+
+## Empty states
+
+### First-time use (no data)
+
+```tsx
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingSM>No items yet</Typography.HeadingSM>
+    <Typography.BodyBL>
+        Get started by creating your first item
+    </Typography.BodyBL>
+    <Button
+        icon={<PlusIcon />}
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={handleCreate}
+    >
+        Create item
+    </Button>
+</Card>;
+```
+
+### No search results
+
+```tsx
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingSM>No results found</Typography.HeadingSM>
+    <Typography.BodyBL>Try adjusting your search or filters</Typography.BodyBL>
+    <Button
+        styleType="secondary"
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={handleClearFilters}
+    >
+        Clear filters
+    </Button>
+</Card>
+```
+
+For listing pages, prefer `ErrorDisplay type="no-item-found"` over a custom card.
+
+### Empty section (within a page)
+
+```tsx
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Colour, Spacing } from "@lifesg/react-design-system/theme";
+
+<div style={{ textAlign: "center", padding: `${Spacing["spacing-32"]} 0` }}>
+    <Typography.BodySM style={{ color: Colour["text-subtler"] }}>
+        No recent activity to display
+    </Typography.BodySM>
+</div>;
+```
+
+---
+
+## Error states
+
+### API / fetch error
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Layout } from "@lifesg/react-design-system/layout";
+
+if (error) {
+    return (
+        <Layout.Container type="grid">
+            <Layout.ColDiv xsCols={8} lgCols={12}>
+                <Alert
+                    type="error"
+                    actionLink={{
+                        children: "Try again",
+                        onClick: () => window.location.reload(),
+                    }}
+                >
+                    {error.message}
+                </Alert>
+            </Layout.ColDiv>
+        </Layout.Container>
+    );
+}
+```
+
+### 404 Not found
+
+```tsx
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingXL>404</Typography.HeadingXL>
+    <Typography.HeadingSM>Page not found</Typography.HeadingSM>
+    <Typography.BodyBL>
+        The page you're looking for doesn't exist or has been moved
+    </Typography.BodyBL>
+    <Button
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={() => navigate("/")}
+    >
+        Go to home
+    </Button>
+</Card>;
+```
+
+### Permission denied
+
+```tsx
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingSM>Access denied</Typography.HeadingSM>
+    <Typography.BodyBL>
+        You don't have permission to view this page
+    </Typography.BodyBL>
+    <Button
+        styleType="secondary"
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={() => navigate("/")}
+    >
+        Go to home
+    </Button>
+</Card>
+```
+
+---
+
+## Success states
+
+### Inline success
+
+```tsx
+<Alert
+    type="success"
+    actionLink={{ children: "View details", onClick: handleViewDetails }}
+>
+    {successMessage}
+</Alert>
+```
+
+### Toast notification
+
+```tsx
+import { Toast } from "@lifesg/react-design-system/toast";
+
+<Toast type="success">Changes saved successfully</Toast>
+<Toast type="error">Failed to save changes</Toast>
+```
+
+Use `Toast` for non-critical feedback. Use `Alert` for errors requiring action.
+
+### Full-page success (major operations)
+
+```tsx
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingMD>
+        Application submitted successfully
+    </Typography.HeadingMD>
+    <Typography.BodyBL>Your application is being processed</Typography.BodyBL>
+    <div
+        style={{
+            display: "flex",
+            gap: Spacing["spacing-16"],
+            justifyContent: "center",
+            marginTop: Spacing["spacing-32"],
+        }}
+    >
+        <Button onClick={() => navigate("/applications")}>
+            View applications
+        </Button>
+        <Button styleType="secondary" onClick={() => navigate("/")}>
+            Go to home
+        </Button>
+    </div>
+</Card>;
+```
+
+---
+
+## State management pattern
+
+```tsx
+const [state, setState] = useState({
+    data: null,
+    isLoading: true,
+    error: null,
+});
+
+// In component:
+if (state.isLoading) return <LoadingState />;
+if (state.error) return <ErrorState message={state.error} />;
+if (!state.data || state.data.length === 0) return <EmptyState />;
+return <DataDisplay data={state.data} />;
+```
+
+---
+
+## Rules
+
+-   Show loading feedback for any operation taking longer than 200ms
+-   Prefer skeleton loading over a spinner for content-heavy initial page loads
+-   Always provide a way out of an error state (retry, go home)
+-   Empty state messages: 1–2 sentences max, action-oriented, sentence case
+-   Error messages: name the specific problem — never "An error occurred"
+-   `Toast` auto-dismisses — use for confirmations; use `Alert` for errors needing action
+-   Full-page state containers: `padding: spacing-64 spacing-32`, `textAlign: center`, inside a `Card`
+-   Disable interactive elements during loading to prevent race conditions
+-   Use `style={{}}` with `Spacing` and `Colour` tokens for all custom spacing and colour
+
+## Anti-patterns
+
+-   Do not show a spinner for operations under 200ms — causes flicker
+-   Do not show an empty container with no state message in a listing page
+-   Do not use `Toast` for critical errors — user may miss it
+-   Do not use generic error text — always tell the user what failed
+-   Do not leave submit buttons enabled during async — always set `disabled` + `loading`
+-   Do not hardcode `px` values or hex colours — always use `Spacing` and `Colour` tokens
diff --git a/skills/fds-build/resources/setup/setup.md b/skills/fds-build/resources/setup/setup.md
new file mode 100644
index 0000000000..c21562363c
--- /dev/null
+++ b/skills/fds-build/resources/setup/setup.md
@@ -0,0 +1,202 @@
+# App Setup — Flagship v4
+
+Full project setup for `@lifesg/react-design-system` v4. Work through all steps before writing any component code.
+
+---
+
+## Step 1 — Install packages
+
+```bash
+npm install @lifesg/react-design-system @lifesg/react-icons @floating-ui/react
+```
+
+Do NOT install `styled-components` — it is not used in v4.
+
+---
+
+## Step 2 — CDN stylesheets
+
+Add these stylesheets to normalise browser styles and display fonts.
+
+```html
+<link
+    rel="stylesheet"
+    type="text/css"
+    href="https://assets.life.gov.sg/react-design-system/v4/css/main.css"
+/>
+<link
+    rel="stylesheet"
+    type="text/css"
+    href="https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css"
+/>
+```
+
+Or if you are importing to an existing CSS file:
+
+```css
+@import url("https://assets.life.gov.sg/react-design-system/v4/css/main.css");
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
+```
+
+Replace `open-sans` with the font for your theme:
+
+| Theme                                    | Font CSS                           |
+| ---------------------------------------- | ---------------------------------- |
+| lifesg, ccube, mylegacy, oneservice, rbs | `open-sans`                        |
+| bookingsg, careercompass, smgs           | `plus-jakarta-sans`                |
+| spf, vica, websg, wise, wogaa            | `public-sans`                      |
+| sgw-digital-lobby, supportgowhere        | `libre-franklin`                   |
+| pa                                       | `lato`                             |
+| imda                                     | `montserrat`                       |
+| tote-board                               | `inter`                            |
+| a11y-playground                          | `atkinson-hyperlegible-next`       |
+| sportsg-orange                           | `apfel-grotezk` + `hanken-grotesk` |
+
+---
+
+## Step 3 — Theme stylesheet
+
+In your application's CSS entrypoint, import the theme stylesheet:
+
+```css
+@import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```
+
+> CSS `@import` from `node_modules` requires your framework or build tool to support it. Vite and Next.js resolve this automatically; other build tools may need a CSS resolver configured.
+
+Or in your application's JavaScript entrypoint, import the theme stylesheet:
+
+```tsx
+import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```
+
+Replace `lifesg` with your chosen theme slug: `a11y-playground` · `bookingsg` · `careercompass` · `ccube` · `imda` · `lifesg` · `mylegacy` · `oneservice` · `pa` · `rbs` · `sgw-digital-lobby` · `smgs` · `spf` · `sportsg-orange` · `supportgowhere` · `tote-board` · `vica` · `websg` · `wise` · `wogaa`
+
+---
+
+## Step 4 — ThemeProvider
+
+Wrap your app root in `ThemeProvider`. The `theme` prop is a string matching the slug used in Step 3.
+
+```tsx
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+
+const App = () => {
+    return (
+        <ThemeProvider theme="lifesg">
+            <Component />
+        </ThemeProvider>
+    );
+};
+```
+
+**Dark/light mode:** `mode` prop defaults to `"auto"` (OS preference).
+
+```tsx
+<ThemeProvider theme="lifesg" mode="light">  {/* force light */}
+<ThemeProvider theme="lifesg" mode="dark">   {/* force dark */}
+```
+
+---
+
+## Vite
+
+No special configuration needed for the design system. Standard React setup:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+    plugins: [react()],
+});
+```
+
+---
+
+## Next.js App Router
+
+No special `next.config.js` is needed. Suggested configuration below.
+
+### CSS
+
+Create a global CSS file with all three imports — CDN stylesheets and theme:
+
+```css
+/* global.css */
+@import url("https://assets.life.gov.sg/react-design-system/v4/css/main.css");
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
+@import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```
+
+Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
+
+```css
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.theme-provider {
+    display: flex;
+    flex-direction: column;
+}
+```
+
+### ThemeProvider
+
+`ThemeProvider` is a client component, so create a wrapper:
+
+```tsx
+// src/app/providers.tsx
+"use client";
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <ThemeProvider theme="lifesg" className="theme-provider">
+            {children}
+        </ThemeProvider>
+    );
+}
+```
+
+### Root layout
+
+Import the global CSS and the providers wrapper in `layout.tsx`:
+
+```tsx
+// src/app/layout.tsx
+import "./global.css";
+import Providers from "./providers";
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body>
+                <Providers>{children}</Providers>
+            </body>
+        </html>
+    );
+}
+```
+
+---
+
+## Verification checklist
+
+-   [ ] `@lifesg/react-design-system`, `@lifesg/react-icons`, `@floating-ui/react` installed
+-   [ ] `styled-components` NOT installed
+-   [ ] `main.css` and font CDN links imported in HTML doc or CSS file
+-   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in entrypoint or CSS file
+-   [ ] `ThemeProvider` wraps app root with correct theme string
diff --git a/skills/fds-build/resources/templates/form.md b/skills/fds-build/resources/templates/form.md
new file mode 100644
index 0000000000..b5479900c4
--- /dev/null
+++ b/skills/fds-build/resources/templates/form.md
@@ -0,0 +1,427 @@
+# Form Template
+
+Single or multi-step form page.
+
+## When to use
+
+-   Collecting user input across one or more steps
+-   Profile, settings, or data-entry pages
+
+---
+
+## Page anatomy
+
+```
+Navbar
+──────────────────────────────────────────────────────────
+<main>
+└─ pageWrapper (padding: spacing-32 0; lg: spacing-64)
+   └─ Layout.Container type="grid"
+      ├─ Layout.ColDiv xxsCols={[1, -1]}
+      │  └─ ProgressIndicator (multi-step only)
+      └─ Layout.ColDiv xxsCols={12} lgCols={8}
+         │  flex column · gap: spacing-32
+         ├─ pageHeadingBlock (flex column · gap: 16)
+         │  ├─ h1
+         │  └─ p (optional)
+         ├─ div (form content)
+         │  └─ Form fields (built-in margin-bottom: 32)
+         │     Non-form components → margin-bottom: 32
+         └─ FormNav
+──────────────────────────────────────────────────────────
+Footer
+```
+
+---
+
+## Rules
+
+|                          | Wrong                | Correct                                                                                                                                                                                  |
+| ------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Content column width     | `lgCols={12}`        | `xxsCols={12} lgCols={8}`                                                                                                                                                                |
+| Progress indicator       | Inside 8-col div     | Separate `lgCols={12}` ColDiv                                                                                                                                                            |
+| Page heading             | Static string        | Defaults to `{STEPS[step]}`; override per step as needed                                                                                                                                 |
+| Field spacing            | `gap` on wrapper div | Rely on component built-in `margin-bottom: 32`; add `margin-bottom: var(--fds-spacing-32)` via CSS Module class for components without it (BoxContainer, Toggle, FileUpload, ESignature) |
+| Constrained-width inputs | `width` on element   | `max-width` — works alongside internal `width: 100%`                                                                                                                                     |
+| Review step              | Omitting             | Required as last step — one `BoxContainer` per preceding step                                                                                                                            |
+
+> **Setup:** If the project is not yet set up, read `../setup/setup.md` first before writing any code here.
+
+---
+
+## FormNav
+
+```tsx
+// FormNav.tsx
+import { useRef, useLayoutEffect } from "react";
+import { Button } from "@lifesg/react-design-system/button";
+import styles from "./FormNav.module.css";
+
+interface FormNavProps {
+    onBack?: () => void;
+    onNext: () => void;
+    nextLabel?: string;
+    isSubmitting?: boolean;
+    actions?: React.ReactNode;
+}
+
+export default function FormNav({
+    onBack,
+    onNext,
+    nextLabel = "Next",
+    isSubmitting = false,
+    actions,
+}: FormNavProps) {
+    const navRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (!navRef.current) return;
+        const buttons = Array.from(
+            navRef.current.querySelectorAll<HTMLElement>("button")
+        );
+        buttons.forEach((b) => {
+            b.style.width = "";
+        });
+        if (!window.matchMedia("(min-width: 769px)").matches) return;
+        const widest = Math.max(...buttons.map((b) => b.offsetWidth));
+        buttons.forEach((b) => {
+            b.style.width = `${widest}px`;
+        });
+    });
+
+    return (
+        <div ref={navRef} className={styles.nav}>
+            <div className={styles.primaryGroup}>
+                <Button
+                    styleType="default"
+                    onClick={onNext}
+                    loading={isSubmitting}
+                    disabled={isSubmitting}
+                    className={styles.nextButton}
+                >
+                    {nextLabel}
+                </Button>
+                {actions && (
+                    <div className={styles.actionsGroup}>{actions}</div>
+                )}
+            </div>
+            {onBack && (
+                <Button
+                    styleType="secondary"
+                    onClick={onBack}
+                    className={styles.backButton}
+                >
+                    Back
+                </Button>
+            )}
+        </div>
+    );
+}
+```
+
+```css
+/* FormNav.module.css */
+.nav {
+    margin-top: var(--fds-spacing-32);
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-24);
+
+    :global(body.fds-breakpoint-lg-min) & {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0;
+    }
+}
+
+.primaryGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+
+    :global(body.fds-breakpoint-lg-min) & {
+        flex-direction: row;
+        gap: var(--fds-spacing-16);
+        order: 2;
+        margin-left: auto;
+    }
+}
+
+.nextButton {
+    box-sizing: border-box;
+    width: 100%;
+
+    :global(body.fds-breakpoint-lg-min) & {
+        width: auto;
+        min-width: 10rem;
+        order: 1;
+    }
+}
+
+.actionsGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+
+    & > button {
+        box-sizing: border-box;
+        width: 100%;
+    }
+
+    :global(body.fds-breakpoint-lg-min) & {
+        flex-direction: row;
+        gap: var(--fds-spacing-16);
+        & > button {
+            width: auto;
+            min-width: 10rem;
+        }
+    }
+}
+
+.backButton {
+    box-sizing: border-box;
+    width: 100%;
+
+    :global(body.fds-breakpoint-lg-min) & {
+        width: auto;
+        min-width: 10rem;
+        order: 1;
+    }
+}
+```
+
+---
+
+## Review step
+
+```tsx
+import { BoxContainer } from "@lifesg/react-design-system/box-container";
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import styles from "./FormPage.module.css";
+
+{
+    step === STEPS.length - 1 && (
+        <BoxContainer
+            title="Step one"
+            collapsible
+            expanded
+            className={styles.boxContainer}
+        >
+            <div className={styles.summaryPadding}>
+                <UneditableSection
+                    fullWidth
+                    background={false}
+                    items={[
+                        {
+                            label: "Short field",
+                            value: valueA || "—",
+                            displayWidth: "half",
+                        },
+                        {
+                            label: "Short field",
+                            value: valueB || "—",
+                            displayWidth: "half",
+                        },
+                        { label: "Long field", value: longValue || "—" },
+                    ]}
+                />
+            </div>
+        </BoxContainer>
+    );
+}
+```
+
+```css
+/* in FormPage.module.css */
+.boxContainer {
+    margin-bottom: var(--fds-spacing-32);
+}
+
+.summaryPadding {
+    padding: var(--fds-spacing-20);
+
+    :global(body.fds-breakpoint-md-min) & {
+        padding: var(--fds-spacing-32);
+    }
+}
+```
+
+---
+
+## Complete template
+
+```tsx
+// FormPage.tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Alert } from "@lifesg/react-design-system/alert";
+import FormNav from "./FormNav";
+import styles from "./FormPage.module.css";
+
+const STEPS = ["Step one", "Step two", "Review"];
+
+const CATEGORY_OPTIONS = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+];
+
+export default function FormPage() {
+    const [step, setStep] = useState(0);
+    const isLastStep = step === STEPS.length - 1;
+
+    const [name, setName] = useState("");
+    const [category, setCategory] = useState("");
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState<string | null>(null);
+
+    function validateStep(s: number): Record<string, string> {
+        const e: Record<string, string> = {};
+        if (s === 0) {
+            if (!name.trim()) e.name = "Enter your full name";
+            if (!category) e.category = "Select a category";
+        }
+        return e;
+    }
+
+    function handleNext() {
+        const stepErrors = validateStep(step);
+        setErrors(stepErrors);
+        if (Object.keys(stepErrors).length > 0) return;
+        if (!isLastStep) setStep((s) => s + 1);
+        else handleSubmit();
+    }
+
+    async function handleSubmit() {
+        setIsSubmitting(true);
+        setSubmitError(null);
+        try {
+            // FIXME: replace with actual API call, e.g.:
+            // await apiClient.post("/api/v1/submissions", { name, category });
+            console.log("submitted", { name, category });
+        } catch (err: unknown) {
+            setSubmitError(
+                err instanceof Error
+                    ? err.message
+                    : "Submission failed. Please try again."
+            );
+        } finally {
+            setIsSubmitting(false);
+        }
+    }
+
+    return (
+        <>
+            <Layout.ColDiv
+                xsCols={12}
+                lgCols={12}
+                className={styles.progressColDiv}
+            >
+                <ProgressIndicator
+                    steps={STEPS}
+                    currentIndex={step}
+                    displayExtractor={(s) => s}
+                />
+            </Layout.ColDiv>
+
+            <Layout.ColDiv
+                xsCols={12}
+                lgCols={9}
+                xlCols={8}
+                className={styles.formColDiv}
+            >
+                <div className={styles.pageHeadingBlock}>
+                    <h1 className={styles.pageTitle}>{STEPS[step]}</h1>
+                    {/* <p className={styles.pageDescription}>Optional description</p> */}
+                </div>
+
+                {submitError && <Alert type="error">{submitError}</Alert>}
+
+                <div>
+                    {step === 0 && (
+                        <>
+                            <Form.Input
+                                label="Full name"
+                                value={name}
+                                errorMessage={errors.name}
+                                onChange={(e) => {
+                                    setName(e.target.value);
+                                    if (errors.name)
+                                        setErrors((prev) => ({
+                                            ...prev,
+                                            name: "",
+                                        }));
+                                }}
+                            />
+                            <Form.Select
+                                label="Category"
+                                options={CATEGORY_OPTIONS}
+                                selectedOption={CATEGORY_OPTIONS.find(
+                                    (o) => o.value === category
+                                )}
+                                listExtractor={(o) => o.label}
+                                displayValueExtractor={(o) => o.label}
+                                valueExtractor={(o) => o.value}
+                                onSelectOption={(opt) => {
+                                    setCategory(opt.value);
+                                    if (errors.category)
+                                        setErrors((prev) => ({
+                                            ...prev,
+                                            category: "",
+                                        }));
+                                }}
+                                errorMessage={errors.category}
+                            />
+                        </>
+                    )}
+                    {step === 1 && <>{/* step 2 fields */}</>}
+                </div>
+
+                <FormNav
+                    onBack={step > 0 ? () => setStep((s) => s - 1) : undefined}
+                    onNext={handleNext}
+                    nextLabel={isLastStep ? "Submit" : "Next"}
+                    isSubmitting={isSubmitting}
+                />
+            </Layout.ColDiv>
+        </>
+    );
+}
+```
+
+```css
+/* FormPage.module.css */
+.progressColDiv {
+    margin-bottom: var(--fds-spacing-32);
+}
+
+.formColDiv {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-32);
+}
+
+.pageHeadingBlock {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+}
+
+.pageTitle {
+    margin: 0;
+}
+
+.pageDescription {
+    margin: 0;
+}
+```
+
+---
+
+## Notes
+
+-   Single-step: omit `ProgressIndicator` and pass no `onBack` to `FormNav`
+-   Pass `actions` to `FormNav` for secondary actions like Save draft
diff --git a/skills/fds-build/resources/templates/listing.md b/skills/fds-build/resources/templates/listing.md
new file mode 100644
index 0000000000..06e082c1dd
--- /dev/null
+++ b/skills/fds-build/resources/templates/listing.md
@@ -0,0 +1,435 @@
+# Listing Template
+
+Pages whose primary goal is finding, scanning, or filtering a collection of records.
+
+## When to use
+
+-   Search results, service directories, record indexes
+-   Transaction histories, application lists
+-   Any screen presenting multiple instances of the same entity type
+
+Do not use for:
+
+-   A single record's detail → use `detail.md`
+-   A mixed overview with stats and no primary table → use `dashboard.md`
+
+---
+
+## Page anatomy
+
+```
+Navbar
+──────────────────────────────────────────────────────────
+<main>
+└─ pageWrapper (padding: spacing-32 0; lg: spacing-48)
+└─ Layout.Container type="grid"
+    └─ Layout.ColDiv xxsCols={[1, -1]}
+    ├─ searchRow (optional)
+    └─ twoColumn
+        ├─ filterSidebar (278px) — omit for search-only variant
+        ├─ Filter
+        └─ resultsArea (flex 1)
+            ├─ resultCountRow
+            ├─ ErrorDisplay type="no-item-found" ← empty state
+            ├─ Card list / DataTable
+            └─ paginationWrapper (centred)
+──────────────────────────────────────────────────────────
+Footer
+```
+
+On mobile the `Filter` sidebar automatically collapses into a button that opens a modal.
+
+---
+
+## Required components
+
+| Slot           | Component                                 | Required |
+| -------------- | ----------------------------------------- | -------- |
+| Navigation     | `Navbar` (masthead enabled)               | Yes      |
+| Results        | `Card` list/grid **or** `DataTable`       | Yes      |
+| Result count   | `Typography.BodyMD` — "X result(s) found" | Yes      |
+| Footer         | `Footer`                                  | Yes      |
+| Search bar     | `Form.Input` + `Button`                   | No\*     |
+| Filter sidebar | `Filter` (~278px wide)                    | No\*     |
+| Pagination     | `Pagination showFirstAndLastNav`          | No       |
+
+\* Search bar and filter sidebar are individually optional but **at least one must be present**.
+
+---
+
+## CSS (ListingPage.module.css)
+
+```css
+.pageWrapper {
+    padding: var(--fds-spacing-32) 0;
+
+    :global(body.fds-breakpoint-lg-min) & {
+        padding: var(--fds-spacing-48) 0;
+    }
+}
+
+.twoColumn {
+    display: flex;
+    gap: var(--fds-spacing-32);
+    align-items: flex-start;
+}
+
+.filterSidebar {
+    width: 278px;
+    flex-shrink: 0;
+}
+
+.resultsArea {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+}
+
+.searchRow {
+    display: flex;
+    gap: var(--fds-spacing-16);
+    align-items: flex-end;
+    margin-bottom: var(--fds-spacing-24);
+}
+
+.resultCountRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cardBody {
+    padding: var(--fds-spacing-24);
+}
+
+.paginationWrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--fds-spacing-24);
+}
+```
+
+---
+
+## Rules
+
+-   Always show result count even when no filters are active — format: "X result(s) found"
+-   Always show `ErrorDisplay type="no-item-found"` with contextual copy when results are empty — never an empty container
+-   `Pagination` or lazy load — never both on the same list
+-   `showFirstAndLastNav` must be set on `Pagination`
+-   Filter sidebar width is fixed at ~278px; results area is `flex: 1`
+-   Inline action buttons (edit, delete) do not belong on listing cards — those go on the detail screen
+-   Changing `keyword`, `filters`, or `sortBy` must reset `page` to `1`
+
+---
+
+## Complete template
+
+A single-file listing page with search, side filters, pagination, loading/error/empty states, and API stub wired in. Remove `filterSidebar` / `twoColumn` for search-only variant.
+
+```tsx
+// ListingPage.tsx
+import { useState, useEffect, useMemo } from "react";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Card } from "@lifesg/react-design-system/card";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Button } from "@lifesg/react-design-system/button";
+import { Form } from "@lifesg/react-design-system/form";
+import styles from "./ListingPage.module.css";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface Item {
+    id: string;
+    title: string;
+    description: string;
+    category: string;
+}
+
+interface ListingState {
+    keyword: string;
+    filters: Record<string, string[]>;
+    sortBy: string;
+    page: number;
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 10;
+
+const SORT_OPTIONS = [
+    { label: "Relevance", value: "relevance" },
+    { label: "Newest first", value: "newest" },
+];
+
+const CATEGORY_OPTIONS = [
+    { label: "Category A", value: "a" },
+    { label: "Category B", value: "b" },
+];
+
+// FIXME: replace with real seed data or remove once API is wired up
+const MOCK_ITEMS: Item[] = [];
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function matchesKeyword(item: Item, keyword: string): boolean {
+    if (!keyword.trim()) return true;
+    const q = keyword.toLowerCase();
+    return (
+        item.title.toLowerCase().includes(q) ||
+        item.description.toLowerCase().includes(q)
+    );
+}
+
+function matchesFilters(
+    item: Item,
+    filters: Record<string, string[]>
+): boolean {
+    const cats = filters.category;
+    if (!cats || cats.length === 0) return true;
+    return cats.includes(item.category);
+}
+
+function sortItems(items: Item[], sortBy: string): Item[] {
+    if (sortBy === "newest") return [...items].reverse();
+    return items;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function ListingPage() {
+    const [allItems, setAllItems] = useState<Item[]>(MOCK_ITEMS);
+    const [isLoading, setIsLoading] = useState(true);
+    const [fetchError, setFetchError] = useState<string | null>(null);
+
+    const [state, setState] = useState<ListingState>({
+        keyword: "",
+        filters: {},
+        sortBy: "relevance",
+        page: 1,
+    });
+
+    useEffect(() => {
+        setIsLoading(true);
+        setFetchError(null);
+        // FIXME: replace with actual API client and URL to fetch data, e.g.:
+        // apiClient
+        //   .get<Item[]>("/api/v1/items")
+        //   .then(({ data }) => setAllItems(data))
+        //   .catch((err) => setFetchError(err.message))
+        //   .finally(() => setIsLoading(false));
+        setAllItems(MOCK_ITEMS);
+        setIsLoading(false);
+    }, []);
+
+    const results = useMemo(() => {
+        let rows = allItems.filter(
+            (r) =>
+                matchesKeyword(r, state.keyword) &&
+                matchesFilters(r, state.filters)
+        );
+        return sortItems(rows, state.sortBy);
+    }, [allItems, state.keyword, state.filters, state.sortBy]);
+
+    const pageCount = Math.ceil(results.length / PAGE_SIZE);
+    const pageRows = results.slice(
+        (state.page - 1) * PAGE_SIZE,
+        state.page * PAGE_SIZE
+    );
+
+    function handleClear() {
+        setState((s) => ({ ...s, filters: {}, page: 1 }));
+    }
+
+    return (
+        <>
+            <Navbar masthead items={{ desktop: [] }} />
+            <main style={{ flex: 1 }}>
+                <div className={styles.pageWrapper}>
+                    <Layout.Container type="grid">
+                        <Layout.ColDiv xsCols={8} lgCols={12}>
+                            {/* Search bar */}
+                            <div className={styles.searchRow}>
+                                <Form.Input
+                                    label="Search"
+                                    placeholder="Search by keyword"
+                                    value={state.keyword}
+                                    onChange={(e) =>
+                                        setState((s) => ({
+                                            ...s,
+                                            keyword: e.target.value,
+                                            page: 1,
+                                        }))
+                                    }
+                                />
+                                <Button
+                                    onClick={() =>
+                                        setState((s) => ({ ...s, page: 1 }))
+                                    }
+                                >
+                                    Search
+                                </Button>
+                            </div>
+
+                            {/* Loading */}
+                            {isLoading && (
+                                <Typography.BodyMD>
+                                    Loading...
+                                </Typography.BodyMD>
+                            )}
+
+                            {/* Fetch error */}
+                            {!isLoading && fetchError && (
+                                <Alert
+                                    type="error"
+                                    actionLink={{
+                                        children: "Try again",
+                                        onClick: () => window.location.reload(),
+                                    }}
+                                >
+                                    {fetchError}
+                                </Alert>
+                            )}
+
+                            {/* Results */}
+                            {!isLoading && !fetchError && (
+                                <div className={styles.twoColumn}>
+                                    {/* Filter sidebar — omit for search-only variant */}
+                                    <div className={styles.filterSidebar}>
+                                        <Filter onClear={handleClear}>
+                                            <Filter.Item
+                                                title="Sort by"
+                                                collapsible={false}
+                                            >
+                                                {SORT_OPTIONS.map((opt) => (
+                                                    <RadioButton
+                                                        key={opt.value}
+                                                        checked={
+                                                            state.sortBy ===
+                                                            opt.value
+                                                        }
+                                                        onChange={() =>
+                                                            setState((s) => ({
+                                                                ...s,
+                                                                sortBy: opt.value,
+                                                                page: 1,
+                                                            }))
+                                                        }
+                                                    >
+                                                        {opt.label}
+                                                    </RadioButton>
+                                                ))}
+                                            </Filter.Item>
+                                            <Filter.Checkbox
+                                                title="Category"
+                                                options={CATEGORY_OPTIONS}
+                                                selected={
+                                                    state.filters.category ?? []
+                                                }
+                                                onChange={(values) =>
+                                                    setState((s) => ({
+                                                        ...s,
+                                                        page: 1,
+                                                        filters: {
+                                                            ...s.filters,
+                                                            category: values,
+                                                        },
+                                                    }))
+                                                }
+                                            />
+                                        </Filter>
+                                    </div>
+
+                                    <div className={styles.resultsArea}>
+                                        {/* Result count */}
+                                        <div className={styles.resultCountRow}>
+                                            <Typography.BodyMD>
+                                                {results.length} result
+                                                {results.length !== 1
+                                                    ? "s"
+                                                    : ""} found
+                                            </Typography.BodyMD>
+                                        </div>
+
+                                        {/* Empty state */}
+                                        {results.length === 0 && (
+                                            <ErrorDisplay
+                                                type="no-item-found"
+                                                title="No results found"
+                                                description="Try adjusting your search or filters."
+                                                actionButton={{
+                                                    children: "Clear filters",
+                                                    onClick: handleClear,
+                                                }}
+                                            />
+                                        )}
+
+                                        {/* Card list */}
+                                        {pageRows.map((item) => (
+                                            <Card key={item.id}>
+                                                <div
+                                                    className={styles.cardBody}
+                                                >
+                                                    <Typography.HeadingSM>
+                                                        {item.title}
+                                                    </Typography.HeadingSM>
+                                                    <Typography.BodyMD>
+                                                        {item.description}
+                                                    </Typography.BodyMD>
+                                                </div>
+                                            </Card>
+                                        ))}
+
+                                        {/* Pagination */}
+                                        {pageCount > 1 && (
+                                            <div
+                                                className={
+                                                    styles.paginationWrapper
+                                                }
+                                            >
+                                                <Pagination
+                                                    totalItems={results.length}
+                                                    pageSize={PAGE_SIZE}
+                                                    activePage={state.page}
+                                                    onPageChange={(page) =>
+                                                        setState((s) => ({
+                                                            ...s,
+                                                            page,
+                                                        }))
+                                                    }
+                                                    showFirstAndLastNav
+                                                />
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+                        </Layout.ColDiv>
+                    </Layout.Container>
+                </div>
+            </main>
+            <Footer />
+        </>
+    );
+}
+```
+
+---
+
+## Anti-patterns
+
+-   Do not omit the result count
+-   Do not show an empty results area with no state message
+-   Do not use `DataTable` for citizen-facing records
+-   Do not use pagination AND lazy loading together
+-   Do not leave stale `page` values pointing past the end of a newly-filtered result set
+-   Do not split filtering and sorting into separate `useEffect` calls — derive from a single `useMemo`
diff --git a/stories/getting-started/installation.mdx b/stories/getting-started/installation.mdx
index bf0a32077a..3d96601f0e 100644
--- a/stories/getting-started/installation.mdx
+++ b/stories/getting-started/installation.mdx
@@ -41,3 +41,13 @@ The following peer dependencies should be installed:
 ```
 
 <Installation />
+
+## AI agent skill
+
+Give your AI coding assistant (Claude Code, Cursor, GitHub Copilot, Codex, and others) accurate knowledge of FDS components, import patterns, and usage rules.
+
+```bash
+npx skills add lifesg/react-design-system
+```
+
+Re-run after upgrading `@lifesg/react-design-system` to keep the skill in sync.
diff --git a/tests/scripts/generate-skill-props.spec.ts b/tests/scripts/generate-skill-props.spec.ts
new file mode 100644
index 0000000000..740dd1496a
--- /dev/null
+++ b/tests/scripts/generate-skill-props.spec.ts
@@ -0,0 +1,132 @@
+import {
+    insertPropsSection,
+    stripPropsSection,
+} from "scripts/generate-skill-props";
+
+const PROPS_BLOCK = `## Props — \`FooProps\`
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| \`name\` | \`string\` | — | — |`;
+
+const BASE_WITH_RULES = `# Foo
+
+Some intro.
+
+## Rules
+
+- Rule one.`;
+
+const BASE_WITH_ANTIPATTERNS = `# Foo
+
+Some intro.
+
+## Anti-patterns
+
+- Do not do this.`;
+
+const BASE_NO_SECTIONS = `# Foo
+
+Some intro.`;
+
+// =============================================================================
+// stripPropsSection
+// =============================================================================
+
+describe("stripPropsSection", () => {
+    it("removes a single ## Props section", () => {
+        const input = `# Foo\n\n${PROPS_BLOCK}\n\n## Rules\n\n- Rule one.`;
+        const result = stripPropsSection(input);
+        expect(result).not.toContain("## Props");
+        expect(result).toContain("## Rules");
+    });
+
+    it("removes multiple ## Props sections", () => {
+        const block2 = `## Props — \`BarProps\`\n\n| Prop | Type |\n| ---- | ---- |\n| \`id\` | \`string\` |`;
+        const input = `# Foo\n\n${PROPS_BLOCK}\n\n${block2}\n\n## Rules\n\n- Rule one.`;
+        const result = stripPropsSection(input);
+        expect(result).not.toContain("## Props");
+        expect(result).toContain("## Rules");
+    });
+
+    it("is a no-op when no ## Props section is present", () => {
+        const result = stripPropsSection(BASE_WITH_RULES);
+        expect(result).toContain("## Rules");
+        expect(result).not.toContain("## Props");
+    });
+
+    it("collapses excess blank lines left by removal", () => {
+        const input = `# Foo\n\n\n\n${PROPS_BLOCK}\n\n\n\n## Rules\n\n- Rule one.`;
+        const result = stripPropsSection(input);
+        expect(result).not.toMatch(/\n{3,}/);
+    });
+});
+
+// =============================================================================
+// insertPropsSection
+// =============================================================================
+
+describe("insertPropsSection", () => {
+    it("inserts before ## Rules when present", () => {
+        const result = insertPropsSection(BASE_WITH_RULES, PROPS_BLOCK);
+        const propsIdx = result.indexOf("## Props");
+        const rulesIdx = result.indexOf("## Rules");
+        expect(propsIdx).toBeGreaterThan(-1);
+        expect(propsIdx).toBeLessThan(rulesIdx);
+    });
+
+    it("inserts before ## Anti-patterns when ## Rules is absent", () => {
+        const result = insertPropsSection(BASE_WITH_ANTIPATTERNS, PROPS_BLOCK);
+        const propsIdx = result.indexOf("## Props");
+        const apIdx = result.indexOf("## Anti-patterns");
+        expect(propsIdx).toBeGreaterThan(-1);
+        expect(propsIdx).toBeLessThan(apIdx);
+    });
+
+    it("appends at end when neither ## Rules nor ## Anti-patterns is present", () => {
+        const result = insertPropsSection(BASE_NO_SECTIONS, PROPS_BLOCK);
+        expect(result.trimEnd().endsWith(PROPS_BLOCK.trimEnd())).toBe(true);
+    });
+
+    it("strips an existing ## Props section before inserting", () => {
+        const withExisting = `# Foo\n\n## Props — \`OldProps\`\n\n| Prop | Type |\n| ---- | ---- |\n\n## Rules\n\n- Rule one.`;
+        const result = insertPropsSection(withExisting, PROPS_BLOCK);
+        expect(result).not.toContain("OldProps");
+        expect(result).toContain("FooProps");
+    });
+});
+
+// =============================================================================
+// idempotency
+// =============================================================================
+
+describe("idempotency", () => {
+    it("produces identical output when run twice on a file with ## Rules", () => {
+        const firstRun = insertPropsSection(BASE_WITH_RULES, PROPS_BLOCK);
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+
+    it("produces identical output when run twice on a file with ## Anti-patterns", () => {
+        const firstRun = insertPropsSection(
+            BASE_WITH_ANTIPATTERNS,
+            PROPS_BLOCK
+        );
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+
+    it("produces identical output when run twice on a file with no sections", () => {
+        const firstRun = insertPropsSection(BASE_NO_SECTIONS, PROPS_BLOCK);
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+
+    it("produces identical output when run twice on a file with multiple existing Props sections", () => {
+        const block2 = `## Props — \`BarProps\`\n\n| Prop | Type |\n| ---- | ---- |\n| \`id\` | \`string\` |`;
+        const multiProps = `# Foo\n\n${PROPS_BLOCK}\n\n${block2}\n\n## Rules\n\n- Rule one.`;
+        const firstRun = insertPropsSection(multiProps, PROPS_BLOCK);
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+});
diff --git a/tools/shared/prop-extractor.ts b/tools/shared/prop-extractor.ts
new file mode 100644
index 0000000000..335d5c01e1
--- /dev/null
+++ b/tools/shared/prop-extractor.ts
@@ -0,0 +1,124 @@
+import {
+    type InterfaceDeclaration,
+    Node,
+    type TypeAliasDeclaration,
+} from "ts-morph";
+
+import { JsDocParser } from "./jsdoc-parser";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type PropEntry = {
+    name: string;
+    type: string;
+    required: boolean;
+    defaultVal: string;
+    description: string;
+};
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const SKIP_PROP_NAMES = new Set([
+    "data-testid",
+    "data-error-testid",
+    "ref",
+    "key",
+]);
+
+function isFromReactOrHtmlBase(filePath: string): boolean {
+    return (
+        filePath.includes("node_modules/typescript") ||
+        filePath.includes("node_modules/@types/react") ||
+        filePath.includes("node_modules/@types/react-dom")
+    );
+}
+
+function formatType(raw: string): string {
+    return (
+        raw
+            // Remove trailing | undefined (optional marker)
+            .replace(/\s*\|\s*undefined/g, "")
+            // Collapse excessive whitespace
+            .replace(/\s+/g, " ")
+            .trim()
+    );
+}
+
+// =============================================================================
+// PropExtractor
+// =============================================================================
+
+/**
+ * Extracts a flat list of prop entries from a TypeScript interface or type alias.
+ *
+ * Handles Omit<>, intersections, extends chains, and union members via ts-morph's
+ * fully-resolved type system. Filters out HTML/React base props and internal
+ * symbols. Uses JsDocParser for description and @default extraction.
+ */
+export class PropExtractor {
+    private readonly parser = new JsDocParser();
+
+    public collectProps(
+        node: InterfaceDeclaration | TypeAliasDeclaration
+    ): PropEntry[] {
+        const result: PropEntry[] = [];
+
+        for (const sym of node.getType().getProperties()) {
+            const name = sym.getName();
+            if (SKIP_PROP_NAMES.has(name)) continue;
+            if (name.startsWith("__")) continue;
+
+            const decls = sym.getDeclarations();
+            const propDecl =
+                decls.find(Node.isPropertySignature) ??
+                decls.find(Node.isMethodSignature) ??
+                decls[0];
+
+            if (!propDecl) continue;
+
+            const declPath = propDecl.getSourceFile().getFilePath();
+            if (isFromReactOrHtmlBase(declPath)) continue;
+
+            let type = "unknown";
+            if (Node.isPropertySignature(propDecl)) {
+                const typeNode = propDecl.getTypeNode();
+                type = formatType(
+                    typeNode
+                        ? typeNode.getText()
+                        : propDecl.getType().getText(propDecl)
+                );
+            } else {
+                type = formatType(sym.getTypeAtLocation(node).getText());
+            }
+
+            const required = Node.isPropertySignature(propDecl)
+                ? !propDecl.hasQuestionToken()
+                : false;
+
+            let description = "";
+            let defaultVal = "";
+
+            if (Node.isPropertySignature(propDecl)) {
+                description =
+                    this.parser.getDescriptionFromNode(propDecl, {
+                        normalizeNewlinesToSpaces: true,
+                    }) ?? "";
+
+                for (const tag of this.parser.getTags(propDecl)) {
+                    if (tag.getTagName() === "default") {
+                        const comment = this.parser.getTagCommentText(tag);
+                        if (comment && !defaultVal) defaultVal = comment;
+                    }
+                }
+            }
+
+            result.push({ name, type, required, defaultVal, description });
+        }
+
+        return result;
+    }
+}