Existing frontend: detect, report, then keep or restyle (ticket 03)
- templates/detect_frontend.py: finds plain HTML, React/Vue/Angular/Svelte apps and PyQt web views; prints location, stack, main colours, font and every token block (CSS custom properties, <style> tags, Tailwind config). - templates/frontend.md: shared report / keep / restyle procedure, written so rpa-dashboard-ai can point to it. - SKILL.md steps 1, 2 and 6 point to it. - tests: detection self-check; fixture c-web-existing-frontend; eval entries c-keep and c-restyle (new pages only, per-question grading, checks on what changed in the existing files), both passing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
3eb3fdf00e
commit
f11bddd958
15 files changed
+1210
-12
No files matched your search
@@ -15,6 +15,8 @@ source projects.
|
||||
| `templates/contract.md` | The data contract: events the bot sends, actions the page sends. |
|
||||
| `templates/themes.md` | Theme presets (Tebra Sky, Superbill Ember) and the custom-colour steps. |
|
||||
| `templates/palette.py` | Derives a custom palette from one brand hex and checks contrast. |
|
||||
| `templates/frontend.md` | Existing frontend: detect it, report it, then keep or restyle. Shared with `rpa-dashboard-ai`. |
|
||||
| `templates/detect_frontend.py` | Finds an existing frontend and prints its location, stack and token blocks. |
|
||||
| `templates/reference/` | Raw Tebra extracts. Use them only to port optional sections. |
|
||||
|
||||
Follow the steps in order. Ask one question at a time, and wait for the answer.
|
||||
@@ -23,22 +25,24 @@ If the user's request already answers a question, don't ask it again.
|
||||
## 1. Scan the project
|
||||
|
||||
Before asking anything, look at the project:
|
||||
- **Frontend:** `*.html` files outside `node_modules`, `.venv` and build output; a
|
||||
`web/`, `frontend/` or `static/` folder; `package.json` with react, vue, angular or
|
||||
svelte; a PyQt `QWebEngineView`. For any you find, note the location, the stack and
|
||||
the main colour tokens (CSS custom properties or the Tailwind theme).
|
||||
- **Frontend:** run `python templates/detect_frontend.py <project root>`. It finds
|
||||
plain HTML, React/Vue/Angular/Svelte apps and PyQt web views, and prints each
|
||||
one's location, stack and colour tokens. `templates/frontend.md` says what it
|
||||
covers and what to do with its report.
|
||||
- **Bot:** the entry point (for example `main.py`, a `__main__` module or a run
|
||||
script), what it prints (step markers, status and error lines), and how it starts.
|
||||
|
||||
## 2. Report the frontend, then ask keep or restyle
|
||||
|
||||
Follow `templates/frontend.md` sections 2 to 5. In short:
|
||||
- **No frontend:** say "No existing frontend found." and go to step 3. Don't
|
||||
describe a frontend that isn't there.
|
||||
- **Frontend found:** say "Frontend found at `<path>`, stack `<stack>`, colours
|
||||
`<main tokens>`." Then ask: **keep its look**, or **restyle** it?
|
||||
- Keep: skip step 3. Build the page with the project's own tokens and fonts, and
|
||||
change none of its existing styles.
|
||||
- Restyle: go to step 3. Change only the theme tokens, never layout or logic.
|
||||
change no existing file.
|
||||
- Restyle: go to step 3. In the existing files, change only the token blocks,
|
||||
never layout or logic, and show the user the diff.
|
||||
|
||||
## 3. Ask for colours
|
||||
|
||||
@@ -70,6 +74,7 @@ sections must leave no markup, script or style behind, so delete their
|
||||
- Desktop: put it next to the host, for example `dashboard/dashboard.html`.
|
||||
- Web: put it in the backend's static folder. With no backend yet, use
|
||||
`dashboard/dashboard.html`.
|
||||
- Existing frontend: put it where `templates/frontend.md` section 3 says.
|
||||
2. Fill every `{{...}}` placeholder:
|
||||
|
||||
| Placeholder | Value |
|
||||
@@ -83,7 +88,9 @@ sections must leave no markup, script or style behind, so delete their
|
||||
3. Apply the theme by replacing the `body{...}` and `body.dark{...}` token blocks
|
||||
with the preset from `templates/themes.md`. For Ember, also add its font link.
|
||||
For a custom colour, run `python templates/palette.py "<hex>"`, paste the
|
||||
tokens it prints, and show the user its contrast table.
|
||||
tokens it prints, and show the user its contrast table. If the user chose keep,
|
||||
fill the blocks from the project's tokens instead (`templates/frontend.md`
|
||||
section 4).
|
||||
4. Desktop: also copy `templates/bridge.py` next to the page, and fill
|
||||
`{{BOT_MODULE}}`, the `STEPS` list (the same steps as the page), `{{ORG}}` and
|
||||
`{{APP_NAME}}`.
|
||||
|
||||
Reference in new issue
Block a user