Skip to content
Xng UI
Docs CDK Components Tools Contribute About

Workflows

End-to-end playbooks for extending the design system with AI.

Playbooks

New component

add-component-workflow.mdc — scaffold → wire exports → demo → UI builder → document slots.

New CDK entry

add-cdk-workflow.mdc — headless primitive → flat export → /cdk demo.

Foundation docs

add-docs-workflow.mdc — core/types or styles tokens → /docs page.

Tools & agents

add-tools-workflow.mdc — MCP, VS Code, skills, rules, UI builder, theme builder, form builder.

Testing

Vitest + @xngui/testing harnesses — specs next to components; validators first, then form wave.

Add a component

  1. Rule: .cursor/rules/design-system/add-component-workflow.mdc
  2. Skill: xngui-add-component + xngui-add-showcase-demo
  3. Enable @xngui/mcp · run list_components to avoid duplicate entries
  4. Pick mental category (actions, forms, navigation, …)
  5. Scaffold libs/components/<category>/<name>/ trio + ng-package.json
  6. Wire package.json export, tsconfig.base.json path, public index.ts
  7. Add X_DEMO_ENTRIES row, lazy route, demo page under apps/showcase
  8. UI builder: wire ui-builder-node/ + ui-builder-code.ts, or add to UI_BUILDER_UNSUPPORTED_COMPONENT_IDS
  9. Document slots, a11y, and keyboard in the demo description

Add a CDK entry

  1. Rule: .cursor/rules/design-system/add-cdk-workflow.mdc
  2. Skill: xngui-add-cdk + xngui-add-showcase-demo
  3. Read libs/cdk/README.md status board before scaffolding
  4. Source + ng-package.json under libs/cdk/<category>/<entry>/
  5. Flat export in libs/cdk/package.json + tsconfig path
  6. catalog.ts row with group: cdk · route /cdk/<entry>
  7. Showcase page under pages/cdk/<category>/<entry>/

Foundation docs

  1. Rule: .cursor/rules/design-system/add-docs-workflow.mdc
  2. Skill: xngui-add-docs
  3. Core types → libs/core/types/<category>.ts · export from index.ts
  4. Styles tokens → libs/styles primitives/semantic · light + dark
  5. catalog.ts row with group: foundation · route /docs/<slug>
  6. Doc page with XShowcaseDocPageHeader + accordion sections
  7. Update MCP design-tokens.ts when global token catalog changes

Tools & agents

  1. Rule: .cursor/rules/design-system/add-tools-workflow.mdc
  2. Skill: xngui-add-tools
  3. Theme tools → catalog.ts (group: tools) · pages/tools/
  4. Developer tools → vscode-catalog.ts · tools/vscode-extension/
  5. AI tools → ai-catalog.ts · tools/mcp-server/ · .cursor/skills · .cursor/rules
  6. pnpm --filter @xngui/vscode generate:catalog after component ship

Testing

  1. Rule: .cursor/rules/general/component-shipping-gate.mdc (README + harness + spec — same change)
  2. Rule: .cursor/rules/general/component-testing.mdc (specs + co-located harnesses)
  3. Rule: .cursor/rules/general/component-readme.mdc (README gate on add/change)
  4. Runner: Vitest + @analogjs/vitest-angular — libs/components/vitest.config.ts
  5. Helpers: configureXComponent + XHarnessBase from @xngui/testing
  6. Harnesses: <name>.harness.ts next to the component — extends XHarnessBase
  7. Specs: <name>.spec.ts — one it per input, output, and non-trivial logic
  8. Reference: libs/components/actions/ (full) · libs/components/forms/ (partial — see catalog README)
  9. CI: nx affected -t test (see .github/workflows/ci.yml)

Agent tips

Invoke skills xngui-add-component, xngui-add-cdk, xngui-add-docs, xngui-add-tools, and xngui-add-showcase-demo for step-by-step checklists. Pair rules with MCP so the agent reads real READMEs before editing APIs.