comp-html-guidelines

name

comp-html-guidelines

description

Default skill for ALL HTML outputs from Comp skills. A lightweight, self-contained visual style guide (Comp palette black #1F1B17 + red #F4364C, DM Sans, near-white background, white cards, pill buttons, hero cover, Powered by Comp footer). MUST be loaded whenever a skill produces HTML, for any relatório, página, análise, dashboard, qualquer variação de "faça/crie um html", and for any "apply the design" / "estiliza" / "padroniza" / "deixa isso bonito" request on existing HTML. Apply it even when the user does not ask explicitly. Maintained by Comp, free skill for HR & People leaders.

Comp HTML Guidelines

A lightweight, self-contained visual style guide for every HTML report, page, dashboard, or analysis produced by a Comp skill. Load it whenever you are about to write or restyle HTML so the result is consistent, polished, and on-brand. It does not change the methodology of the calling skill, it governs only the visual layer.

This is a Knowledge skill. The full rules live in references/style-guide.md and a ready-to-inline stylesheet lives in assets/comp-base.css. Read the style guide before writing HTML.

When to use

• Generate — creating a new HTML report from scratch. Load references/style-guide.md, inline assets/comp-base.css, then build.
• Apply — the user has existing HTML and wants it styled ("estiliza", "padroniza", "deixa isso bonito", "apply the design"). Load the style guide and re-skin the markup, keeping the content.
• Consult — a question about a specific rule (color, layout, footer, chart). Answer from references/style-guide.md.

The look in one paragraph

Near-white background (#FAFAF8), content in white cards with a hairline border and soft radius. Comp black (#1F1B17) for text and the hero, Comp red (#F4364C) as the single accent. DM Sans for everything. Generous spacing (24px rhythm). A hero band at the top with the report title and a short subtitle; a "Powered by Comp" footer at the bottom. One accent color only, semantic green/amber/red reserved for good/warning/bad states. No gradients, no decorative icons, no rainbow palettes.

How to build

1. Read references/style-guide.md in full.
2. Start from the base scaffold in the style guide and inline assets/comp-base.css inside a <style> tag (copy it, do not link to a CDN for it).
3. Load DM Sans from Google Fonts and a charting library (Chart.js) from a CDN if you need charts.
4. Build the hero, then the content as cards / tables / stat cards, then the footer.
5. Run the self-review checklist at the end of the style guide before delivering.

Escaping user data — required

Reports often embed data that originates from a user upload (names, areas, managers, free-text comments). When you inject any user-derived string into HTML — whether server-side in a script or client-side via innerHTML — escape it first (& < > " '). Never interpolate raw user text into markup. A name like <img src=x onerror=...> must render as literal text, not execute. When embedding a data blob in a <script> tag, also neutralize </ (write it as <\/) so a value cannot close the script element.

Completeness

Deliver the finished report the user asked for, not a sample or "v1". If the content is large, write it in full. If you cannot produce part of it, say so in your reply rather than shipping a placeholder card.

Brand

• Hero: report title + subtitle. For a report about a specific company, use the logo URL and brand color the user provides; if none, use the company's initial in a tile. Never fabricate a logo.
• Footer: a "Powered by Comp" line linking to comp.vc with UTM params (see the style guide for the exact link). If you show the Comp logo mark, use the bundled inline SVG (assets/comp-wordmark-white.svg on dark/red, assets/comp-wordmark-red.svg on light) — never a scaled raster, a color-filtered PNG, or a hand-drawn mark (those come out jagged/off-brand). Style guide §7.

Resources

File	Purpose
references/style-guide.md	Palette, typography, spacing, components, charts, scaffold, self-review checklist. Read in full before writing HTML.
assets/comp-base.css	Ready-to-inline base stylesheet. Copy into a <style> tag in the output.
assets/comp-wordmark-white.svg	Official Comp wordmark (white) — inline in footers/hero on dark or red backgrounds. Crisp vector, no external host.
assets/comp-wordmark-red.svg	Official Comp wordmark (red #F4364C) — inline on white/light backgrounds.