Semantic HTML And SEO
dembrandt/dembrandt-skillsSemantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness. Good HTML is the foundation of accessibility, SEO, and resilient UI. Use when building any web UI, reviewing markup quality, or optimising for search and accessibility.
At a glance
This skill is for Marketing and helps you optimize website markup for search engines, write semantic html for better seo, and improve page accessibility and search ranking.
git clone --depth 1 https://github.com/dembrandt/dembrandt-skills
cp -r dembrandt-skills/skills/semantic-html-and-seo ~/.claude/skills/semantic-html-and-seo
Setup, runtime and requirements describe dembrandt/dembrandt-skills, the repo this skill ships in.
Html5seoaccessibilitySemantic MarkupSearch EnginesAlt Text
Also in dembrandt/dembrandt-skills
View the repoDerive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturat...
Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised poster of it. Design...
A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography,...
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should b...
Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control...
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour...
When data has both a tabular/list representation and a visual representation, show both simultaneously and keep them synchronized. Clicking...
Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use la...
Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout...
Configuration UIs for domain experts — users who understand their field deeply but are not software developers — require domain language, se...
Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius,...
Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dem...
Other Marketing skills
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use...
Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens....
Generate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai.
For marketing and gtm work: bind launches, campaigns, events, and brand plans to growth and pipeline outcomes. Built around the core query "...
A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA,...
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.