An installable AI skill that gives an agent a web delivery standard: CSS tokens named by role, AA contrast verified rather than estimated, responsiveness down to 360px, SEO metadata, and a checklist that runs before the page reaches the client.
Built for Claude Code, and usable by any agent that reads AGENTS.md.
AI tools already know how to make a page look good. What they do not do on their own is guarantee what every delivery has to meet regardless of the style chosen, and that is always what comes back as rework.
Hence the separation that organises this repository:
| Responsibility | Who decides |
|---|---|
| How the page will look | the design skill you already use |
| What every delivery meets | elix-front |
No rule here constrains aesthetics. Every rule exists because its absence shows up for the person receiving the page, or shows up six months later when somebody has to change it.
git clone https://github.com/ElixIsmael/elix-front.git
cd elix-front && ./install.shReopen your Claude Code session. The skill loads on its own when you are working on HTML; the agent is callable by name.
| Command | What it does |
|---|---|
./install.sh |
installs into ~/.claude, applies to every project |
./install.sh --here |
installs into ./.claude, this project only |
./install.sh --copy |
copies instead of symlinking, freezing the version |
./install.sh --remove |
undoes it, removing only what this repo installed |
Symlink is the default: a git pull here takes effect immediately, with no
reinstall.
Other agents (Cursor, Codex, Copilot, Gemini CLI): nothing to install, just point the agent at this repository's AGENTS.md.
skills/elix-front/
├── SKILL.md the standard, loaded on demand
└── references/
├── tokens.md the CSS token convention, with dark theme
└── checklist.md the delivery checklist, item by item
agents/
└── visual-reviewer.md reads a page and returns only the verdict
The skill enters context when you are building or reviewing a page. It is
short on purpose: detail lives in references/, which the agent reads only when
it needs to.
The agent exists because delivered pages routinely run past a thousand lines, and reading all of that does not need to occupy the main context. It reads the whole page, checks the list, and comes back with three blocks: blocks delivery, should fix, worth knowing.
Tokens by role, not by colour. --gold: #c9a227 binds the colour to the
name. The day the client swaps gold for silver, --gold: #c0c0c0 is absurd, and
a dark theme becomes impossible. --accent: #c9a227 says what the colour does,
and the palette changes in one place. The structure is fixed; the palette stays
free per project.
Contrast calculated, not estimated. The agent runs the WCAG relative luminance calculation on every token pair that actually exists. A light, sophisticated palette is where this escapes most often, and "looks readable" is not a verification.
360px with no horizontal scrolling. What scrolls is the table or grid
container, never the body.
And more: width/height on every image against layout shift, display=swap on
fonts, 44px touch targets, :focus-visible preserved, prefers-reduced-motion
honoured, OG tags, a 404.html in the same visual language, noindex on
previews and not on the final domain.
The agent carries an explicit instruction against padding its findings:
If the work is good, say it is good and list only what is left. Padding the list is what makes the next report get ignored, and then the finding that mattered slips through.
A reviewer that always finds twenty problems stops being read. That is the difference between a check people run and a check people skip.
Extracted from the internal tooling of Elix Sites, where it grew out of real mistakes on client sites: contrast that failed, a palette that could not be darkened, layouts that jumped while loading. Every rule here has already cost something.
The operational parts, meaning deploy, infrastructure, and contracts, stay in the private repository. What is here is only what transfers.
Corrections and traps found on real projects are the most useful contributions. MIT, see LICENSE.
Built by Elix Sites.