--- 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 ` ``` 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, `