markup.tips
Performance-first, accessibility-first patterns for building modern web UIs. Each rule is a self-contained pattern an agent can apply without reading a full codebase.
Rules
- Book-Cover NavFull-viewport mobile nav, no hamburger, #stage scroll
- CSS Token ThemingCSS custom property tokens, data-* cascade, dark/high-contrast
- Focus RingsLayered box-shadow rings, forced-colors safe
- Responsive Image <picture><picture> with monochrome + WebP + JPEG, CLS prevention
- Service Worker StrategiesPer-request caching strategies, response.ok guard, timestamp cleanup
- Canvas + <a download> Export<canvas> to data URI to <a download> — no server needed
- ARIA Patternsaria-current, aria-pressed, aria-describedby, live regions
- Focus ManagementautoFocus, scroll-mt, #stage as skip-link replacement
- Trusted Network AccessOwner vs guest on self-hosted apps, Tailscale + LAN ranges
- Offline Mutation QueuelocalStorage queue, ordered flush, startup replay
- System Font StacksZero-download typography, no Google Fonts
- Print StylesPrintable documents — hide chrome, show URLs, collapse heroes
Philosophy
- Use the platform. Reach for a native API before a library.
- Semantic HTML is free performance and free accessibility.
- CSS custom properties > component-scoped styles for theming.
- Offline is a feature, not an edge case.
- Never hard-code a color. Never reduce opacity on hover.
Reference Implementation
pantry-host — a self-hosted kitchen manager. Every rule in this directory is distilled from patterns proven in that codebase.
