Docs & Knowledge · nexu-io/html-anything

flowai-team-dashboard

Name: flowai-team-dashboard
Author: nexu-io/html-anything

A three-tab team management admin dashboard: Members, Details, and Activity Log, featuring charts and CSV export.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE；GitHub API spdx_id=Apache-2.0）Commit 553ed98c28

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

This skill is not an executable program, but a prompt injected into the local coding-agent CLI: the host takes the body of SKILL.md, prepends global shared design instructions, appends user content, builds a single prompt for the logged-in agent, and retrieves the agent's stdout as HTML.

next/src/lib/templates/shared.ts

【输入格式】: ${opts.format} 【用户内容】: ${opts.content}

Assembly template = shared instructions → skill body → input format → user content; the web endpoint /api/convert follows the exact same function: prompt = assemblePrompt({ body: skill.body, content, format });

The shared instruction layer (which does not belong to any single skill, but sits on top of every template) pins the output as a 'self-contained single-file HTML' and explicitly forbids the agent from using file system tools like Write/Edit/Bash, streaming HTML directly as conversation text.

next/src/lib/templates/shared.ts

- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。

This is the origin of the capability boundary for this batch of skills: output is purely text, while saving to disk and rendering are handled by the host frontend; the ban is a prompt-level soft constraint, not hard sandbox isolation.

Beyond SKILL.md, there is a 'content-driven volume' override rule: any page, frame, or card count specified in the template is treated as a reference minimum, with the actual quantity determined by user content—preventing the agent from compressing user content to match template numbers.

next/src/lib/templates/shared.ts

- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。

This is especially critical for frame-* single-frame templates: it characterizes layout descriptions in the template as a 'reusable layout pool' rather than an upper cap on output.

The loading convention is 'one skill = one folder': SKILL.md (YAML frontmatter for the selector + body as template prompt), with optional example.md (sample input) and example.html (ready-to-view preview sample); adding templates requires only adding directories without modifying TS code.

next/src/lib/templates/loader.ts

* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker

The loader's loadSkillFromDir reads only these three file types, with no other asset loading paths—asset reachability of this skill was verified against this during the second pass.

The selection pipeline (CLI side) uses a three-tier funnel: strong signal keywords (2 points per matched keyword, threshold 3) → fallback to tags/scenario scoring → if still uncertain, passes the first 800 characters of user content to the local agent for a one-sentence classification.

cli/src/skills-matcher.ts

const CONFIDENCE_THRESHOLD = 3;

Prompt text for the AI fallback: const prompt = `请用一句话（不超过15个字）描述以下内容最像什么类型的文档，只需回答类型名称：`

The preview pipeline is independent of generation: /api/templates/<id>/preview returns example.html verbatim as text/html to an iframe; the frontend iframe uses sandbox="allow-scripts allow-same-origin".

next/src/components/preview-pane.tsx

sandbox="allow-scripts allow-same-origin"

Route comment: * Returns the skill's `example.html` verbatim so it can be loaded into an (Host-side tradeoff: under allow-scripts + allow-same-origin, preview scripts could potentially remove the sandbox).

The template defines a three-tab team management admin single-page: Team Members / Team Details / Activity Log, plus a row of KPI stats, a member table (avatar + role + status), a role distribution bar chart, online status with activity sparklines, and a Top contributors panel.

next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md

- Tabs: Team Members / Team Details / Activity Log - KPI stat row - Member table (avatar + 角色 + 状态) - Role distribution bar chart - Online presence + activity sparklines - Top contributors panel

The three-tab responsibilities are hardcoded to avoid generating a navigation-less 'blob of cards'.

Interaction details are explicitly listed: light/dark toggle, hover tooltips, click-to-zoom panels, and a 'CSV export button (frontend implementation)'—meaning export is generated entirely browser-side without hitting the server.

next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md

- light/dark 切换, hover tooltip, click-to-zoom panels - CSV export 按钮 (前端实现)

Both interactions and exports are explicitly specified in the template, yielding a usable UI rather than a static image.

Positioned intentionally as a FlowAI aesthetic team management admin page, meaning layout and palette follow the shared instruction layer while this template handles only the backend information architecture.

next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md

【意图】FlowAI 美学的团队管理 admin 单页。

Aesthetics are delegated to the shared instruction layer; this template only manages the admin information architecture.

Canvas specification targets desktop 1440 (aspect_hint), selector metadata is category=dashboard, scenario=operations, and tags are flowai/team/members.

next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md

aspect_hint: "桌面 1440"

Desktop 1440 is the only dashboard template in this batch with an explicit resolution constraint.

