New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

HTML Report Design System

by OWWZO in OWWZO/ai-agent

Create polished, interactive, mobile-friendly HTML reports using the AllyHub-style report design system.

No licenceAuto-check passedFrontend & Design

Install HTML Report Design System

skills CLI
$ npx skills add OWWZO/ai-agent --skill html-report-design-system -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install OWWZO/ai-agent html-report-design-system --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/OWWZO/ai-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/runtime/skills/html-report-design-system .claude/skills/html-report-design-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-report-design-system
GitHub stars
189
Token cost
~2.7k tokens
SKILL.md length
1,256 words
Files
1
Skills in repo
17
Repo updated
First seen
Licence
None found

At a glance

Create polished, interactive, mobile-friendly HTML reports using the AllyHub-style report design system.

  • Works in 10 steps: Decide the report shape → Required visual tokens → Page shell and responsive behavior → …
  • The user asks for an HTML report
  • SKILL.md covers 1. Decide the report shape, 2. Required visual tokens, 3. Page shell and responsive… and 4. Hero and footer, plus 6 more sections
  • Reaches allyhub.com and cdn.jsdelivr.net

What it does

HTML Report Design System is an agent skill from OWWZO/ai-agent. Create polished, interactive, mobile-friendly HTML reports using the AllyHub-style report design system. Use this skill whenever the user asks for an HTML report, interactive research/analysis page, source-backed visual summary, dashboard-like report page, or wants to apply the provided blue/sage/sand/rose/slate/moss/plum/ember/mist/clay report format. It covers visual tokens, layout, cards, charts, citations, responsive behavior, animation, and source-level validation; prefer it even when the user says only “做成…

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Requires a writable workspace for the final HTML. Chart.js may be loaded from cdnjs when charts are needed. Do not depend on opening the generated HTML for…

It sits in Frontend & Design, covering Design systems, Citation management and Infographics. The repository describes itself as: 一个面向全网研究与复杂数据分析的云端智能体，能在公开网络、YouTube、BiliBili、X、小红书、Hacker News上研究任何主题 。项目wiki：https://zread.ai/OWWZO/ai-agent.

When your agent uses it

  • The user asks for an HTML report
  • Interactive research/analysis page
  • Source-backed visual summary
  • Dashboard-like report page

Example prompts

  • “做成 HTML 报告”
  • “/html-report-design-system”

Requirements

  • Compatibility (from SKILL.md): Requires a writable workspace for the final HTML. Chart.js may be loaded from cdnjs when charts are needed. Do not depend on opening the generated HTML for validation.

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Decide the report shape
  2. Required visual tokens
  3. Page shell and responsive behavior
  4. Hero and footer
  5. Core components
  6. Charts and interaction
  7. Sources and citation rules
  8. Content and accessibility
  9. Validation before delivery
  10. Delivery

What it can do on your machine

Read from SKILL.md and the folder at commit 09d002b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css and html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • allyhub.com
    • cdn.jsdelivr.net

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires a writable workspace for the final HTML. Chart.js may be loaded from cdnjs when charts are needed. Do not depend on opening the generated HTML for validation.

    From compatibility in the SKILL.md frontmatter.

Context cost

HTML Report Design System loads about 2.7k tokens when it runs. Until then it costs about 145 tokens; SKILL.md has 1,256 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~145
When it runs · the whole SKILL.md, loaded when a task matches
~2.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 1,256 words (~2,651 tokens).

“Use this skill to turn research, analysis, structured reference material, and data summaries into a self-contained, polished HTML report. The report should feel like a compact editorial/data product rather than a raw document: clear hierarchy, meaningful interactivity, restrained decoration, and…”

— opening of SKILL.md by OWWZO
name
html-report-design-system
compatibility
Requires a writable workspace for the final HTML. Chart.js may be loaded from cdnjs when charts are needed. Do not depend on opening the generated HTML for validation.

Read the full SKILL.md on GitHub

Files

Just SKILL.md in runtime/skills/html-report-design-system of OWWZO/ai-agent.

Open the folder on GitHubat commit 09d002b

Compare with similar skills

