Claude Code Skill Front Comments
Document your frontend code with structured, consistent comments, directly from Claude Code.
Claude Code Skill Front Comments is a Claude Code skill that adds structured comments to frontend files at two levels: Level 1 for file headers, section dividers, and JSDoc headings on every significant block, Full for everything in Level 1 plus inline comments on every function body, directive, and template expression. Using a single slash command with optional arguments, you control the depth and language of the output. Compatible with JavaScript, TypeScript, React, CSS, Sass, HTML, Vue, Svelte, and Astro, it covers a wide range of the frontend stack.
Skill for Claude Code
See the CHANGELOG
Demo of Claude Code Skill Front Comments
Key Features of Claude Code Skill Front Comments
- 🗂️ Two commenting levels: Level 1 (structure & JSDoc) or Full (Level 1 + inline on every block)
- 🌐 Supports 9 file types: JS, TS, React (JSX/TSX), CSS, Sass, HTML, Vue, Svelte, Astro
- 🗣️ Multilingual output: English, French, Spanish, German via lang: argument
- 🔀 Combinable arguments: full and lang: work together in any order
- 🧠 Existing comment preservation: valuable comments (business rules, workarounds) are kept and folded into the new structure
- 📐 Language-aware structure: each file type gets its own native comment syntax and hierarchy
- ✏️ Non-destructive by default: Level 1 never adds noise, only meaningful structural anchors
- ⚡ Optimized loading: sub-files per language, only the relevant one is loaded per run
Part of the Claude Code Frontend Skills collection.
