Visualize
display-dev/visualize
Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.
Design system for single-file HTML engineering reports and deep dives — two-column sticky-TOC layout, green-accented semantic color coding, timeline step lists, code-anchored prose.
Install Report Styling
$ npx skills add ahmetb/dotfiles --skill report-styling -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ahmetb/dotfiles report-styling --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ahmetb/dotfiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/report-styling .claude/skills/report-styling && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "report-styling" agent skill from https://github.com/ahmetb/dotfiles/tree/master/.claude/skills/report-styling into .claude/skills/report-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-styling", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ahmetb/dotfiles/tree/master/.claude/skills/report-stylingType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ahmetb/dotfiles --skill report-styling -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ahmetb/dotfiles report-styling --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmetb/dotfiles.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/report-styling .agents/skills/report-styling && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "report-styling" agent skill from https://github.com/ahmetb/dotfiles/tree/master/.claude/skills/report-styling into .agents/skills/report-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-styling", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ahmetb/dotfiles --skill report-styling -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ahmetb/dotfiles report-styling --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmetb/dotfiles.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/report-styling .cursor/skills/report-styling && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "report-styling" agent skill from https://github.com/ahmetb/dotfiles/tree/master/.claude/skills/report-styling into .cursor/skills/report-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-styling", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ahmetb/dotfiles.git --path .claude/skills/report-styling--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ahmetb/dotfiles --skill report-styling -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ahmetb/dotfiles report-styling --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmetb/dotfiles.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/report-styling .gemini/skills/report-styling && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "report-styling" agent skill from https://github.com/ahmetb/dotfiles/tree/master/.claude/skills/report-styling into .gemini/skills/report-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-styling", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ahmetb/dotfiles report-stylingInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ahmetb/dotfiles --skill report-styling -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ahmetb/dotfiles.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/report-styling .github/skills/report-styling && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "report-styling" agent skill from https://github.com/ahmetb/dotfiles/tree/master/.claude/skills/report-styling into .github/skills/report-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-styling", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ahmetb/dotfiles --skill report-styling -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ahmetb/dotfiles report-styling --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmetb/dotfiles.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/report-styling .opencode/skills/report-styling && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "report-styling" agent skill from https://github.com/ahmetb/dotfiles/tree/master/.claude/skills/report-styling into .opencode/skills/report-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-styling", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
report-styling- GitHub stars
- 139
- Token cost
- ~1.2k tokens
- SKILL.md length
- 618 words
- Files
- 1
- Skills in repo
- 6
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Design system for single-file HTML engineering reports and deep dives — two-column sticky-TOC layout, green-accented semantic color coding, timeline step lists, code-anchored prose.
- Writing an HTML report
- SKILL.md covers Layout, Typography, Color system (semantic, not… and Sidebar (brand + abstract +…, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Technical writeup
What it does
Report Styling is an agent skill from ahmetb/dotfiles. Design system for single-file HTML engineering reports and deep dives — two-column sticky-TOC layout, green-accented semantic color coding, timeline step lists, code-anchored prose. Use when writing an HTML report, deep dive, or technical writeup.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering HTML artifacts and Design systems. The repository describes itself as: Ahmet's dotfiles and macOS customizations. The licence is Apache-2.0.
When your agent uses it
- Writing an HTML report
- Technical writeup
Example prompts
- “/report-styling”
What it can do on your machine
Read from SKILL.md and the folder at commit a435fa0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Report Styling loads about 1.2k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 618 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from ahmetb/dotfiles at commit a435fa0, republished under its Apache-2.0 licence (© ahmetb). 618 words, ~1,248 tokens.
Download SKILL.mdSave it as
.claude/skills/report-styling/SKILL.md (or your agent's skills folder).- name
- report-styling
- description
- Design system for single-file HTML engineering reports and deep dives — two-column sticky-TOC layout, green-accented semantic color coding, timeline step lists, code-anchored prose. Use when writing an HTML report, deep dive, or technical writeup.
Report styling — engineering deep-dive format
Produce a single self-contained HTML file (all CSS/JS inline, no external requests). Reference example: the "How Routing Works in alyx-lb" report.
Layout
- Two-column grid:
288pxsticky sidebar + main column, max-width1480px. Main content padding ~0 64px 120px. Collapses to one column under1080pxvia media query. - Page background is a very light sage-tinted gray (
#f4f9f3); content surfaces (sidebar, cards, pills) are white with1pxhairline borders. - Sidebar:
position: sticky; top: 0; height: 100vh; overflow-y: auto, with a hairline right border.
Typography
- Sans:
"Inter", -apple-system, "Helvetica Neue", sans-seriffor everything. - Mono:
"IBM Plex Mono", ui-monospace, Monaco, monospacefor kickers, tags, captions, code chips. - Body:
15px/1.6. Lede:17px/1.62, max-width76ch. - Headings are weight 500 (never 700) with tight letter-spacing
(−.01 to −.025em). H1 ~
38px/1.14, H2 ~26pxwith a green section number, H319px/1.3numbered like2.1 ·. - Kickers/tags/group labels:
11–11.5pxmono, uppercase, letter-spacing1–1.5px.
Color system (semantic, not decorative)
- Accent green
#12ad52(green-600): section numbers, active TOC edge, step badges, brand mark, key-note borders. - Every color means one thing document-wide and is used consistently in the
H1 highlights, inline keyword spans, and callout borders:
- blue
#2176ff= one core concept (e.g. load/utilization) - orange
#e56123= the opposing concept (e.g. cache/stickiness) - green = good / keep / takeaway
- red
#dd403a= shed / warning
- blue
- Tinted fills come from the 50-shade of each hue (
green-50 #e5fcef,orange-50 #fdf5f1,red-50 #fcefee).
Sidebar (brand + abstract + grouped TOC)
- Top: small green SVG logo mark + short report title (500 weight, 15px).
- Below it: a 3–5 line plain-prose abstract of the whole document.
- TOC links grouped under uppercase mono micro-headers naming the arc (e.g. "FOUNDATIONS", "THE DECISION", "STATE & INTERFACES"); hairline separators between links; H3 links indented and smaller.
- Scrollspy (inline JS, IntersectionObserver): active link becomes a rounded gray chip with a green left edge.
- Every H2/H3 gets an appended
#anchor link that copies the section URL.
Hero
- Uppercase widely-letter-spaced mono kicker:
CATEGORY · SUBJECT · CONTEXTseparated by middle dots. - H1 is a full thesis sentence, not a label, with 1–2 phrases color-coded to the semantic mapping (e.g. blue for the load phrase, orange for the cache phrase).
- Lede paragraph with bold-studded key terms, ending with a map of the sections ("…the inputs it reads (§1), the lifecycle (§2)…").
- Row of small bordered white metadata pills:
Mode:,Lang:,Path:etc., with inline code chips inside where apt. - Immediately after the hero: a green-bordered, green-tinted "THE ONE-PARAGRAPH MODEL" card that compresses the entire system into one paragraph before any sections begin.
Show full SKILL.md (212 more words)Show less
Content elements
- Numbered narrative arc: H2s prefixed with a green tabular number (or §); the doc reads as a story (overview → mechanism → lifecycle → state → inputs → outputs), not a reference dump.
- Timeline step lists:
ol.stepswith list-style none; eachligets a 28px solid-green circular counter badge (white number) and a faint vertical connector line between badges. Each step opens with a bold action phrase, an em-dash, then the exact function name as a code chip. - Inline code chips: light-gray rounded-background mono spans, used densely to cite exact identifiers — function names, config keys, Redis keys, metric names, sentinel values, HTTP codes — so prose stays source-anchored.
- Semantic callout cards (
.note): rounded, hairline border, soft shadow, uppercase mono tag as first line. Variants:key(green left border + green-50 fill) for takeaways;warm(orange border + tint) for tensions/tradeoffs (e.g. "WHY STICKINESS MATTERS HERE");warn(red) for gotchas; plain white for context. - Code as cited figures: dark-background syntax-highlighted
<pre>wrapped in<figure class="code">with a mono figcaption naming what it is and the exact source path (pseudocode · GET /deep/health pipeline — worker_utilization.py). - Reference tables: compact
13pxbordered tables for input/output/ metric catalogs; muted gray header row.
Behavior
scroll-behavior: smooth,scroll-margin-topon headings.::selectiontinted with the accent (green-100).- Inline scripts only: scrollspy + heading anchor-copy. No frameworks, no CDN fetches.
© ahmetb, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/report-styling of ahmetb/dotfiles.
Open the folder on GitHubat commit a435fa0
Compare with similar skills
Report Styling next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Report Styling this skillahmetb/dotfiles | 139 | — | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| Visualizedisplay-dev/visualize | 136 | — | ~7.4k | Automated safety check: Pass | MIT | |
| Web Designdrewnekota/cetus | 146 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Web Design EngineerConardLi/garden-skills | 13k | — | ~8.8k | Automated safety check: Pass | MIT | |
| Generative UIhimself65/finance-skills | 3.4k | — | ~3.1k | Automated safety check: Pass | MIT | |
| Design Systemaffaan-m/ECC | 276k | — | ~698 | Automated safety check: Pass | MIT |
Similar skills
Web Design
drewnekota/cetus
A skill your agent uses when building any web page, HTML artifact, landing page, dashboard, slide deck, report, email, or UI component the user will look at.
Web Design Engineer
ConardLi/garden-skills
Builds polished browser-rendered HTML, CSS, JavaScript and React pages, dashboards, prototypes and slide decks, aiming for a stunning rather than merely functional result.
Generative UI
himself65/finance-skills
Design system and templates for Claude's built-in generative UI — the showwidget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations.
Design System
affaan-m/ECC
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…
Md Document
alirezarezvani/claude-skills
Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, search filter, code-copy buttons, and…
More from ahmetb/dotfiles
Here Now
ahmetb/dotfiles
USE THIS SKILL ONLY ON PUBLIC OPEN SOURCE REPOS!!!. An agent skill from ahmetb/dotfiles.
Here Now Internal
ahmetb/dotfiles
Upload and share files on here.now (https://here-now.chimera-logarithm.ts.net), Baseten's internal artifact-sharing service.
Sweep Comments
ahmetb/dotfiles
Hold code comments and docstrings to a strict quality bar. An agent skill from ahmetb/dotfiles.
Commit PR
ahmetb/dotfiles
How to name branches, writing commit titles/messages and sending PRs with correct format
Declaudish
ahmetb/dotfiles
Translate text written in "Claudish" — the characteristic prose style of Claude and Claude Code — into plain, direct, idiomatic English.
Related
Categories
Questions about Report Styling
What does Report Styling do?
Design system for single-file HTML engineering reports and deep dives — two-column sticky-TOC layout, green-accented semantic color coding, timeline step lists, code-anchored prose. Report Styling is an agent skill from ahmetb/dotfiles. Design system for single-file HTML engineering reports and deep dives — two-column sticky-TOC layout, green-accented semantic color coding, timeline step lists, code-anchored prose.
When should I use Report Styling?
Report Styling fits situations like: writing an HTML report; technical writeup.
How do I install Report Styling in Claude Code?
Run `npx skills add ahmetb/dotfiles --skill report-styling -a claude-code`. Or copy the skill folder (.claude/skills/report-styling in ahmetb/dotfiles) into .claude/skills/report-styling in your project. Claude Code loads it when a task matches its description.
How do I install Report Styling in Codex?
Run `npx skills add ahmetb/dotfiles --skill report-styling -a codex`. Or copy the skill folder (.claude/skills/report-styling in ahmetb/dotfiles) into .agents/skills/report-styling in your project. Codex loads it when a task matches its description.
Can I use Report Styling in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ahmetb/dotfiles --skill report-styling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/report-styling, .gemini/skills/report-styling, .github/skills/report-styling and .opencode/skills/report-styling in your project.
What does Report Styling need to run?
SKILL.md names no scripts, command-line tools or credentials: Report Styling is instructions for the agent only.
Does Report Styling access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Report Styling safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Report Styling use?
Report Styling is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Report Styling use?
About 1.2k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Report Styling?
Skills that share tags, products or a category with Report Styling: Visualize (display-dev/visualize, 136 stars), Web Design (drewnekota/cetus, 146 stars), Web Design Engineer (ConardLi/garden-skills, 13k stars) and Generative UI (himself65/finance-skills, 3.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Report Styling?
ahmetb (a GitHub user) maintains it in ahmetb/dotfiles, which has 139 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on August 24, 2026.
Source: ahmetb/dotfiles on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.