HTML component skill

#Read first

Spec.md for what the component is, its content, its states and its look; the reference and illustration wired in.

#Build

• One HTML file: semantic markup, a <style> block and, only if needed, a small <script>. No frameworks or external files except web fonts.
• Everything scoped under one root class, so it can be pasted anywhere without clashing.
• Colours, radii and spacing as CSS custom properties on the root, so it's easy to restyle.
• Responsive from 320 px to full width, with the layout changing at one breakpoint at most.
• Hover, focus-visible and active states for everything clickable; a respectful prefers-reduced-motion.
• The wired illustration shown whole, with rounded corners where it sits on a card.

#Look

• One type scale (e.g. 48 / 20 / 15) and one accent colour from the spec, for the primary action only.
• Spacing on a 4 or 8 px grid, generous inside the component; a radius and border that match the reference.
• The illustration large and given room, beside or above the words, never squeezed into a corner.

#Copy

Real words from the spec, short and specific. One primary action.

#Avoid

Lorem ipsum, fixed widths that break on phones, inline styles everywhere, and animation that never stops.