mirror of https://github.com/nexu-io/open-design.git synced 2026-05-31 19:04:39 +07:00

add FlowAI live dashboard template skill (#801 )

* add flowai live dashboard template skill

Introduce a new template-mode skill under the live-artifacts scenario with a default interactive example and seed template so users can generate polished, refresh-ready team dashboards quickly.

Co-authored-by: Cursor <cursoragent@cursor.com>

* add preview screenshot for flowai live dashboard template

Attach the provided dashboard screenshot under docs/screenshots/skills so the template contribution includes a visual preview artifact.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(flowai-template): reposition as static prototype dashboard skill

Address review feedback on PR #801:

- SKILL.md: drop `scenario: live-artifacts` and live-related triggers;
  align with peer single-page dashboard skills using
  `mode: prototype` + `scenario: operations` so the four-file
  live-artifact contract no longer applies.
- references/checklist.md: rewrite quality gates around the static
  prototype scope (export-from-DOM, responsive breakpoints, theme-aware
  charts).
- assets/template.html:
  - CSV export now reads every visible row from the table DOM,
    including the Workflow column, instead of a hardcoded fixture.
  - Add 1300px and 720px breakpoints; the main grid stacks to one
    column, stat cards fall back to two then one, tabs wrap, table
    scrolls horizontally on phones.
  - Move chart colors into CSS variables (--chart-stroke,
    --chart-fill, --chart-axis, --chart-bar-label, --chart-bar-value)
    so dark-mode toggling re-derives them; chart canvases are
    re-rendered after theme switch.
  - Hash-sync tabs (#members | #details | #activity), animate the
    role bar chart only on first reveal of the details tab,
    fall back when CanvasRenderingContext2D.roundRect is unavailable,
    add Esc to exit zoom and prevent tooltip clipping.
- example.html: title cleanup to match new skill identity.

Localized content:
- Add `flowai-live-dashboard-template` to DE/FR/RU
  SKILL_IDS_WITH_EN_FALLBACK lists in apps/web/src/i18n so the
  e2e localized-content test passes.

---------

Co-authored-by: tuolaji <tuola@tuolajideMacBook-Air.local>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Tuola Ge <gexingli@refly.ai>

2026-05-07 19:07:45 +08:00

1.5 KiB

Raw Blame History

Checklist

P0

assets/template.html exists and opens directly from disk in a browser.
example.html is a complete, hand-built sample with real labels, names, and values.
Skill frontmatter is od.mode: prototype, od.scenario: operations, od.preview.type: html, od.design_system.requires: true.
All three tabs (Team Members, Team Details, Activity Log) switch correctly; only one view is visible at a time.
Role bar chart animates with easing on first reveal of the details tab.
Chart hover tooltips show precise label and value.
Panels/cards zoom in/out via click; clicking the backdrop or pressing Esc restores the layout.
Dark mode toggle works and chart strokes/labels remain legible (chart colors are re-derived from CSS variables on toggle, not baked in).
No external avatar / photo CDN dependencies; avatars are inline SVG or initial badges.

P1

"Export CSV" exports every row currently rendered in the team table, including the Workflow column (driven by the table DOM, not a hardcoded fixture).
Layout collapses gracefully on narrow viewports: under 1300px the main grid stacks to a single column and stat cards fall back to two columns; under 720px stat cards stack to one column and tabs wrap.
Colors and spacing inherit from root tokens / CSS variables; no hardcoded hex values inside chart drawing code.

P2

Tooltip avoids viewport edge clipping.
Chart values animate smoothly on re-render after a theme switch.
Tab state is reflected in the URL hash and survives a refresh.

1.5 KiB Raw Blame History

Checklist

P0

P1

P2

1.5 KiB

Raw Blame History