HTML Report Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HTML Report Design System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Report Design System this skillOWWZO/ai-agent189—~2.7kAutomated safety check: PassNone
UI DesignAnastasiyaW/codex-claude-code-config154—~2.4kAutomated safety check: PassMIT
HTML DesignNimaChu/html-design101—~2.7kAutomated safety check: PassNone
Exec Reportpnp/sharepoint-skills133—~2kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0

Similar skills

  • UI Design

    AnastasiyaW/codex-claude-code-config

    Unify product UI design, frontend implementation, and verification.

    154 GitHub stars~2.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • HTML Design

    NimaChu/html-design

    Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables.

    101 GitHub stars~2.7k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Exec Report

    pnp/sharepoint-skills

    Generates a polished, self-contained HTML executive report or dashboard from any data source — SharePoint lists, CSV exports, or a user description.

    133 GitHub stars~2k tokensUpdated yesterday
    Documents & OfficeAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

More from OWWZO/ai-agent

All 17 skills in this repo

  • Threejs Animation

    OWWZO/ai-agent

    Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing.

    189 GitHub starsUsed in 6 repos~3.1k tokens
    Auto-check passed

  • Answer Me With HTML

    OWWZO/ai-agent

    Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page.

    189 GitHub starsUsed in 1 repo~4.1k tokens
    Auto-check passed

  • Gpt Image 2 Style Library

    OWWZO/ai-agent

    Choose GPT-Image2 / gpt-image-2 visual styles and industrial prompt templates from the awesome-gpt-image-2 style library.

    189 GitHub starsUsed in 1 repo~881 tokens
    Auto-check passed

  • Threejs Fundamentals

    OWWZO/ai-agent

    Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems.

    189 GitHub starsUsed in 5 repos~2.9k tokens
    Auto-check passed

  • Guizang Ppt Skill

    OWWZO/ai-agent

    生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风…

    189 GitHub starsUsed in 2 repos~6.3k tokens
    Auto-check passed

  • Threejs Geometry

    OWWZO/ai-agent

    Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing.

    189 GitHub starsUsed in 5 repos~3.5k tokens
    Auto-check passed

Categories

Questions about HTML Report Design System

What does HTML Report Design System do?

Create polished, interactive, mobile-friendly HTML reports using the AllyHub-style report design system. HTML Report Design System is an agent skill from OWWZO/ai-agent. Create polished, interactive, mobile-friendly HTML reports using the AllyHub-style report design system.

When should I use HTML Report Design System?

HTML Report Design System fits situations like: the user asks for an HTML report; interactive research/analysis page; source-backed visual summary; dashboard-like report page.

How do I install HTML Report Design System in Claude Code?

Run `npx skills add OWWZO/ai-agent --skill html-report-design-system -a claude-code`. Or copy the skill folder (runtime/skills/html-report-design-system in OWWZO/ai-agent) into .claude/skills/html-report-design-system in your project. Claude Code loads it when a task matches its description.

How do I install HTML Report Design System in Codex?

Run `npx skills add OWWZO/ai-agent --skill html-report-design-system -a codex`. Or copy the skill folder (runtime/skills/html-report-design-system in OWWZO/ai-agent) into .agents/skills/html-report-design-system in your project. Codex loads it when a task matches its description.

Can I use HTML Report Design System in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add OWWZO/ai-agent --skill html-report-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-report-design-system, .gemini/skills/html-report-design-system, .github/skills/html-report-design-system and .opencode/skills/html-report-design-system in your project.

What does HTML Report Design System need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Report Design System is instructions for the agent only. Compatibility (from SKILL.md): Requires a writable workspace for the final HTML. Chart.js may be loaded from cdnjs when charts are needed. Do not depend on opening the generated HTML for validation..

Does HTML Report Design System access the network?

SKILL.md names 2 domains. In commands or code: allyhub.com and cdn.jsdelivr.net; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is HTML Report Design System safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HTML Report Design System use?

No licence was found for HTML Report Design System or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does HTML Report Design System use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HTML Report Design System?

Skills that share tags, products or a category with HTML Report Design System: UI Design (AnastasiyaW/codex-claude-code-config, 154 stars), HTML Design (NimaChu/html-design, 101 stars), Exec Report (pnp/sharepoint-skills, 133 stars) and Impeccable (bestofjs/bestofjs, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Report Design System?

OWWZO (a GitHub user) maintains it in OWWZO/ai-agent, which has 189 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 9, 2026.

Source: OWWZO/ai-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.