The example.html of this skill is merely an iframe shell pointing to ./assets/template.html; since that file does not exist in the pinned commit, the preview route returns this shell verbatim, causing an iframe 404.

next/src/lib/templates/skills/flowai-team-dashboard/example.html

<iframe src="./assets/template.html" title="FlowAI Team Dashboard Example"></iframe>

This implementation gap was confirmed during the second pass using git ls-files (see verification for details).

2Core Capabilities

01Three-tab admin information architecture (Members / Details / Activity Log)

02KPI stat row + member table (avatar, role, status)

03Role distribution bar chart

04Online status + activity sparklines

05Top contributors panel

06Interactions: light/dark toggle, hover tooltips, click-to-zoom

07CSV export button (declared as frontend implementation)

08Selector keywords: team dashboard / flow / 工单 / ticket / flowai

3External Dependencies

Kind	Dependency / Endpoint
network	Tailwind / Google Fonts 由共享指令层强制（本模板 SKILL.md 未提 CDN；示例壳自身零外链）
network	FlowAI 品牌/美学参照（仅出现于正文命名，无端点位）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text, without script execution or external side effects

Audit Notes: The evaluation target is this skill directory itself (standard: what actually happens when executed according to SKILL.md): SKILL.md consists purely of prompt text, accompanied by example.md/example.html as samples and preview mockups. The directory contains no scripts, no runtime network calls, no credential reading, and no file writes on the agent side; SKILL.md also specifies no external generation/service backend (contrasting with orange precedents ai-image-generation / seedance: the latter send assets to external generation backends and consume account quotas; this template does not transmit assets externally). Non-rating explanatory notes: example.html inside the directory links externally to cdn.tailwindcss.com and fonts.googleapis.com (batch 4 standard: external links in example.html are artifact demonstrations and are not rated); the shared instruction layer similarly requires output to include CDN references to Tailwind and Google Fonts in the head (- 在 `<head>` 中通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。), which is host-shell behavior. Host background (excluded from rating, see verdict.risks): preview iframe uses sandbox="allow-scripts allow-same-origin"; host runs the agent in full-permission mode ("bypassPermissions", / "--yolo",). Additional note: this skill directory lacks example.md, and example.html points to a non-existent assets/template.html (preview 404, see verification); neither affects the risk tier.

5Second-Pass Verification

[ok] 三 tab / 布局宣称 — 重读 SKILL.md【布局】6 条与 JSON 引用逐字一致。
[ok] 『CSV 导出前端实现』 — SKILL.md【设计细节】确写『CSV export 按钮 (前端实现)』；对目录做 createObjectURL/download=/Blob 扫描零命中——模板声明了该能力，实现由生成的页面自行承担。
[discrepancy] 预览样张可用性 — example.html 仅含 <iframe src="./assets/template.html">，而该 pin 的 skill 目录（git ls-files 复核）只有 SKILL.md 与 example.html，无 assets 目录。结论：选择器/详情页预览会 404，样张缺失。
[ok] featured/recommended 缺失的影响 — loader 只在 if (typeof fm.featured === "number") meta.featured = fm.featured; 时写 meta.featured，故本 skill 不进推荐位——与 README showcase（按 recommended 排的 8 个）中确无 flowai-team-dashboard 相互印证。
[ok] 安全面 — 目录内 2 个文件无脚本/凭证/写盘/网络调用 token；示例壳无外链。
[ok] meta 元数据 — GitHub API 实查 stars=8827、pushed_at=2026-09-15T03:36:24Z、license Apache-2.0。
[unlocatable] 安装量 — 无公开安装量数据源，installs=null。

6Verdict & Scenarios

Concrete admin information architecture: three-tab breakdown + KPI row + member table + role distribution + online sparklines + Top contributors, directly addressing common team management dashboard requirements.

Rarely includes explicit interactive states (light/dark, hover tooltips, click-to-zoom) and client-side CSV export in the template, making output closer to a usable UI than a static image.

Aligns with prototype/office among the 9 surfaces in README, with wide keyword hit coverage (team dashboard/flow/工单/ticket/flowai).

Best for: Ideal for scenarios requiring an internal team management admin UI wireframe/prototype (member management, role distribution, activity logs), especially for teams looking to generate a single-page demo with interactive states and an export button in one shot.

Not for: Not suitable for scenarios requiring real backend data integration (the template does not implement a data layer); not suitable for users who want to review official preview output first—preview samples for this skill are missing in this version (404); also not suitable for non-desktop viewports (aspect_hint explicitly targets desktop 1440).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload flowai-team-dashboard.tar.gz

sha256: 2b713fbcbced0b31…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.