Agent skill

Codemie HTML Report

by codemie-ai in codemie-ai/codemie-code

Build static HTML pages, reports, dashboards, and mockups that match the CodeMie UI design system.

Apache-2.0Auto-check passedFrontend & Design

Install Codemie HTML Report

skills CLI
$ npx skills add codemie-ai/codemie-code --skill codemie-html-report -a claude-code

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

GitHub CLI
$ gh skill install codemie-ai/codemie-code codemie-html-report --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/codemie-ai/codemie-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/src/agents/plugins/claude/plugin/skills/codemie-html-report .claude/skills/codemie-html-report && 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
codemie-html-report
GitHub stars
294
Token cost
~3.3k tokens
SKILL.md length
1,068 words
Files
13 (incl. scripts)
Skills in repo
9
Repo updated
First seen
Licence
Apache-2.0

At a glance

Build static HTML pages, reports, dashboards, and mockups that match the CodeMie UI design system.

  • Works in 5 steps: CSS placeholder → 5 — Data placeholders (analytics… → Page skeleton (fully self-contained) → …
  • The user asks to create an HTML report
  • SKILL.md covers Step 1 — CSS placeholder, Step 1.5 — Data placeholders…, Step 2 — Page skeleton (fully… and Step 3 — Pick a layout, plus 7 more sections
  • Runs JavaScript scripts from its folder; calls node

What it does

Codemie HTML Report is an agent skill from codemie-ai/codemie-code. Build static HTML pages, reports, dashboards, and mockups that match the CodeMie UI design system. Use this skill whenever the user asks to create an HTML report, dashboard, analytics page, status page, data visualization page, or any static HTML document that should look like the CodeMie/EPAM AI/Run product. Also use it when the user says "make it look like CodeMie", "use the style guide", "dark-themed report", "CodeMie styles", or references the style-guide directory. Trigger for any HTML output task in a…

Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including scripts (for example `README.md`, `scripts/inject-css.js` and `scripts/inject-data.js`).

It sits in Frontend & Design, covering HTML artifacts, UI design and Data visualization. The repository describes itself as: AI Run CodeMie CLI with analytics capabilities. The licence is Apache-2.0.

When your agent uses it

  • The user asks to create an HTML report
  • Data visualization page
  • Any static HTML document that should look like the CodeMie/EPAM AI/Run product
  • The user says make it look like CodeMie

Example prompts

  • “make it look like CodeMie”
  • “use the style guide”
  • “dark-themed report”
  • “/codemie-html-report”

Requirements

  • Node.js

Workflow steps

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

  1. CSS placeholder
  2. 5 — Data placeholders (analytics pipeline only — skip for standalone use)
  3. Page skeleton (fully self-contained)
  4. Pick a layout
  5. Build with components

What it can do on your machine

Read from SKILL.md and the folder at commit 0218c8d. 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

    Ships 2 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

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

  • Network

    No URLs in SKILL.md.

    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.

Context cost

Codemie HTML Report loads about 3.3k tokens when it runs. Until then it costs about 229 tokens; SKILL.md has 1,068 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from codemie-ai/codemie-code at commit 0218c8d, republished under its Apache-2.0 licence (© codemie-ai). 1,068 words, ~3,313 tokens.

Download SKILL.mdSave it as .claude/skills/codemie-html-report/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
codemie-html-report
description
Build static HTML pages, reports, dashboards, and mockups that match the CodeMie UI design system. Use this skill whenever the user asks to create an HTML report, dashboard, analytics page, status page, data visualization page, or any static HTML document that should look like the CodeMie/EPAM AI/Run product. Also use it when the user says "make it look like CodeMie", "use the style guide", "dark-themed report", "CodeMie styles", or references the style-guide directory. Trigger for any HTML output task in a project that includes the style-guide folder. IMPORTANT: This skill MUST be used for ALL HTML generation requests — whenever a user asks for an HTML report, HTML analysis output, HTML dashboard, HTML visualization, or any HTML document. Claude must always use this skill to generate HTML in CodeMie styles to ensure consistent, professional, branded output across all HTML artifacts.

CodeMie HTML Report Builder

You are building a standalone HTML page that visually matches the CodeMie (EPAM AI/Run) product UI. The design system is a dark-first, professional theme with Inter font, subtle borders, and semantic color tokens. Every page you produce should feel like a native screen of the CodeMie platform.

Step 1 — CSS placeholder

Do NOT read any CSS files. Do NOT inline any CSS yourself.

In the <style> block write exactly this one token as the only content:

css
/* __CODEMIE_CSS__ */

A post-processing script will replace this token with the full design system CSS after you write the file. All component classes are documented in Steps 3 and 4 — use them freely without reading the source files.

Step 1.5 — Data placeholders (analytics pipeline only — skip for standalone use)

Backwards compatibility: This step applies only when this skill is invoked from the codemie-analytics skill as part of its report pipeline. If you are generating a standalone HTML page directly for a user request, skip this step entirely and embed any data inline as regular JS variables.

When invoked from codemie-analytics, all JS data arrays must use /*__DATA:name__*/ placeholders instead of inline values. The analytics skill's inject-data.js step replaces these after the HTML file is written.

html
<script>
  /* Data is injected by inject-data.js after this file is written — do NOT hardcode arrays */
  const LEADERBOARD = /*__DATA:leaderboard-top__*/;
  const SUMMARIES   = /*__DATA:summaries__*/;
  const LLM_DATA    = /*__DATA:llms-usage__*/;
</script>

Rules for analytics-pipeline placeholders:

  • The placeholder name must exactly match the JSON filename without the .json extension. /*__DATA:leaderboard-top__*/ is only replaced when leaderboard-top.json exists. Wrong name → the placeholder is silently skipped by inject-data.js.
  • Every JS variable populated from an API response must use a placeholder.
  • Hardcoded lookup tables (tier colours, dimension labels, etc.) are fine as regular JS.
  • Never mix placeholders with inline data in the same variable declaration.

Step 2 — Page skeleton (fully self-contained)

CRITICAL: Every HTML file you produce must be a single self-contained file. Do NOT use <link> tags. Write the /* __CODEMIE_CSS__ */ placeholder in the <style> block — the inject-css.js script will inline the full design system CSS after you write the file.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PAGE TITLE</title>
  <style>
    /* __CODEMIE_CSS__ */
    /* === Page-specific styles (use CSS variables, not hex colors) === */
  </style>
</head>
<body>
  <!-- content -->
</body>
</html>

For light theme, add class="light" to the <html> tag. Dark is the default.

The resulting file must open correctly when copied to any machine with no local dependencies other than internet access for fonts.

Step 3 — Pick a layout

Choose the layout that fits the content:

A) Report / Dashboard (most common)

Use a simple page with a container — no app shell needed:

html
<body class="p-6">
  <div class="container">
    <h1>Report Title</h1>
    <p class="text-muted mb-4">Generated on 2024-03-15</p>
    <!-- sections -->
  </div>
</body>
B) Full app mockup (sidebar + content)

