Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
MANDATORY for every coding agent (Claude Code, Codex, or any other) on every change-set — every applicable source file the agent creates or updates MUST start with the project's copyright/authorship…
Install File Headers
$ npx skills add hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hoangsonww/Claude-Code-Agent-Monitor file-headers --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/hoangsonww/Claude-Code-Agent-Monitor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/file-headers .claude/skills/file-headers && 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 "file-headers" agent skill from https://github.com/hoangsonww/Claude-Code-Agent-Monitor/tree/master/.claude/skills/file-headers into .claude/skills/file-headers/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "file-headers", 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/hoangsonww/Claude-Code-Agent-Monitor/tree/master/.claude/skills/file-headersType 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 hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hoangsonww/Claude-Code-Agent-Monitor file-headers --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hoangsonww/Claude-Code-Agent-Monitor.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/file-headers .agents/skills/file-headers && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "file-headers" agent skill from https://github.com/hoangsonww/Claude-Code-Agent-Monitor/tree/master/.claude/skills/file-headers into .agents/skills/file-headers/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "file-headers", 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 hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hoangsonww/Claude-Code-Agent-Monitor file-headers --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hoangsonww/Claude-Code-Agent-Monitor.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/file-headers .cursor/skills/file-headers && 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 "file-headers" agent skill from https://github.com/hoangsonww/Claude-Code-Agent-Monitor/tree/master/.claude/skills/file-headers into .cursor/skills/file-headers/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "file-headers", 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/hoangsonww/Claude-Code-Agent-Monitor.git --path .claude/skills/file-headers--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 hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hoangsonww/Claude-Code-Agent-Monitor file-headers --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hoangsonww/Claude-Code-Agent-Monitor.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/file-headers .gemini/skills/file-headers && 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 "file-headers" agent skill from https://github.com/hoangsonww/Claude-Code-Agent-Monitor/tree/master/.claude/skills/file-headers into .gemini/skills/file-headers/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "file-headers", 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 hoangsonww/Claude-Code-Agent-Monitor file-headersInstalls 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 hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/hoangsonww/Claude-Code-Agent-Monitor.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/file-headers .github/skills/file-headers && 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 "file-headers" agent skill from https://github.com/hoangsonww/Claude-Code-Agent-Monitor/tree/master/.claude/skills/file-headers into .github/skills/file-headers/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "file-headers", 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 hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hoangsonww/Claude-Code-Agent-Monitor file-headers --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hoangsonww/Claude-Code-Agent-Monitor.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/file-headers .opencode/skills/file-headers && 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 "file-headers" agent skill from https://github.com/hoangsonww/Claude-Code-Agent-Monitor/tree/master/.claude/skills/file-headers into .opencode/skills/file-headers/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "file-headers", 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
file-headers- GitHub stars
- 1.1k
- Used in
- 1 other repo
- Token cost
- ~1.1k tokens
- SKILL.md length
- 377 words
- Files
- 3 (incl. scripts)
- Skills in repo
- 78
- Repo updated
- First seen
- Licence
- MIT
At a glance
MANDATORY for every coding agent (Claude Code, Codex, or any other) on every change-set — every applicable source file the agent creates or updates MUST start with the project's copyright/authorship…
- Works in 5 steps: New file → header first. Any applicable… → Touched file missing header → add it. If… → Exact author line. @author Son Nguyen — → …
- Tasks that involve React components
- SKILL.md covers Applicable files, Header formats by file type, Rules and Audit
- Runs Shell scripts from its folder; calls bash
What it does
File Headers is an agent skill from hoangsonww/Claude-Code-Agent-Monitor. MANDATORY for every coding agent (Claude Code, Codex, or any other) on every change-set — every applicable source file the agent creates or updates MUST start with the project's copyright/authorship header (file overview + exact author line). Use automatically whenever writing a new file or editing an existing one; do not wait to be asked. Covers JS/TS/TSX/CJS/MJS, Python, shell, and CSS. Includes the audit script to verify repo-wide compliance.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts (for example `scripts/check-headers-pr.sh` and `scripts/check-headers.sh`).
It sits in Frontend & Design, covering React components. It works with Python. The repository describes itself as: 🚀 A real-time monitoring dashboard for Claude Code & Codex, built with SQLite3, Node.js, Express, React, Vite, TailwindCSS, & WebSockets. It tracks sessions, agent activity… The licence is MIT.
When your agent uses it
- Tasks that involve React components
Example prompts
- “/file-headers”
Requirements
- Python 3
- A Bash shell
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- New file → header first. Any applicable file you create starts with the
- Touched file missing header → add it. If you edit a file that lacks the
- Exact author line. @author Son Nguyen —
- Don't churn existing headers. If a file already has a compliant header,
- Overviews must stay truthful. When an edit changes what a file does,
What it can do on your machine
Read from SKILL.md and the folder at commit e0f4a1a. 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
Ships 2 files in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
bash
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
File Headers loads about 1.1k tokens when it runs. Until then it costs about 116 tokens; SKILL.md has 377 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); the scripts in this folder are not scanned.
SKILL.md
The full file from hoangsonww/Claude-Code-Agent-Monitor at commit e0f4a1a, republished under its MIT licence (© hoangsonww). 377 words, ~1,059 tokens.
Download SKILL.mdSave it as
.claude/skills/file-headers/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- file-headers
- description
- MANDATORY for every coding agent (Claude Code, Codex, or any other) on every change-set — every applicable source file the agent creates or updates MUST start with the project's copyright/authorship header (file overview + exact author line). Use automatically whenever writing a new file or editing an existing one; do not wait to be asked. Covers JS/TS/TSX/CJS/MJS, Python, shell, and CSS. Includes the audit script to verify repo-wide compliance.
File Headers — Copyright Comment + File Overview
Every applicable source file in this repository starts with a header comment containing a file overview and the exact author line:
@author Son Nguyen <hoangson091104@gmail.com>The name and email must be exactly as above — no variations, no substitutions, no other names. This applies to every coding agent working in this repo (Claude Code, Codex, or any other tool): when you create a new applicable file, write the header first; when you update an existing applicable file that is missing the header, add it as part of the same change.
Applicable files
| Included | Excluded |
|---|---|
*.js, *.ts, *.tsx, *.cjs, *.mjs | anything under node_modules/, dist/, build/, data/, .worktrees/ |
*.py, *.sh | vendored/minified files (*.min.js, wiki/mermaid.min.js) |
*.css | generated files (wiki/i18n-content.js — carries its own AUTO-GENERATED banner) |
snapshots (__snapshots__/), lockfiles, JSON/YAML/Markdown |
Header formats by file type
JS / TS / TSX — server & scripts style (overview inline in @file):
/**
* @file One-to-few-sentence overview of what this file does and why it
* exists. Mention the key contracts or invariants the file owns.
* @author Son Nguyen <hoangson091104@gmail.com>
*/JS / TS / TSX — client style (@file name + @description overview), used
under client/src/:
/**
* @file ComponentName.tsx
* @description What the component/module renders or provides and how it fits
* into the app.
* @author Son Nguyen <hoangson091104@gmail.com>
*/CSS (same block-comment shape as client/src/index.css):
/**
* @file file.css
* @description What these styles cover.
* @author Son Nguyen <hoangson091104@gmail.com>
*/Shell (# block right after the shebang; existing overview comments count —
just make sure the @author line is in the block):
#!/usr/bin/env bash
# script-name.sh — what the script does, one to few lines.
# @author Son Nguyen <hoangson091104@gmail.com>Python (inside the module docstring):
"""
module.py — what the module does.
@author Son Nguyen <hoangson091104@gmail.com>
"""Show full SKILL.md (193 more words)Show less
Rules
- New file → header first. Any applicable file you create starts with the header before any code (after the shebang for scripts).
- Touched file missing header → add it. If you edit a file that lacks the header, add one in the same commit. Write a real overview — describe what the file actually does; never a placeholder like "TODO" or "utility file".
- Exact author line.
@author Son Nguyen <hoangson091104@gmail.com>— byte-exact, in every file type (shell and Python use it inside#/ docstring comments). - Don't churn existing headers. If a file already has a compliant header, leave it alone unless the file's purpose changed (then update the overview).
- Overviews must stay truthful. When an edit changes what a file does,
update its
@file/@descriptionoverview in the same change.
Audit
Run the bundled checker to list any applicable file missing the header:
bash .claude/skills/file-headers/scripts/check-headers.shExit code 0 = fully compliant; 1 = the printed files are missing headers.
Run it before finishing any change-set that adds files, and during reviews.
On every pull request, GitHub Actions runs
.claude/skills/file-headers/scripts/check-headers-pr.sh against only the
files changed in the PR diff (added, copied, renamed, or modified). Test locally
before pushing:
bash .claude/skills/file-headers/scripts/check-headers-pr.sh origin/master HEAD© hoangsonww, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (scripts) in .claude/skills/file-headers of hoangsonww/Claude-Code-Agent-Monitor.
- SKILL.md
- scripts/check-headers-pr.sh
- scripts/check-headers.sh
Open the folder on GitHubat commit e0f4a1a
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in hoangsonww/Claude-Code-Agent-Monitor, which our catalogue first saw on October 7, 2026.
Compare with similar skills
File Headers 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 |
|---|---|---|---|---|---|---|
| File Headers this skillhoangsonww/Claude-Code-Agent-Monitor | 1.1k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| Core Component Library PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.2k | Automated safety check: Pass | None | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None |
Similar skills
- Official
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
Core Component Library Patterns
ChrisWiles/claude-code-showcase
Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
Chakra UI v3 Builder
chakra-ui/chakra-ui
Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.
More from hoangsonww/Claude-Code-Agent-Monitor
All 78 skills in this repoBudget Set
hoangsonww/Claude-Code-Agent-Monitor
Define a spend budget for Claude Code and, optionally, create a cost alert rule that fires when usage crosses the limit, via POST /api/alerts/rules on the Agent Monitor dashboard.
Version Release
hoangsonww/Claude-Code-Agent-Monitor
Choose and apply the correct semantic version bump for this repository.
Cost Breakdown
hoangsonww/Claude-Code-Agent-Monitor
Break down Claude Code costs using the Agent Monitor pricing engine.
Hook Diagnostics
hoangsonww/Claude-Code-Agent-Monitor
Diagnose Claude Code hook installation, delivery, and ingestion issues.
Memory Review
hoangsonww/Claude-Code-Agent-Monitor
Review the file-based memory store via the Agent Monitor Config Explorer API: the user and project CLAUDE.md plus per-project auto-memory files under ~/.claude/projects/<slug/memory/.md.
Transcript Grep
hoangsonww/Claude-Code-Agent-Monitor
Search a Claude Code session transcript for a string or regex pattern and show every matching message with surrounding context.
Related
Works with
Categories
Questions about File Headers
What does File Headers do?
MANDATORY for every coding agent (Claude Code, Codex, or any other) on every change-set — every applicable source file the agent creates or updates MUST start with the project's copyright/authorship…. File Headers is an agent skill from hoangsonww/Claude-Code-Agent-Monitor. MANDATORY for every coding agent (Claude Code, Codex, or any other) on every change-set — every applicable source file the agent creates or updates MUST start with the project's copyright/authorship header (file overview + exact author line).
When should I use File Headers?
File Headers fits situations like: tasks that involve React components.
How do I install File Headers in Claude Code?
Run `npx skills add hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a claude-code`. Or copy the skill folder (.claude/skills/file-headers in hoangsonww/Claude-Code-Agent-Monitor) into .claude/skills/file-headers in your project. Claude Code loads it when a task matches its description.
How do I install File Headers in Codex?
Run `npx skills add hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a codex`. Or copy the skill folder (.claude/skills/file-headers in hoangsonww/Claude-Code-Agent-Monitor) into .agents/skills/file-headers in your project. Codex loads it when a task matches its description.
Can I use File Headers 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 hoangsonww/Claude-Code-Agent-Monitor --skill file-headers -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/file-headers, .gemini/skills/file-headers, .github/skills/file-headers and .opencode/skills/file-headers in your project.
What does File Headers need to run?
Going by SKILL.md and its folder, File Headers needs a shell for the scripts in its folder and the command-line tools its instructions call (bash). Our summary lists: Python 3; A Bash shell.
Does File Headers 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 File Headers 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does File Headers use?
File Headers is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does File Headers use?
About 1.1k tokens (SKILL.md is roughly 4.2k 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 File Headers?
Skills that share tags, products or a category with File Headers: Web Artifacts Builder (anthropics/skills, 180k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Core Component Library Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains File Headers?
hoangsonww (a GitHub user) maintains it in hoangsonww/Claude-Code-Agent-Monitor, which has 1,052 GitHub stars. The repository holds 78 skills in this directory. The repository was last updated on October 6, 2026.
Source: hoangsonww/Claude-Code-Agent-Monitor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.