codemie-html-report

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:

/* __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.

<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.