Use the app-shell layout when simulating a full CodeMie screen:

html
<div class="app-shell">
  <div class="app-navbar"><!-- 72px icon rail --></div>
  <div class="app-sidebar"><!-- 308px sidebar --></div>
  <div class="app-content">
    <div class="app-header"><!-- 56px top bar --></div>
    <main class="app-main"><!-- scrollable content --></main>
  </div>
</div>
C) Centered content (login, error, empty state)
html
<body class="flex items-center justify-center min-h-screen">
  <div class="max-w-md w-full p-6"><!-- centered card --></div>
</body>

Step 4 — Build with components

Use the library classes. Here are the most common patterns for reports:

Metric / KPI section
html
<div class="stat-grid">
  <div class="stat-card">
    <span class="stat-card-label">TOTAL USERS</span>
    <span class="stat-card-value">10,761</span>
    <span class="stat-card-desc">All registered accounts</span>
  </div>
  <!-- more stat-cards -->
</div>
Data table
html
<div class="table-wrapper">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
        <th class="td-number">Score</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td><span class="badge badge-success"><span class="badge-dot"></span>Active</span></td>
        <td class="td-number">92.5</td>
      </tr>
    </tbody>
  </table>
</div>
Section with card
html
<div class="card mt-4">
  <div class="card-header">
    <div class="card-title">Section Title</div>
    <button class="btn btn-secondary btn-sm">Action</button>
  </div>
  <div class="card-body">
    <!-- content -->
  </div>
</div>
Tabs for different views
html
<div class="tabs">
  <div class="tabs-list">
    <button class="tab-item active">Overview</button>
    <button class="tab-item">Details</button>
    <button class="tab-item">History</button>
  </div>
  <div class="tabs-panel">
    <!-- active tab content -->
  </div>
