# Comp Html Guidelines

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

- **Type:** Skill
- **Install:** `agentstack add skill-trycomp-io-comp-skills-comp-html-guidelines`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [trycomp-io](https://agentstack.voostack.com/s/trycomp-io)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [trycomp-io](https://github.com/trycomp-io)
- **Source:** https://github.com/trycomp-io/comp-skills/tree/main/skills/comp-html-guidelines

## Install

```sh
agentstack add skill-trycomp-io-comp-skills-comp-html-guidelines
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 `` 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 `` must render as literal text, not execute. When embedding a data blob in a `` tag, also neutralize `` 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. |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [trycomp-io](https://github.com/trycomp-io)
- **Source:** [trycomp-io/comp-skills](https://github.com/trycomp-io/comp-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-trycomp-io-comp-skills-comp-html-guidelines
- Seller: https://agentstack.voostack.com/s/trycomp-io
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.