dev-rcfa-memory/fe-digitaltwin-v2/prompts/README.md

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

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 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 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.