</div>
Key-value details
html
<dl class="dl-grid">
  <dt>Project</dt>    <dd>CodeMie Platform</dd>
  <dt>Status</dt>     <dd><span class="badge badge-success"><span class="badge-dot"></span>Active</span></dd>
  <dt>Owner</dt>      <dd>Jane Smith</dd>
  <dt>Created</dt>    <dd>2024-01-15</dd>
</dl>
Alert / info banner
html
<div class="alert alert-info">
  This report was generated automatically. Data reflects the last 30 days.
</div>
Pagination (below a table)
html
<div class="pagination">
  <span class="pagination-info">Showing 1-20 of 84</span>
  <button class="page-btn disabled">&laquo;</button>
  <button class="page-btn active">1</button>
  <button class="page-btn">2</button>
  <button class="page-btn">3</button>
  <button class="page-btn">&raquo;</button>
</div>

Design rules

These rules ensure visual consistency with the CodeMie product:

  1. Always use CSS variables for colors — never hardcode hex values. This keeps the page compatible with both dark and light themes. Example: color: var(--color-text-primary) not color: #FFFFFF.

  2. Use the provided component classes — the library already handles border-radius, padding, font-size, hover states. Don't re-invent card or button styles with inline CSS.

  3. Use semantic HTML — <table> for data, <button> for actions, <nav> for navigation, <label> for form fields. Never use <div> where an interactive element belongs.

  4. Font stack — Inter is the primary font (loaded via Google Fonts in tokens.css). JetBrains Mono for code. These are included automatically through the stylesheet import.

  5. Spacing — Use utility classes (p-4, mt-2, gap-3, mb-4) or CSS variables (var(--space-4)) for custom spacing. The spacing scale is: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px.

  6. Border radius — Cards use --radius-xl (12px). Inputs/buttons use --radius-lg (8px). Badges use --radius-full. Small elements use --radius-sm (4px) or --radius-md (6px).

  7. Typography — Body text is 14px (--text-sm). Small text is 12px (--text-xs). Headings: h1=32px, h2=24px, h3=16px, h4=14px. Always use the heading classes or elements.

  8. Page background — The main page background is --color-bg-page (#1A1A1A dark / #F9F9F9 light). Cards sit on --color-bg-card (#151515 dark / #FFFFFF light). These are handled by the body style and .card class automatically.

  9. Borders — Default border is --color-border-structural (#333436 dark / #E5E5E5 light). Use the .border utility class or border: 1px solid var(--color-border-structural).

  10. Status colors — Use badge variants for status: badge-success (green), badge-error (red), badge-warning (yellow/orange), badge-in-progress (blue), badge-pending (cyan), badge-advanced (purple), badge-not-started (gray).

Show full SKILL.md (363 more words)Show less

Charts and graphs

The style guide does not include a charting library. If the report needs charts:

  • Use Chart.js (recommended) or any lightweight chart library via CDN
  • Match the chart's color palette to the design tokens:
    • Primary blue: #2297F6
    • Purple: #C084FC
    • Green: #259F4C
    • Red: #F9303C
    • Yellow: #F5A534
    • Cyan: #06B6D4
  • Set chart background to transparent
  • Use var(--color-text-muted) for axis labels and grid lines
  • Wrap charts in a .card for consistent framing

Putting it together — a typical report structure

body.p-6 > .container
  h1           (report title)
  p.text-muted (subtitle / date)

  .alert.alert-info  (optional context banner)

  .stat-grid         (KPI summary cards)
    .stat-card x N

  .card.mt-4         (main data section)
    .card-header > .card-title + action buttons
    .card-body
      .table-wrapper > table.table
      .pagination

  .card.mt-4         (another section)
    .card-header > .card-title
    .card-body
      .tabs > .tabs-list + .tabs-panel

  .card.mt-4         (details section)
    .card-body > dl.dl-grid

This pattern matches the analytics dashboard layout in the live CodeMie product and works for most reporting use cases.

Final Step — Inject CSS

After writing the HTML file, run this command to replace the placeholder with the full design system bundle and make the report self-contained:

bash
node ${CLAUDE_PLUGIN_ROOT}/skills/codemie-html-report/scripts/inject-css.js <path-to-the-html-file-you-just-wrote>

For example:

bash
node ${CLAUDE_PLUGIN_ROOT}/skills/codemie-html-report/scripts/inject-css.js reports/leaderboard-2026-Q1.html

Expected output: ✓ CSS injected into reports/leaderboard-2026-Q1.html

Final Step — Inject Data (analytics pipeline only — skip for standalone use)

This step applies only when invoked from the codemie-analytics skill. Standalone HTML generation embeds data inline and must skip this step.

After the HTML file is written, run inject-data.js to replace every /*__DATA:name__*/ placeholder with the matching JSON file from the temp directory:

bash
node ${CLAUDE_PLUGIN_ROOT}/skills/codemie-html-report/scripts/inject-data.js \
  <path-to-html> <temp-dir>

For example:

bash
node ${CLAUDE_PLUGIN_ROOT}/skills/codemie-html-report/scripts/inject-data.js \
  reports/2026-05-07-leaderboard/leaderboard.html \
  reports/2026-05-07-leaderboard/temp/

Placeholder names must exactly match the JSON filenames (without .json):

  • /*__DATA:leaderboard-top__*/ is replaced from leaderboard-top.json
  • /*__DATA:summaries__*/ is replaced from summaries.json

A wrong name means the placeholder is silently skipped. If no placeholders are matched at all, the script exits with an error.

Expected output:

  ✓ injected leaderboard-top
  ✓ injected summaries
✓ 2 data block(s) injected into reports/2026-05-07-leaderboard/leaderboard.html

Do not run inject-data.js before the HTML file exists. Run inject-css.js after inject-data.js.

Final Step — Temp file cleanup (analytics pipeline only — skip for standalone use)

Backwards compatibility: This step applies only when this skill is invoked from the codemie-analytics skill. Standalone HTML generation has no temp directory and must skip this step.

After the CSS is injected and the report is complete, always ask the user:

The report is ready at <path>. The temp/ directory (<OUT>) contains the raw API response files used to build it (~N files). Would you like to delete it?

If the user says yes, delete the temp directory:

bash
rm -rf "<OUT>"
# e.g. rm -rf "reports/2026-05-07-executive-spending/temp"

Confirm deletion:

✓ Temp files deleted → reports/2026-05-07-executive-spending/temp

If the user says no (or does not respond), leave the directory intact and note its location so they can inspect or re-use the raw data later.

© codemie-ai, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (scripts) in src/agents/plugins/claude/plugin/skills/codemie-html-report of codemie-ai/codemie-code.

  • SKILL.md
  • README.md
  • scripts/inject-css.js
  • scripts/inject-data.js
  • style-guide/css/base.css
  • style-guide/css/bundle.css
  • style-guide/css/buttons.css
  • style-guide/css/components.css
  • style-guide/css/forms.css
  • style-guide/css/layout.css
  • style-guide/css/tokens.css
  • style-guide/css/typography.css
  • style-guide/css/utilities.css

Open the folder on GitHubat commit 0218c8d

Compare with similar skills

Codemie HTML Report 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.

Codemie HTML Report compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Codemie HTML Report this skillcodemie-ai/codemie-code294—~3.3kAutomated safety check: PassApache-2.0
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
HTMLplannotator/effective-html3.6k—~1.6kAutomated safety check: PassMIT
Web Design EngineerConardLi/garden-skills13k—~8.8kAutomated safety check: PassMIT
Single-File UI Design ExplorationJayZeeDesign/awesome-claude-skills171—~493Automated safety check: PassNone
UI Mockupmvschwarz/openrig5.9k—~654Automated safety check: PassApache-2.0

Similar skills

  • Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed
  • HTML

    plannotator/effective-html

    Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.

    3.6k GitHub stars~1.6k tokensUpdated 23 days ago
    Frontend & DesignAuto-check passed
  • Web Design Engineer

    ConardLi/garden-skills

    Builds polished browser-rendered HTML, CSS, JavaScript and React pages, dashboards, prototypes and slide decks, aiming for a stunning rather than merely functional result.

    13k GitHub stars~8.8k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Single-File UI Design Exploration

    JayZeeDesign/awesome-claude-skills

    Produces one self-contained HTML and Tailwind mockup for UI inspiration, with detailed rules on fonts, icons, dark versus light mode and chart handling.

    171 GitHub stars~493 tokensUpdated 11 mo ago
    Frontend & DesignAuto-check passed
  • UI Mockup

    mvschwarz/openrig

    Create UI mockups at three fidelity levels — ASCII wireframes for quick iteration, standalone HTML mockups for delivery with requirements, and live prototypes for interaction testing.

    5.9k GitHub stars~654 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Report With HTML

    daymade/claude-code-skills

    Produces the reader-facing HTML artifact — report, dashboard, architecture view, data browser, or review workbench — evidence-backed, browser-verified.

    1.4k GitHub stars~11k tokensUpdated today
    Frontend & DesignAuto-check passed

More from codemie-ai/codemie-code

All 9 skills in this repo
  • Codemie Analytics

    codemie-ai/codemie-code

    CodeMie Analytics expert — use this skill whenever the user asks about CodeMie usage data, AI adoption metrics, user leaderboards, CLI insights, spending, LiteLLM costs, token usage, or wants to…

    294 GitHub stars~7.5k tokensUpdated yesterday
    Auto-check passed
  • Msgraph

    codemie-ai/codemie-code

    Work with Microsoft 365 services via the Graph API — emails, calendar events, SharePoint sites (read and write), Teams chats and channel messages, OneDrive files, OneNote notebooks, Planner task…

    294 GitHub stars~4.1k tokensUpdated yesterday
    Auto-check passed
  • Codemie Assistant Builder

    codemie-ai/codemie-code

    Build, test and autonomously improve CodeMie platform assistants.

    294 GitHub stars~3.3k tokensUpdated yesterday
    Auto-check passed
  • Codemie Release

    codemie-ai/codemie-code

    Release a new version of CodeMie CLI. An agent skill from codemie-ai/codemie-code.

    294 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed
  • Report Issue

    codemie-ai/codemie-code

    This skill should be used when the user wants to report a bug, file an issue, or suggest a feature for the CodeMie Code CLI tool (codemie-ai/codemie-code repository on GitHub).

    294 GitHub stars~2.3k tokensUpdated yesterday
    Auto-check: notes
  • Codemie Jira Assistant

    codemie-ai/codemie-code

    Business Analyst Assistant - expert to work with Jira. An agent skill from codemie-ai/codemie-code.

    294 GitHub stars~489 tokensUpdated yesterday
    Auto-check passed

Questions about Codemie HTML Report

What does Codemie HTML Report do?

Build static HTML pages, reports, dashboards, and mockups that match the CodeMie UI design system. Codemie HTML Report is an agent skill from codemie-ai/codemie-code. Build static HTML pages, reports, dashboards, and mockups that match the CodeMie UI design system.

When should I use Codemie HTML Report?

Codemie HTML Report fits situations like: the user asks to create an HTML report; data visualization page; any static HTML document that should look like the CodeMie/EPAM AI/Run product; the user says make it look like CodeMie.

How do I install Codemie HTML Report in Claude Code?

Run `npx skills add codemie-ai/codemie-code --skill codemie-html-report -a claude-code`. Or copy the skill folder (src/agents/plugins/claude/plugin/skills/codemie-html-report in codemie-ai/codemie-code) into .claude/skills/codemie-html-report in your project. Claude Code loads it when a task matches its description.

How do I install Codemie HTML Report in Codex?

Run `npx skills add codemie-ai/codemie-code --skill codemie-html-report -a codex`. Or copy the skill folder (src/agents/plugins/claude/plugin/skills/codemie-html-report in codemie-ai/codemie-code) into .agents/skills/codemie-html-report in your project. Codex loads it when a task matches its description.

Can I use Codemie HTML Report 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 codemie-ai/codemie-code --skill codemie-html-report -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/codemie-html-report, .gemini/skills/codemie-html-report, .github/skills/codemie-html-report and .opencode/skills/codemie-html-report in your project.

What does Codemie HTML Report need to run?

Going by SKILL.md and its folder, Codemie HTML Report needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.

Does Codemie HTML Report access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Codemie HTML Report 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Codemie HTML Report use?

Codemie HTML Report is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Codemie HTML Report use?

About 3.3k tokens (SKILL.md is roughly 13k 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 Codemie HTML Report?

Skills that share tags, products or a category with Codemie HTML Report: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), HTML (plannotator/effective-html, 3.6k stars), Web Design Engineer (ConardLi/garden-skills, 13k stars) and Single-File UI Design Exploration (JayZeeDesign/awesome-claude-skills, 171 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Codemie HTML Report?

codemie-ai (a GitHub user) maintains it in codemie-ai/codemie-code, which has 294 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 7, 2026.

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