本文へ移動
cccskills
無料GitHub で公開

flowai-live-dashboard-template

Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.

インストール方法を見る

含まれるファイル(4)

  • SKILL.md3.4 KB
  • assets/template.html16.0 KB
  • example.html454 B
  • references/checklist.md1.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

FlowAI Dashboard Skill

Produce a single-screen, multi-tab team management dashboard inspired by the FlowAI aesthetic. The output is a self-contained HTML file (no external runtime dependencies) with built-in interactions: tab switching, an animated bar chart, hover tooltips on charts, click-to-zoom panels, dark mode toggle, and CSV export of the visible team table.

Resource map

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # reference seed used as the starting structure
├── references/
│   └── checklist.md           # P0/P1/P2 quality gates
└── example.html               # complete hand-built sample (gallery preview)

Workflow

  1. Read the active DESIGN.md (injected above). Map color, typography, spacing, and component styling tokens to the CSS variables used by assets/template.html. Do not invent new tokens.
  2. Start from assets/template.html; never generate the shell from blank.
  3. Keep three tabs: Team Members, Team Details, Activity Log. Tabs must actually switch and only one view is visible at a time.
  4. Generate plausible, specific sample data (real-looking names, IDs, roles, departments, dates, percentages). No Member A / Metric B placeholders.
  5. Required interactions:
    • tab switching with hash sync (#members | #details | #activity)
    • role bar chart animates with easing on first reveal of the details tab
    • chart hover tooltips with precise label + value
    • click any panel/card to zoom; click again or press Esc to restore
    • dark mode toggle that re-derives chart colors from CSS variables
    • "Export CSV" button that exports every row currently in the team table, including the Workflow column
  6. Run through references/checklist.md before final output.

Output contract

Emit one short orientation sentence, then the artifact:

<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>

The artifact must render correctly when opened directly from disk with no build step and no network access.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月13日 更新

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月13日 更新

Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月13日 更新

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, reading selected OpenDesign browser-tab context, testing web apps, dogfooding OpenDesign previews, QA, bug hunts, or reviewing app quality. Prefer local OpenDesign preview URLs unless the user explicitly asks for external browsing.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月13日 更新

Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月13日 更新

Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月13日 更新

nexu-io のスキルをすべて見る

このスキルの問題を報告する