Tools / LLM context

LLM context

Paste this into CLAUDE.md, .cursor/rules, copilot-instructions or AGENTS.md so an assistant uses ALPHA correctly.

Instructions block

Kept in sync with library/README.md

This project uses @growth-protocol-ai/alpha (ALPHA design system).

- Import components from the package root:
  `import { Button } from "@growth-protocol-ai/alpha"`.
- The stylesheet is imported once in the root layout. Never import it again.
- Never import from @growth-protocol-ai/alpha/dist/** — it is not a public path.
- Never target the hashed class names (alpha-Button-root-…); they change
  between builds.
- Theme by overriding ALPHA's custom properties (--primary, --text-typical,
  --surface-depth-0). They are not namespaced — if your app already defines one
  of these names, one of you will lose.
- For a contextual layout override, scope a rule to [data-slot="..."] — the
  one supported selector into a component.
- Use ALPHA's tokens for surrounding layout so it matches the components.
- Combine class names with the exported cn() helper.
- Programmatic metadata: `import { COMPONENT_REGISTRY } from
  "@growth-protocol-ai/alpha/registry"` — safe in server components.

Why the registry helps

COMPONENT_REGISTRY is runtime-pure — the meta files import their components with import type only, so it carries no "use client" and is safe in server components and Node scripts. An assistant can read the real variant, size and prop lists from it instead of guessing.

import { COMPONENT_REGISTRY } from '@growth-protocol-ai/alpha/registry';

COMPONENT_REGISTRY.button.variants;   // every variant, with usage guidance
COMPONENT_REGISTRY.button.props;      // documented props, typed to the component

This site's own navigation, prop tables and ⌘K index are all built from it, which is why they cannot list a component the package does not export.