# React Component Prompt Library

This folder contains reusable, component-level prompts for
`fe-digitaltwin-v2`. Each reusable React component has its own prompt and its own
styling theme, states, variants, accessibility contract, and acceptance criteria.

## Structure

```text
prompts/
├── design-system.md
├── feature-branch-handoff.md
└── components/
    ├── _template/
    │   └── prompt.md
    ├── ai-interface/
    │   └── prompt.md
    ├── button/
    │   └── prompt.md
    ├── data-table/
    │   └── prompt.md
    ├── dialog/
    │   └── prompt.md
    ├── form-field/
    │   └── prompt.md
    ├── map/
    │   └── prompt.md
    └── metric-card/
        └── prompt.md
```

## How to use a component prompt

1. Choose the component closest to the requested UI.
2. Copy its `prompt.md` into the agent or developer conversation.
3. Replace values inside `<angle brackets>`.
4. Keep the component generic: data and actions normally enter through props.
5. Attach a screenshot or source-component path when exact visual parity matters.
6. Start from `components/_template/prompt.md` when adding another component type.

Read [`design-system.md`](./design-system.md) before changing a component theme.
Semantic project tokens remain the source of truth even when components have
different visual personalities.

Use [`feature-branch-handoff.md`](./feature-branch-handoff.md) when work starts
from `main` and must be continued or reviewed by another developer.

The same system can be inspected visually on the public `/design-system` route.
Use that page to review real rendered tokens, typography, components, MapCN,
AI Elements, states, light mode, and dark mode without signing in. Its AI
workbench can turn any catalog entry into a repository-aware implementation
prompt.

Do not commit filled-in prompts containing credentials, tokens, private API
responses, or other secrets.