Reference

CLAUDE.md template

Drop this into your project root as CLAUDE.md to give Claude Code persistent context about Atelier UI — MCP servers, design tokens, and component conventions — so every session starts component-aware.

What is CLAUDE.md?

CLAUDE.md is a project-level instructions file that Claude Code reads at the start of every session. It sets rules, conventions, and context so you never have to repeat "this project uses Atelier UI" in every prompt.

When you need this: the workshop workspace generator already ships a CLAUDE.md for you. Come back to this page when you start a new project of your own and want the same component-aware behaviour.

# UI Components — Atelier UI (React)

This project uses Atelier UI for all UI components.
Full API reference: https://atelier.pieper.io/llms-full.txt

## Package
`@atelier-ui/react`

## MCP Server
`storybook-react` is configured. Before using any component:
1. Call `list-all-documentation` to get valid component IDs
2. Call `get-documentation` with the ID — never invent props
3. Do not use a component that is not in the docs

## Component Imports
```tsx
import { LlmButton, LlmCard, LlmInput } from '@atelier-ui/react';
```

## Design Tokens
All colors, spacing, and radii use CSS custom properties. Never use
hardcoded hex values or pixel sizes — always reference a token.

Key tokens:
- Colors:   --ui-color-primary, --ui-color-text, --ui-color-surface-raised, --ui-color-border
- Spacing:  --ui-spacing-4 (1rem), --ui-spacing-6 (1.5rem), --ui-spacing-8 (2rem)
- Radius:   --ui-radius-sm (0.375rem), --ui-radius-md (0.5rem), --ui-radius-lg (0.75rem)

Token names match Figma variable names 1-to-1. Dark/light mode is automatic.

## Rules
- Prefer component props over custom CSS
- When custom styling is needed, use --ui-color-* and --ui-spacing-* tokens
- Do not install other UI component libraries alongside Atelier UI
- Do not add inline hex colors or hardcoded spacing values

# UI Components — Atelier UI (Angular)

This project uses Atelier UI for all UI components.
Full API reference: https://atelier.pieper.io/llms-full.txt

## Package
`@atelier-ui/angular`

## MCP Server
`storybook-angular` is configured. Before using any component:
1. Call `list-all-documentation` to get valid component IDs
2. Call `get-documentation` with the ID — never invent props
3. Do not use a component that is not in the docs

## Component Imports
```ts
import { LlmButton, LlmCard, LlmInput } from '@atelier-ui/angular';
```

Angular components use the `llm-*` selector in templates:
```html
<llm-button variant="primary" [loading]="isSaving">Save</llm-button>
```

## Design Tokens
All colors, spacing, and radii use CSS custom properties. Never use
hardcoded hex values or pixel sizes — always reference a token.

Key tokens:
- Colors:   --ui-color-primary, --ui-color-text, --ui-color-surface-raised, --ui-color-border
- Spacing:  --ui-spacing-4 (1rem), --ui-spacing-6 (1.5rem), --ui-spacing-8 (2rem)
- Radius:   --ui-radius-sm (0.375rem), --ui-radius-md (0.5rem), --ui-radius-lg (0.75rem)

Token names match Figma variable names 1-to-1. Dark/light mode is automatic.

## Rules
- Prefer component props over custom CSS
- When custom styling is needed, use --ui-color-* and --ui-spacing-* tokens
- Do not install other UI component libraries alongside Atelier UI
- Do not add inline hex colors or hardcoded spacing values

# UI Components — Atelier UI (Vue)

This project uses Atelier UI for all UI components.
Full API reference: https://atelier.pieper.io/llms-full.txt

## Package
`@atelier-ui/vue`

## MCP Server
`storybook-vue` is configured. Before using any component:
1. Call `list-all-documentation` to get valid component IDs
2. Call `get-documentation` with the ID — never invent props
3. Do not use a component that is not in the docs

## Component Imports
```ts
import { LlmButton, LlmCard, LlmInput } from '@atelier-ui/vue';
```

## Design Tokens
All colors, spacing, and radii use CSS custom properties. Never use
hardcoded hex values or pixel sizes — always reference a token.

Key tokens:
- Colors:   --ui-color-primary, --ui-color-text, --ui-color-surface-raised, --ui-color-border
- Spacing:  --ui-spacing-4 (1rem), --ui-spacing-6 (1.5rem), --ui-spacing-8 (2rem)
- Radius:   --ui-radius-sm (0.375rem), --ui-radius-md (0.5rem), --ui-radius-lg (0.75rem)

Token names match Figma variable names 1-to-1. Dark/light mode is automatic.

## Rules
- Prefer component props over custom CSS
- When custom styling is needed, use --ui-color-* and --ui-spacing-* tokens
- Do not install other UI component libraries alongside Atelier UI
- Do not add inline hex colors or hardcoded spacing values

How to use it

Copy the template above

Choose your framework, then copy the CLAUDE.md content into a file at your project root.

Confirm MCP is configured

The template references the MCP server by name. Make sure the matching server is wired up in your .claude/settings.json — the Workshop Setup does this automatically.

Open the project in Claude Code

Claude Code picks up CLAUDE.md on session start. From here, every prompt has component awareness — no preamble needed.