You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
2.0 KiB
Markdown
56 lines
2.0 KiB
Markdown
# 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.
|