patterns
HTML Patterns Skill
This skill provides reusable patterns for common page types and content blocks. Patterns combine semantic HTML with custom elements to create consistent, accessible structures.
Philosophy
Pages are composed of blocks - reusable content patterns that appear across many pages. By defining custom elements for these blocks, we:
- Communicate intent -
<faq-question>is clearer than<dt class="faq-q"> - Enable styling - Custom elements can be styled with CSS
- Support tooling - Validators can enforce correct usage
- Document structure - The markup is self-documenting
Available Patterns
| Pattern | Elements | Use Case |
|---|---|---|
| FAQ | faq-list, faq-question, faq-answer |
Q&A pages, help sections |
| Product Card | product-card |
Product listings, catalogs |
More from profpowell/vanilla-breeze
api-client
Fetch API patterns with error handling, retry logic, and caching. Use when building API integrations, handling network failures, or implementing offline-first data fetching.
44validation
Validate data with JSON Schema and AJV. Use when validating API requests, form submissions, database inputs, or any data boundaries. Provides deterministic validation with consistent error formats.
43fake-content
Generate realistic fake content for HTML prototypes. Use when populating pages with sample text, products, testimonials, or other content. NOT generic lorem ipsum.
15xhtml-author
Write valid XHTML-strict HTML5 markup. Use when creating HTML files, editing markup, building web pages, or writing any HTML content. Ensures semantic structure and XHTML syntax.
11layout-grid
Design-focused grid layout system with fluid scaling, responsive columns, and resolution-independent patterns. Use when creating page layouts, card grids, or multi-column designs.
8service-worker
Service worker patterns for offline support, caching strategies, and PWA functionality. Use when implementing offline-first features, caching, or background sync.
8