The adaptive interface system for modern web experiences.
---
name: FAST Instructions
description: This file describes the general instructions for working with the FAST monorepo, including repository structure, code style, tooling, and contribution guidelines.
applyTo: '**/*'
---
# Instructions for FAST
## General
- **Explicit instruction only**: Do not take any action unless explicitly instructed. Wait for clear direction before making changes, running commands, or modifying files.
## Repository Overview
FAST (`@microsoft/fast`) is a Microsoft open-source monorepo for building W3C-standards-compliant Web Components. The core package is `@microsoft/fast-element` โ a lightweight, performant Web Component authoring library with a declarative HTML entrypoint. Additional packages provide routing plus declarative build and test tooling.
## Packages
Each package includes a DESIGN.md file, read that to gain a general understanding of the code for that package.
| Package | Status | Purpose |
|---|---|---|
| `@microsoft/fast-element` | Stable (v2) | Core Web Component library, including declarative HTML via `@microsoft/fast-element/declarative.js` |
| `@microsoft/fast-router` | Alpha | Web Component router |
| `@microsoft/fast-build` | Prerelease | Declarative HTML server side renderer |
| `@microsoft/fast-test-harness` | Prerelease | Testing utilities for FASTElement components |
### Sites
| Package | Status | Purpose |
|---|---|---|
| `sites/website` | Private (not published as a package) | Documentation website source |
| `sites/benchmarks` | Private (not published as a package) | Benchmarking site |
### Example projects
- `examples/design-system/` โ Shared semantic design tokens (`@microsoft/fast-examples-design-system`) consumed by all example apps.
- `examples/csr/todo-app/` โ A simple To-Do app demonstrating FAST usage patterns and using the shared `@microsoft/fast-examples-design-system` tokens.
- `examples/csr/todo-mobx-app/` โ A To-Do app demonstrating how to integrate MobX state with `@microsoft/fast-element` using a single `autorun` per component (no custom bridge code).
- `examples/ssr/chat-app/` โ A declarative FAST chat demo that pre-renders with `@microsoft/fast-build` and streams canned assistant replies into the transcript. Dark theme.
- `examples/ssr/webui-todo-app/` โ A To-Do app demonstrating FAST declarative HTML with `@microsoft/webui` prerendering and `@microsoft/fast-element/declarative.js` hydration. Light theme.
## Skills
These contain domain-specific guidance. Read when performing related tasks:
- [TypeScript](./skills/typescript/SKILL.md) โ compiler constraints, import/export conventions, decorator usage, testing patterns.
- [Rust](./skills/rust/SKILL.md) โ general guidance on performing updates between the crate and package.
- [Shipping](./skills/shipping/SKILL.md) โ pull request format, change file generation, documentation updates.
- [Pull Request](./skills/fast-pull-request/SKILL.md) โ generate a pull request description from the branch diff.
- [Bug Report](./skills/fast-bug-report/SKILL.md) โ generate a bug report issue from conversation context.
- [Feature Request](./skills/fast-feature-request/SKILL.md) โ generate a feature request issue from conversation context.
- [Testing](./skills/testing/SKILL.md) โ running tests locally and in CI, writing Playwright fixture tests.
- [Documentation](./skills/documentation/SKILL.md) โ adding documentation in code, markdown files in each package/crate, and the website.
## Commands
Run all commands from the monorepo root. Use workspace flags to target a single package.
| Task | Command |
|---|---|
| Install | `npm ci` |
| Build all | `npm run build` |
| Build one package | `npm run build -w @microsoft/fast-element` |
| Test all | `npm run test` |
| Test one package | `npm run test -w @microsoft/fast-element` |
| Test Chromium only | `npm run test:chromium` |
| Build/test changed only | `lage build --since origin/main` |
| Test changed only | `lage test:node test:chromium --since origin/main` |
| Lint | `npm run lint` |
| Lint fix | `npm run lint:fix` |
| Format check | `npm run format:check` |
| Format fix | `npm run format` |
| Check (lint + format + imports) | `npm run biome:check` |
| Check fix | `npm run biome:fix` |
| CI check (read-only) | `npm run biome:ci` |
| Generate change file | `npm run change` |
| Check change files | `npm run checkchange` |
| API docs | `npm run doc -w @microsoft/fast-element` |
Build and test commands use [Lage](https://microsoft.github.io/lage/) for dependency-aware task execution. Lage respects the package dependency graph and can run incrementally with `--since <ref>` to only build/test changed packages and their dependents. The CI pipelines use `--since` for pull requests to skip unchanged packages.
All `lint`, `biome:check`, `biome:fix`, and `biome:ci` commands use `biome-changed`, which runs biome only on files with uncommitted git changes. The `format:check` and `format` commands use biome's own `--changed` flag to compare against the default branch.
## Project Structure
```
packages/<package>/
src/ # Source code
index.ts # Main barrel (re-exports)
<feature>/ # Feature directories
<feature>.ts # Implementation
<feature>.pw.spec.ts # Co-located Playwright test
test/ # Test harness (Vite dev server, fixtures)
dist/ # Build output (ESM + declarations)
docs/ # API reports (api-extractor)
DESIGN.md # Code documentation for the package or crate
README.md # README for published package use
```
- Source files use **kebab-case**: `element-controller.ts`, `update-queue.ts`.
- Playwright test files use `*.pw.spec.ts` suffix, co-located next to the source they test.
- Node test files use `*.spec.ts` suffix.
## Code Style
### Formatting & Linting (Biome)
- 90-character print width, 4-space indent, double quotes, trailing commas.
- Single-arg arrow functions omit parens: `x => x + 1`.
- Import ordering enforced via `organizeImports`.
- No `I` prefix on interfaces.
- `any` is permitted (`noExplicitAny: off`).
- Config: [`biome.jsonc`](../biome.jsonc).
### Naming Conventions
| Element | Convention | Examples |
|---|---|---|
| Classes | PascalCase | `ElementController`, `FASTElementDefinition` |
| Interfaces/Types | PascalCase, no `I` prefix | `Accessor`, `Disposable`, `Expression` |
| Methods/functions | camelCase | `getValue()`, `handleChange()` |
| Constants | PascalCase frozen objects or camelCase | `SourceLifetime`, `emptyArray` |
| Private fields | `_` prefix | `_template`, `_shadowRootOptions` |
| Files | kebab-case | `element-controller.ts`, `observer-map.ts` |
| Change callbacks | `${prop}Changed` | `childChanged()`, `templateChanged()` |
### TypeScript
Key constraints (details in [TypeScript skill](./skills/typescript/SKILL.md)):
- ESM only (`"type": "module"`) โ imports use `.js` extensions.
- `import type { ... }` required for type-only imports (`verbatimModuleSyntax`).
- Named exports only โ no default exports.
- Legacy decorators enabled (`experimentalDecorators: true`).
- `strictNullChecks` and `noImplicitAny` enabled.
## Tooling
| Tool | Purpose |
|---|---|
| npm workspaces | Package management |
| Lage | Task runner โ dependency-aware builds and incremental testing |
| TypeScript | Compilation |
| Rollup | Bundling (`fast-element` only) |
| Playwright | Testing |
| Vite | Test dev server |
| api-extractor | API documentation + `.d.ts` rollup |
| beachball | Change files, versioning, publishing |
| Biome | Formatting + Linting |
| lefthook | Pre-commit hooks (runs `biome:check` and `checkchange` on staged files) |
| Rust | Rendering Declarative templates (`fast-build` package and `microsoft-fast-build` crate only) |
## Acceptance Checklist
Before finishing any change, run these commands from the monorepo root and confirm they pass:
- [ ] `npm run build` โ all packages build successfully
- [ ] `npm run test` โ all tests pass
- [ ] `npm run biome:check` โ Biome linting and formatting pass
- [ ] `npm run checkchange` โ beachball change files exist for any `packages/*` changes
Read the [shipping skill](./skills/shipping/SKILL.md) and ensure you have updated everything outlined in that file.