microsoft/coreai-design-system

release-package

Prepare or release @coreai-ds/react-components on public npm. Read RELEASING.md first

react-components

CoreAI Sandbox component usage: import boundaries, CoreAI MCP documentation, and local adapter inspection. USE WHEN: editing any `*.tsx` file, picking a component, or writing component imports.

create-pr

Create a pull request for this repo. Use when asked to open/raise/make a PR. Reminds you to update changelogs

features-variants

Definitive guide to the app-local prototype feature/variant system: configuration, `useFeature()`, URL params, and anti-patterns. USE WHEN: editing `apps/prototype/app/features.json`, using `useFeature()` in routes, creating design alternatives, A/B…

component-test

Analyze a requested CoreAI component test scope, add or update focused Vitest Browser Mode regression tests, run them in Playwright Chromium, and report product behavior problems without changing production code. IGNORE and DO NOT use when editing…

coreai-ds-fluentui-react

MANDATORY for @coreai-ds/react-components work. Use the CoreAI documentation MCP to discover components, props, stories, templates, and implementation patterns. If the MCP is unavailable, stop and ask the user to enable or troubleshoot it with you.

coreai-ds-fluentui-react

Use only when editing ./apps/prototype/* with @coreai-ds/react-components; requires the local CoreAI documentation MCP before choosing components, props, templates, or patterns.

prototype-app-coreai-ds-fluentui-react

Use only when editing ./apps/prototype/* with @coreai-ds/react-components; requires the local CoreAI documentation MCP before choosing components, props, templates, or patterns.

icons

Conventions for picking, sizing, and bundling Fluent icons. USE WHEN: adding or changing an icon in a `*.tsx` file, or picking an icon name.

lint

Run the full lint workflow: format, typecheck, CSS lint, JS lint. USE WHEN: the user asks to "lint", "fix lint", "run the linters", "check types", or after making code changes that need verification.

routing

React Router v7 routing conventions for this SPA. USE WHEN: editing `app/routes.ts`, adding/removing a route, or changing navigation.

start-app

Start the CoreAI Sandbox dev server and open it using available browser tools. USE WHEN: the user asks you to "start the app", "run the dev server", "open the app", or "launch CoreAI Sandbox".

state-management

CoreAI Sandbox's simplified TanStack Query + mock-JSON data layer. USE WHEN: editing data-fetching hooks (`app/hooks/use*.ts`), adding mock data in `app/data/`, or wiring a component to query state.

interpreting-html

Map rendered/pasted HTML class names back to source code (CSS Modules, Fluent UI, Griffel). USE WHEN: inspecting Playwright DOM output, debugging styles in the browser, or reverse-engineering pasted HTML.

css-styling

CSS Modules conventions, design tokens, container queries, and CSS-vs-component boundaries. USE WHEN: editing any `*.css` / `*.module.css` file in this repo, or writing styles for a new component.

new-variant

Create a new design variant or alternative for a page using the built-in feature/variant system. USE WHEN: a designer wants to try a different layout, create an "option B" or "version 2", compare designs side by side, add an A/B alternative, or explore an…

prototype-app-css-styling

Use only when editing ./apps/prototype/* for CSS Modules, design tokens, container queries, or CSS-versus-component boundaries.

prototype-app-features-variants

Use only when editing ./apps/prototype/* for feature configuration, useFeature(), variant URL params, design alternatives, or variant switching.

prototype-app-icons

Use only when editing ./apps/prototype/* for choosing, sizing, or bundling Fluent icons.

prototype-app-interpreting-html

Use only when editing ./apps/prototype/* to map rendered or pasted HTML and CSS Module, Fluent UI, or Griffel classes back to source.

prototype-app-lint

Use only when editing ./apps/prototype/* for the canonical formatting, type-checking, CSS lint, and JavaScript lint workflow.

prototype-app-new-variant

Use only when editing ./apps/prototype/* to create a new design variant, alternate layout, option B, or A/B comparison.

prototype-app-react-components

Use only when editing ./apps/prototype/* for TSX, component selection, import boundaries, CoreAI MCP documentation, or local adapters.

prototype-app-routing

Use only when editing ./apps/prototype/* for React Router v7 routes, route configuration, or navigation changes.

prototype-app-start-app

Use only when editing ./apps/prototype/* and needing to start its development server or open the prototype through browser tools.

prototype-app-state-management

Use only when editing ./apps/prototype/* for TanStack Query, mock JSON data, data-fetching hooks, or query state.

create-template

Create a new copy-paste template in the CoreAI Design System Storybook. Use when asked to add a new template, pattern, or page scaffold under Templates/ in Storybook. ALWAYS read apps/storybook/README.md's "Creating a template" section first. IGNORE and DO…

griffel-styling

Author and debug Fluent UI v9 styles built on the Griffel CSS-in-JS engine. Use when writing or fixing makeStyles, makeResetStyles, mergeClasses, shorthands, tokens, custom style hooks (useXStyles_unstable / CustomStyleHooksProvider_unstable),…