Stop 2 of 10 · Weekly
A skill for Claude Code
The studio's front-end standards written as a SKILL.md, installed where Claude Code finds it, and a checker that proves the same brief comes out different with the skill on.
Six rules Mo already knows and half applies
Every studio has standards that live in one person's head. Dany's are six lines long, and the sites that break them are the ones built in a hurry. A skill puts the six lines where Claude Code reads them without anyone remembering.
Where the file goes
A skill is a folder with a SKILL.md inside it. Personal skills live in ~/.claude/skills/<name>/SKILL.md and apply to every project; a project copy lives in .claude/skills/<name>/SKILL.md and travels with the repository. Dany keeps the source of truth in studio-tools and Mo copies it into each site repository in a pull request a person merges.
The frontmatter fields, and everything else that may have moved since, are listed at code.claude.com/docs/en/skills. Read that page before you copy this shape.
---
name: studio-standards
description: Studio front-end standards for client site markup, CSS and components.
when_to_use: Writing or editing HTML, CSS or a component, and before opening a pull request that touches markup.
allowed-tools: Read Grep Glob
---
1. Reach for a studio-kit component before new markup. Name the one you used.
2. One h1 per page. Headings descend without skipping a level.
3. Every img carries width, height and either a real alt or alt="".
4. No style attributes. Colours and spacing come from tokens.css.
5. Anything clickable is a button or an a, with a visible focus style.
6. No new dependency without one line saying what it replaces.
allowed-tools is three read tools on purpose. This skill describes work, it does not do work, so it never needs to write a file.
The proof
Two runs of the same brief, and a checker that counts.
node scripts/standards-check.mjs dist/index.html
The checker is forty lines of plain Node over the built HTML: count h1 elements, find img without dimensions, find style= attributes, find div with a click handler and no role. It prints one line per violation and exits non-zero when there are any.
Write me a Node script, scripts/standards-check.mjs, that reads one built HTML file and reports violations of these six studio standards: more than one h1, a skipped heading level, an img missing width or height or alt, a style attribute, a clickable element that is not a button or an a, and any script tag from a domain not in an allowlist I pass in. Plain Node with no dependencies beyond a small HTML parser you name and justify. One line per violation with the tag and the line number, exit code 1 when any are found, 0 when clean. Then write two fixture files under test/fixtures: one that breaks every rule once, one that breaks none. Then a node --test file asserting the checker finds exactly six violations in the first and zero in the second.
I am proving whether my studio-standards skill changes output. Here is the brief I will run twice: [paste the component brief, for example a pricing table section for a plumbing client]. Design the comparison for me. Tell me exactly what to hold constant between the two runs, what to record from each, and how to report the result so it means something with a sample of one brief. Then tell me how many briefs I need before the difference is worth quoting to Mo, and which three briefs would be the most useful to pick.
Dany's first pass: nine violations without the skill, one with it. The one that survived was a skipped heading level, which is now rule two's example line rather than a note in a review.