changi-dls-cli

Copy Changi DLS UI primitives into your app (same idea as shadcn: you own the source files).

Maintainer workflow

From the changi-dls monorepo root:

npm run registry:build

This reads registry/manifest.json, generates .cursor/skills/changi-design-language-system/components/list.json (and the same file under .claude/skills/changi-design-language-system/), syncs SKILL.md and agents/guide.md between those skill folders, and writes bundled JSON under packages/dls-cli/registry/ (gitignored; recreated before npm publish via prepublishOnly).

To add or remove installable components, edit registry/manifest.json and re-run registry:build.

Local try

npm run registry:build
node packages/dls-cli/bin/changi-dls.mjs list
node packages/dls-cli/bin/changi-dls.mjs add button --cwd /path/to/target-app

Publish

npm run registry:build
npm publish -w changi-dls-cli

(publishConfig in this package sets access: "public" — the name is unscoped, so npm only accepts a public publish.)

Consumer prerequisites

• Path alias: tsconfig.json should map @/* to the project root, because components import @/lib/utils and @/components/....

• Tailwind v4 (PostCSS): The token file uses @import "tailwindcss" and @theme. Install:

  npm install tailwindcss @tailwindcss/postcss postcss

  Root postcss.config.mjs:

  const config = { plugins: { "@tailwindcss/postcss": {} } };
  export default config;

• Design tokens + Lato: Every component that depends on utils (including button) installs components/changi-dls-lato-fontfaces.css (inlined @font-face woff2 from fonts.gstatic.com), components/changi-dls-design-tokens.css, lib/utils.ts, plus .cursor/skills/changi-design-language-system/ (SKILL.md — the Cursor skill entry — agents/guide.md, components/list.json). The CLI mirrors those three files under .claude/skills/changi-design-language-system/ so Claude Code gets the same layout. utils.ts imports the font file first, then tokens — no npm install for fonts and no next/font in layout. You do not need to wire CSS in layout.tsx unless a page never imports @/lib/utils or a DLS component.

• Optional foundations: Same shipped files as utils (Lato faces + tokens + lib/utils.ts + the skill folders above), for teams that want an explicit “install tokens first” step. Not required if you already ran add button (or any component that pulls in utils).

• Upgrading: If you have an older lib/utils.ts or token file, run npx changi-dls add <component> --force (or add foundations --force) to refresh them.

Commands

| Command | Description | |--------|-------------| | changi-dls list | Lists component ids and dependencies | | changi-dls add foundations | Copies Lato @font-face CSS, design tokens, and lib/utils.ts — optional if you already use add <component> | | changi-dls add all | Copies every registry component in dependency order. Same keywords: all-components, allcomponents, allcomponent. Omits foundations (same files as utils, which is installed transitively). | | changi-dls add <id> … | Copies files for those components plus their dependencies | | changi-dls add button --force | Overwrites existing files | | changi-dls add checkbox --dry-run | Prints planned paths without writing |

Component ids are kebab-case (e.g. quantity-selector).