Add generative-ui skill — dynamic UI generation + canvas templates#6
Add generative-ui skill — dynamic UI generation + canvas templates#6dylanfeltus wants to merge 5 commits intomainfrom
Conversation
New skill that teaches agents to create and push live HTML/CSS/JS dashboards to OpenClaw canvas nodes (TVs, tablets, monitors, Mac displays). Includes: - Comprehensive SKILL.md with infrastructure patterns, templates, best practices - 3 example dashboards: ambient clock, status board, Stratus Labs ambient display - README with usage docs Enables ambient office displays, live status boards, and agent-generated UI pushed to any canvas-connected display surface via the OpenClaw Gateway.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 211989b494
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
canvas-dashboard/README.md
Outdated
|
|
||
| ## Screenshots | ||
|
|
||
| <!-- TODO: Add screenshots of dashboards on actual displays --> |
There was a problem hiding this comment.
This introduces a bare TODO comment with no linked issue or rationale, which violates the review rule in /workspace/skills/AGENTS.md (No TODO comments without context or linked issues). Untracked TODOs tend to become stale and make ownership/prioritization unclear for future maintainers, so this should either be removed or tied to a specific issue/reference.
Useful? React with 👍 / 👎.
- 8 reusable components (stat card, status row, progress ring, data table, notification toast, timeline, sparkline, progress bar) - A2UI v0.8 protocol integration with JSONL examples - 3 live update patterns (full-page, surgical eval, A2UI surface) - TV/ambient display infrastructure guide - Data-driven generation workflow - 3 production-ready examples (live feed, project tracker, data wall) - CSS design system with custom properties - TV-distance readability guidelines
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
dylanfeltus
changed the title
Shell script that generates a real dashboard from live system data: - CPU, memory, disk usage via macOS APIs - Recent git commits across ~/Code/ repos - Ambient dark theme, TV-optimized - Self-contained HTML, no dependencies - Cron-friendly for ambient office displays
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3c96293086
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| while IFS= read -r line; do | ||
| HASH=$(echo "$line" | cut -c1-7) | ||
| MSG=$(echo "$line" | cut -c9-) | ||
| GIT_COMMITS="$GIT_COMMITS<div class=\"commit\"><span class=\"commit-repo\">$REPO_NAME</span><span class=\"commit-hash\">$HASH</span><span class=\"commit-msg\">$MSG</span></div>" |
There was a problem hiding this comment.
The generated commit rows interpolate $REPO_NAME and $MSG directly into HTML, so any commit subject containing HTML metacharacters (or malicious markup from a cloned external repo) is rendered as active markup instead of text. In the file:// dashboard this can break layout or execute attacker-controlled script in the display browser context, so these values should be HTML-escaped before concatenation.
Useful? React with 👍 / 👎.
| - **Building your first dashboard?** → [Data-Driven Generation Workflow](#data-driven-generation-workflow) | ||
| - **Need UI components?** → [Component Library](#component-library) | ||
| - **Want real-time updates?** → [A2UI Protocol Integration](#a2ui-protocol-integration) | ||
| - **Setting up a TV display?** → [TV/Ambient Display Infrastructure](#tvambient-display-infrastructure) |
There was a problem hiding this comment.
These links currently use local #... anchors that do not exist in README.md, so the “Read the Skill” jump links do not navigate users to the intended documentation sections. Because this is the primary onboarding path, readers cannot quickly reach the referenced guidance unless they manually search, so these should point to ./SKILL.md#... anchors.
Useful? React with 👍 / 👎.
|
|
||
| ❌ **Not needed for:** | ||
| - Static content that never changes | ||
| - Single-template scenarios (use canvas-dashboard skill) |
There was a problem hiding this comment.
This line instructs users to use canvas-dashboard for single-template scenarios, but that skill is no longer present in this repository after the merge, so following the recommendation leads to a dead end. The guidance should reference the corresponding templates in generative-ui instead to keep the decision matrix actionable.
Useful? React with 👍 / 👎.
Full-featured ambient dashboard with: - Real-time CPU/memory/disk/load gauge rings - Service health status panel - Agent activity feed timeline - Live clock with greeting - Process sparkline chart - Simulated metric drift animation Built during night build session exploring generative UI.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7a51abe5c5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if [ -n "$COMMITS" ]; then | ||
| while IFS= read -r line; do | ||
| HASH=$(echo "$line" | cut -c1-7) | ||
| MSG=$(echo "$line" | cut -c9-) |
There was a problem hiding this comment.
git log --oneline does not guarantee a 7-character hash prefix in every environment (e.g., when core.abbrev is set higher), but this parser hard-codes cut -c1-7 and cut -c9-. In those cases, the commit subject is corrupted by leftover hash characters (for example, git -c core.abbrev=12 log --oneline -1 yields a 12-char hash, so cut -c9- starts in the hash), which makes the “Recent Commits” panel inaccurate.
Useful? React with 👍 / 👎.
1 participant
Comprehensive skill for creating live HTML/CSS/JS interfaces on OpenClaw canvas displays (TVs, tablets, monitors).
What changed: Merged canvas-dashboard into generative-ui — one skill now covers both static templates and programmatic generation.
Includes:
Use cases: Ambient office displays, live status boards, data walls, real-time feeds, project trackers, system monitors.
Deployment: Push to any canvas-connected display surface via OpenClaw Gateway.