- 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>
7.2 KiB
name, description
| name | description |
|---|---|
| rpa-dashboard-no-ai | Builds a working dashboard page for an RPA bot that does not use AI. It always includes a sidebar and top bar with a dark toggle and status dot, KPI cards, a batch status donut, a run panel with steps and a live log, and a report table with search and Excel export. The page is wired to the bot through one data contract, or runs on sample data when there is no bot yet. Supports a desktop path (PyQt6 with an embedded page) and a web path. Use when the user asks for an "RPA dashboard", "automation dashboard", "bot dashboard", a dashboard "without AI", or a status/run/report page for a bot. For bots that use an LLM or OCR extraction, use rpa-dashboard-ai instead. |
RPA dashboard (no AI)
Everything this skill needs is bundled in templates/. Never read the original
source projects.
| File | What it is |
|---|---|
templates/dashboard.html |
The single-file page: theme tokens, shell, KPI, donut, run panel, report, sample data. Works in PyQt (QWebChannel) or on the web (polling). |
templates/bridge.py |
Minimal PyQt6 host. It runs the bot as a child process and tails its output. |
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. 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: 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.mdsays 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 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
Skip this if the user chose to keep the existing look. Offer:
- Tebra Sky: blue glass cards on a sky gradient.
- Superbill Ember: flat surfaces with a red-orange brand gradient.
- Custom: the user gives one brand hex colour.
4. Ask desktop or web
Ask only if there is no frontend. If there is one, use its stack.
- Desktop: a PyQt6 window with the page embedded. The page talks to Python through a bridge, so no web server is needed.
- Web: the same page, served by a backend that it polls.
5. Ask which optional sections to build
Always built: the shell (sidebar, top bar, dark toggle, status dot), KPI cards, the status donut, the run panel and the report table.
Ask which extras to add (choose any, or none): checkpoint tracker,
admin/roles screen, login page. Build only the ones chosen. Unchosen
sections must leave no markup, script or style behind, so delete their
<!-- OPTIONAL: ... --> markers.
6. Build
-
Copy
templates/dashboard.htmlinto the project:- 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.mdsection 3 says.
- Desktop: put it next to the host, for example
-
Fill every
{{...}}placeholder:Placeholder Value APP_NAME,APP_SUBTITLEThe project's name and a short tagline. LOGO_SRCThe logo's path, or empty if there is none. STEPS_JSONThe run steps as a JSON list, from the bot's real stages, for example ["Initializing","Login","Process items","Completed"].REPORT_COLUMNS_JSON[{"key":..., "label":...}]. It must include a column with keystatus, which shows the bucket pill.API_BASEWeb only, for example /api. Leave it empty for desktop. -
Apply the theme by replacing the
body{...}andbody.dark{...}token blocks with the preset fromtemplates/themes.md. For Ember, also add its font link. For a custom colour, runpython templates/palette.py "<hex>", paste the 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.mdsection 4). -
Desktop: also copy
templates/bridge.pynext to the page, and fill{{BOT_MODULE}}, theSTEPSlist (the same steps as the page),{{ORG}}and{{APP_NAME}}. -
Search the output for
{{. None may be left.
7. Wire the data
The contract is in templates/contract.md: one envelope, {event, data}, in
both directions.
- No bot yet: keep
SAMPLE_DATA = trueand theSAMPLE DATAblock. The page answers its own data actions, so it opens with sample batches and report rows, and Run plays a demo run. Tell the user which events their bot must send later. - Bot exists: set
SAMPLE_DATA = falseand delete theSAMPLE DATAblock. Then:- Desktop: in
bridge.py, setBOT_CMDto start the bot as a child process. FillSTEP_MARKERSandFRIENDLY_RULESfrom lines the bot really prints. Use specific substrings (for example[step 3], not a bare word); the first match wins. Unmatched error lines must always reach the log. - Web: the backend serves
GET {API_BASE}/dashboard,GET {API_BASE}/run/status(returning{running, events[]}) andPOST {API_BASE}/<action-with-dashes>. - Apply the contract's derived rules: batch state from Pending plus date, and report buckets from status.
- Desktop: in
8. Verify
Open the page. On desktop run the host; otherwise open the file or the served URL. With sample data, opening the file in a browser is enough. Check:
- the light theme, the dark theme (use the toggle), and a window 820px wide or less;
- KPI cards, donut and legend, the Run tab's steps and log, and the Report tab's rows and pills all show data;
- no
{{placeholders are left and the console shows no script errors.
If Python Playwright is installed, take headless screenshots of each check and look at them. Otherwise, ask the user to open the page. Finish by telling the user where the files are, which theme and sections were built, and whether the page is on sample data or wired to the bot.