From etchwp
Generates semantic HTML with BEM-only classes for Etch components. Handles element mapping, landmark selection, heading hierarchy, placeholder content, and accessibility attributes. No ACSS utility classes in markup -- all styling goes in CSS.
How this skill is triggered — by the user, by Claude, or both
Slash command
/etchwp:html-generationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Produces semantic HTML output for Etch components. Uses BEM-only class naming in markup. All visual styling (padding, grid layout, button appearance, typography scale) is handled exclusively in CSS via ACSS custom properties. No ACSS utility classes appear in generated HTML.
Produces semantic HTML output for Etch components. Uses BEM-only class naming in markup. All visual styling (padding, grid layout, button appearance, typography scale) is handled exclusively in CSS via ACSS custom properties. No ACSS utility classes appear in generated HTML.
This skill generates index.html for each Etch component. It is responsible for:
<section>, <article>, <nav>, <header>, <footer>)aria-label on landmarks, alt on images, role where neededloading="lazy" decoding="async" on images (loading="eager" for hero images)When generating HTML for a component:
Select based on component type:
hero, features, testimonials, pricing, cta, custom → <section>header → <header>footer → <footer><article>Always add aria-label with a descriptive label derived from the component description.
The component name in kebab-case becomes the block class on the outer element:
<section class="pricing-table" aria-label="Pricing plans">
This is the ONLY class on the outer element. Do NOT add ACSS utility classes like section--l.
Nest a <div class="{block}__container"> inside the outer element. This div constrains content width — styling is applied in CSS, not via utility classes.
<section class="pricing-table" aria-label="Pricing plans">
<div class="pricing-table__container">
...
</div>
</section>
| Content | HTML | Class |
|---|---|---|
| Main heading (hero) | <h1> | {block}__heading |
| Main heading (non-hero) | <h2> | {block}__heading |
| Subheading | <p> | {block}__subheading |
| Body text | <p> | {block}__text |
| Primary CTA | <a href="#"> | {block}__cta |
| Secondary CTA | <a href="#"> | {block}__link or {block}__cta-secondary |
| Unordered list | <ul role="list"> | {block}__list |
| List item | <li> | {block}__item |
| Image | <img> | {block}__image |
| Icon (SVG) | <svg aria-hidden="true"> | {block}__icon |
| Card/item wrapper | <article> or <div> | {block}__card or {block}__item |
| Grid wrapper | <div> or <ul role="list"> | {block}__grid or {block}__list |
| Actions wrapper | <div> | {block}__actions |
CRITICAL: Only BEM classes appear in HTML. No btn--primary, grid--3, section--l, gap--m, or any other ACSS utility class.
Infer content from the component name and description:
Headings: Use contextual text appropriate to the section type:
Images: Always use https://placehold.co/{width}x{height} URLs with dimensions appropriate to context:
https://placehold.co/1920x1080<svg> placeholders with aria-hidden="true" (not img)https://placehold.co/64x64https://placehold.co/600x400https://placehold.co/120x40Pricing: Use realistic tiers — Starter $19/mo, Pro $49/mo, Enterprise Custom
Testimonials: Use realistic names and roles — Jane Doe, CEO at Acme Corp; John Smith, Marketing Director at Example Inc; Sarah Wilson, Product Manager at Tech Co
Repeating items: Claude decides item count per section type based on what looks complete for that layout (typically 3 for features, testimonials, pricing; 4 nav columns in footer)
<section>, <nav>, <header>, <footer> must have aria-label<img> elements must have descriptive alt text (empty alt="" for decorative images)<img> elements must have loading="lazy" decoding="async" width="{w}" height="{h}" (hero images use loading="eager")role="list" on <ul>aria-label with full text ("19 dollars per month")aria-expanded, aria-controls, aria-labelaria-hidden="true" and hidden attributearia-hidden="true"<svg> elements with placeholder paths for icons, not <etch:svg /> (which is builder-specific, not valid in standalone HTML).For complete HTML templates per section type, read @${CLAUDE_PLUGIN_ROOT}/skills/etch-conventions/references/section-patterns.md.
Templates show the exact BEM class structure, semantic elements, and accessibility attributes for each of the 7 section types: hero, features grid, testimonials, pricing, CTA, footer, and header/navigation.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub flyingwebie/skills --plugin etchwp