A web design skill for Claude Code, built for Etch.
Install one folder and Claude Code or Codex builds sections, components and whole pages for Etch on WordPress: clean structure, BEM classes, Automatic.css 4 variables, real components and loops. Then it reviews its own work against a written design standard. Nothing runs on your site.
Included with lifetime access. Download it from your account, along with every later version.
- etchpress/one folder
- SKILL.mdthe order of work, which sub-skill to read for what
- page-building-101/7 references
- etch-build/5 references
- acss-4/3 references
- design-principles/6 references
- library/119 item references
Ask in plain words.
Describe what you need. The skill reads only the references your request needs, builds it, and tells you what it did.
Build a testimonials section for the landscaping kitReading etchpress: page-building-101, etch-build, acss-4section.testimonials > .testimonials__inner > ul.testimonials__list > li > article.review-cardh2 literal heading, blockquote with figcaption, star rating as one labelled imagegap: var(--grid-gap); padding from the section, never on itEtch component: Review card with rating, callout, quote, reviewer, source propsReview this heroReading etchpress: design-principles, page-building-101Observation: the eyebrow is a span; the section has no literal headingImpact: screen readers skip the section; the outline liesFix: make the eyebrow the h2 and the headline a p.hero__headlineObservation: lead text is 3.8:1 on the tint. Fix: var(--text-dark-muted) on paperTo make sure the skill is used, name it: "Use the etchpress skill to build a pricing section."
Four sub-skills and a library reference.
Each sub-skill is a set of markdown files your agent reads when the topic comes up. They describe the same system the kits and the library are built in, so what the agent builds matches what you paste.
Page Building 101
The fundamentals, for any builder: the 5S order (structure, semantics, selectors, styling, systems), BEM naming, a token for every value, layouts that respond to their own width, the accessibility basics, and a cookbook of the sections every site needs.
7 referencesEtch build
Etch 1.6 the way Digital Gravy intends it: page and template structure, components with props, slots, repeaters and conditions, loops and dynamic data, the native components, the public API, and the format Etch uses when you copy and paste.
5 referencesACSS 4
Every token and class Automatic.css 4.0.1 produces, read from a real install: spacing, type, colour and colour scheme, buttons, grids, the animation system and the dashboard settings. It includes a table that translates ACSS 3 to 4, so an old tutorial does not lead your agent astray.
3 referencesDesign principles
A product brief, UI rules with numbers (contrast, spacing, type, 44px targets, forms), and one review checklist, drawn from the work of Anton Sten, Adham Dannaway and Josh Puckett.
6 referencesLibrary reference
One page for every library item: what it is for, its options and how to change it. Your agent reaches for an item that exists before it builds a new one.
119 referencesFive passes, in order.
The skill makes the decisions first, so the build itself is routine. It follows this order for anything bigger than a button.
- BriefWhat the page is for, who it is for, and which principle it should express. A short brief keeps the rest honest.
- DefaultsContrast, the spacing scale, the type scale, three button weights and form conventions. They are set once for the site.
- Structure, semantics, selectors, styling, systemsFive separate passes, in that order. Structure comes before any class, classes before any style, and every value is a token.
- DepthThe two or three sections that define the site get extra care: states, motion, and the details a trained eye notices.
- ReviewIt checks structure, behaviour and appearance. Every finding says what was seen, why it matters and how to fix it.
The rules that make it one system.
- One H1, and a plain H2 for each sectionHeadings carry the page outline. The small label above a section is its heading, and the large headline is a paragraph.
- BEM classes, no vendor prefixservice-card, service-card__heading: the names you expect to see in Etch, and the ones the library uses.
- A token for every valueSpacing, type, colour, radius and motion come from ACSS 4 variables. A hard-coded pixel is reported in the review.
- Layouts that respond to their own widthSections use container queries, so one pasted into a narrow column still works.
- Real components and loopsAnything repeated is an Etch component with props, and a list of content is a loop.
- The accessibility basicsFocus rings, 44px targets, skip links, landmarks and reduced motion ship with every build.
Any agent that reads a skills folder.
The folder follows the open skills convention: a SKILL.md file at the root that points to the references. Claude Code loads it from ~/.claude/skills and Codex from ~/.codex/skills. Any other agent that reads markdown instructions can be pointed at the folder.
One folder, unzipped once.
What you need
- Claude Code or Codex on your machine
- A site on Etch 1.6 or newer with ACSS 4
- Nothing to install on the site, and no API key
What you get
- One folder, etchpress, with the four sub-skills and the library reference
- It loads on its own when a request mentions Etch, ACSS, a section, a component or a kit
- Every future version, from your account
Download and unpack
Download the zip from your account. Unzip it where Claude Code looks for skills, then link it for Codex. On a site with the EtchPress Runtime, the panel's Agents place shows the same steps beside the MCP commands, with your key filled in.
unzip etchpress-skill.zip -d ~/.claude/skills/ln -s ~/.claude/skills/etchpress ~/.codex/skills/etchpressThen ask
Open your project and ask for what you need. "Build a services grid for this site." "Review the pricing page." "Convert this ACSS 3 class list to 4."
Versioned with Etch and ACSS.
Every release is listed on the changelog, with what changed and the Etch and ACSS versions it was checked against. Your account page shows the current version and has the download.
Before you install.
Do I need Etch to use it?
It is built for Etch 1.6 and Automatic.css 4, and what it writes is meant to be pasted into Etch. The page building and design references apply to any builder, but the Etch and ACSS parts do most of the work.
Does it work without ACSS?
It builds with ACSS 4 tokens and classes, and it tells you when a request needs a setting turned on. Without ACSS the structure still follows the rules, and the styling falls back to the variables your site has.
Does it write into Etch directly?
Not the skill itself: it writes the Etch structure, classes and CSS in your editor and you paste it in. The EtchPress MCP does insert: Claude Code, Codex or Cursor put a library item into the page you have open in Etch, renamed to your prefix, and since MCP 0.2.0 they compose a section or a page from the library with your agent as the model (AI agents, in the docs).
Can I get the skill on its own?
Not today. It comes with lifetime access, together with the kits and the library it is built to match.
Can I edit the references?
Yes. It is your copy. Keep your edits in a separate file so a new version does not overwrite them.
Does the skill send anything to EtchPress?
No. The skill is a folder of markdown files your agent reads on your machine. We never see your prompts or your site.
The skill comes with lifetime access.
One payment covers every kit, every library item and every version of the skill.