# Codemie AI Codemie Code Codemie Code > CodeMie HTML Report Builder - Skill: `tomevault-io/codemie-ai-codemie-code-codemie-code` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/codemie-ai-codemie-code-codemie-code` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/codemie-ai-codemie-code-codemie-code/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/codemie-ai-codemie-code-codemie-code --- # 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 ` ``` For light theme, add `class="light"` to the `` 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

Report Title

Generated on 2024-03-15

``` ### B) Full app mockup (sidebar + content) Use the app-shell layout when simulating a full CodeMie screen: ```html
``` ### C) Centered content (login, error, empty state) ```html
``` ## Step 4 — Build with components Use the library classes. Here are the most common patterns for reports: ### Metric / KPI section ```html
TOTAL USERS 10,761 All registered accounts
``` ### Data table ```html
Name Status Score
John Doe Active 92.5
``` ### Section with card ```html
Section Title
``` ### Tabs for different views ```html
``` ### Key-value details ```html
Project
CodeMie Platform
Status
Active
Owner
Jane Smith
Created
2024-01-15
``` ### Alert / info banner ```html
This report was generated automatically. Data reflects the last 30 days.
``` ### Pagination (below a table) ```html ``` ## 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** — `` for data, `