Web

Patterns for web development: browser APIs, UI components, CSS techniques, DOM manipulation, animations, layouts, modals, prototyping, and the Vue/Vite/VitePress ecosystem.

A11y

Patterns for building UI that works with keyboards, screen readers, and assistive technology.

Topics

• Roving Tabindex: Single tab stop into a list or toolbar, arrow keys move between items, Tab exits. Use when building composite widgets like nav lists, tab bars, or toolbars.

See also

• Semantic Selectors: ARIA attribute selectors for styling state — the same attributes that drive accessibility.

Web Animation

Techniques for animating web interfaces: morphing overlays from their trigger elements, keeping multi-page app shells stable across navigations, and building animated SVGs with CSS keyframes.

Topics

• Animate Overlay from Trigger: Use the View Transitions API to morph overlays from their trigger element for spatial continuity. Use when dialogs, dropdowns, or popovers should appear to emerge from the element that opened them.
• Animated SVGs: CSS keyframe animations inside SVG with custom properties for parametric control. Use when replacing animated GIFs with resolution-independent, customizable SVG animations.
• Animated Collection Updates: Use View Transitions API to animate collection elements sliding to new positions when sorted, fading out when filtered away, and fading in when filtered back. Use when sorting or filtering tables, card grids, lists, or search results.
• Multi-Page App Layout Stability: Prevent UI flicker during page navigation by marking persistent elements with view-transition-name. Use when a shared header, nav, or sidebar should stay stable across page loads.

Browser Automation

Use Playwright or Chrome DevTools MCP to automate workflows on websites that would otherwise require manual human interaction.

Chrome DevTools MCP

Agent-native browser control with 43 tools for input automation, navigation, performance tracing, network inspection, heap snapshots, Lighthouse audits, and more — all via MCP:

• Chrome DevTools MCP: Install Chrome DevTools for agents 1.0 as a Claude Code plugin, connect to a running browser session via auto-connect or remote debugging port, and run Lighthouse audits and Core Web Vitals analysis. Use when setting up or using Chrome DevTools MCP.

Playwright CLI

No script needed. Run a single command for screenshots, PDFs, or code generation:

• Playwright CLI: One-shot browser commands. Use when you need a quick result without writing a script.

Playwright scripting

For multi-step automation — navigating, clicking, filling forms, intercepting network requests — write a Playwright script:

• Persistent Browser Sessions: Keep a browser alive across multiple script invocations via CDP. Use when the agent needs to observe results between steps before deciding what to do next.
• Site Interaction: Driving websites via discovered APIs or UI interaction — scouting endpoints, choosing between API and UI approaches. Use when automating a manual browser workflow.
• Authentication: Session persistence, manual sign-in handoff, secure credential storage, and expiry detection. Use when the site requires login.
• Binary File Handling: Uploading and downloading files across the Node.js/browser boundary via base64 encoding and FormData. Use when the automation involves file transfers.
• Content Diffing: Comparing local and remote versions to determine what actually changed. Use when automation involves pushing content to a remote destination.

Web Components

Patterns for building web components without a framework: loading component files asynchronously, bootstrapping component lifecycles, including HTML fragments at runtime, binding reactive data to templates with a plugin architecture, designing components for clean extensibility, and publishing components as plain ES modules.

Topics

• Encapsulation: Light DOM vs shadow DOM — when to encapsulate component styles and when to let global styles apply. Use when deciding how to structure a custom element.
• Extension Patterns: CSS-first patterns for shipping custom elements with sensible defaults and clean override surfaces — cascade layers, part attributes, custom properties, revert-layer, and JS extension seams (events, attributes, methods, hook properties, slots, mixins). Use when designing a component API or extending an existing custom element.
• Async Component Loading: Fetch component HTML files on demand, parse them into fragments, and inject templates, styles, and scripts. Use when deferring component loading to reduce initial page weight.
• Document Bootstrap: Clone a <template>, discover bindings via plugins, and return a reactive render function powered by Vue's effect(). Use when connecting templates to custom elements with reactive rendering.
• HTML Includes: Runtime HTML composition via <html-include> elements that load component files in parallel. Use when composing pages from separate HTML component files without a bundler, especially for prototyping.
• Reactive DOM Binding: Plugin-based binding system with seven binding types and TreeWalker traversal, powered by Vue's reactivity. Use when prototyping reactive web components without a framework or build step.
• Publishing Web Components: Package and publish web components to npm or GitHub Packages as plain ES modules. Use when preparing a web component for distribution.

CSS

Patterns for advanced CSS styling: generating perceptually uniform color palettes from seed colors, controlling element styles dynamically at runtime using either CSS custom properties or CSS-in-JS template literals, and highlighting text ranges without modifying DOM structure.

Topics

• CSS Centering: Modern centering methods for every layout context — block containers, grid, flexbox, absolute positioning, anchor positioning, and text. Includes a decision guide and safe/unsafe alignment. Use when centering elements vertically, horizontally, or both.
• Focus Styling: Global :focus-visible outline with a --color-focus token, replacing per-element box-shadow hacks. Use when establishing a consistent focus indicator across an application.
• CSS Color Scales: Perceptually uniform color palettes from a seed color using LCH, chroma easing, and gamma correction. Use when building a color system.
• Dynamic Styles: Runtime style changes via CSS custom properties or CSS-in-JS template literals. Use when element styles depend on JavaScript values like scroll position or user input.
• Text Highlighting: Paint text ranges (search matches, syntax tokens, annotations) using the CSS Custom Highlight API without modifying DOM structure. Use when highlighting text in large documents.

DOM

Patterns for working with the browser DOM: friendlier query and manipulation APIs, element creation helpers, declarative behavior binding, keyboard shortcut listeners, semantic attribute selectors, and a snapshot utility for capturing page state.

Topics

• Better DOM API: Convenience wrappers that unify querying, traversal, and event handling across Document, DocumentFragment, and Element. Use when raw DOM APIs are too verbose but a full library is overkill.
• Declarative Element Behavior: Bind JavaScript behavior to DOM elements via CSS selectors and HTML attributes instead of manual wiring. Use in multi-page apps or with dynamically inserted HTML.
• DOM Factory: Helpers for creating elements, text nodes, fragments, and parsed HTML in single expressions. Use when building DOM nodes in utility code or tests without a template library.
• Semantic Selectors: ARIA and semantic attribute selectors for styling state changes, selecting elements, and writing stable test selectors. Use instead of custom data attributes or class-name conventions.
• Semantic DOM Snapshot: Strip non-semantic noise from a page and extract a minimal representation preserving semantic HTML, ARIA, functional attributes, and visible text. Use for AI agents, accessibility audits, or content extraction.
• Keyboard Shortcut Listener: Declarative, element-scoped keyboard shortcut binding with a chainable API and proxy-based key descriptors. Use when binding keyboard shortcuts to elements.
• Visual DOM Snapshots: Clone live DOM with inlined CSS into a self-contained HTML string. Use for bug reports, design-tool export, visual regression testing, or archiving a page without a server.

See also

• Playwright Browser Testing: End-to-end browser testing where semantic selectors provide stable test queries.

Browser HTTP

Patterns for browser-side HTTP: thin fetch() wrappers with descriptive errors, pre-configured Axios clients with JSON headers and cache control, response interceptors for connection-status tracking, and environment-aware caching that disables the browser cache during local development.

Topics

• Browser HTTP: Thin fetch wrapper and pre-configured Axios client with error handling, default headers, and connection-status interceptors. Use when making HTTP requests from browser JavaScript.
• Local Dev No Cache: Hostname-based localhost detection that bypasses the browser cache during development. Use when local requests serve stale content.

See also

• Simple RPC: Server-side RPC endpoint that pairs with browser HTTP clients for schemaless method dispatch.

Web Layout

Techniques for precise element positioning and stable layouts: using CSS anchor positioning for viewport-aware floating UI like tooltips and dropdowns, preventing layout shifts when button text changes between states, and making entire containers clickable without nesting interactive elements.

Topics

• CSS Anchor Positioning: Native browser positioning for tooltips, dropdowns, and popovers that automatically flips to stay in viewport. Use when floating UI needs viewport-aware placement without JavaScript.
• Button Layout Stability with Dynamic Content: CSS grid stacking technique that overlays all button states in one cell so the button never shifts layout. Use when button text changes between states like "Save" and "Saving...".
• Clickable Container with Child Controls: Making clickable containers that also contain independently clickable child controls — without nesting interactive elements. Use when a container needs both a primary click target and embedded secondary controls.

Web Modals

Patterns for building robust modal dialogs and overlays: making background content inert so keyboard and screen reader focus stays in the modal, preventing body scroll while a modal is open, and correctly handling nested modals that stack multiple locks.

Topics

• Inert Controller: Reference-counted inert attribute management that keeps background content non-interactive across nested overlays. Use when modals or dialogs need to trap focus and block the background.
• Reference Counting Lock: Shared lock that stays active until every caller releases it, unlike a mutex. Use when multiple independent callers need to coordinate a shared resource like scroll lock or inert state.
• Scroll Lock: Prevent page scrolling behind modals with iOS Safari workarounds and nested modal support. Use when opening a dialog, drawer, or fullscreen overlay.

See also

• Vue useInert Composable: Vue composable wrapper for InertController with automatic cleanup on unmount.
• Vue useScrollLock Composable: Vue composable wrapper for ScrollLock with automatic cleanup on unmount.
• Animate Overlay from Trigger: View Transitions API for morphing overlays from their trigger elements.

Web Patterns

Patterns for managing browser state and navigation: tracking the current page URL reactively, pushing and replacing history entries through the Navigation API, and subscribing to URL changes with event emitters and framework composables.

Topics

• Reactive Page URL: EventTarget wrapper around the Navigation API with push(), replace(), and reactive URL param composables. Use when your app needs to subscribe to URL changes instead of polling.

Web Prototyping

Patterns for rapid browser-based prototyping without build tools: a lightweight module system for coordinating scripts, CDN loading for npm and GitHub packages, SVG sprite icons from CDNs, self-contained single-file HTML applications, and a hot reloader for local HTML files under live review.

Topics

• Browser Module System: Promise-based registry that lets <script> blocks share code in any order without a bundler. Use when prototyping in the browser and multiple scripts need to share code.
• CDN Icons with SVG Sprites: Fetch an SVG sprite sheet from a CDN and render icons via a <ui-icon> web component. Use when a prototype needs icons without installing an icon library.
• Load Packages from CDN: Load npm packages directly from jsdelivr or esm.run via script tags or ES module imports. Use when building prototypes or demos without npm install.
• Deploy a Small Stateful Web App: Cloudflare Worker + D1 database deployed via the Cloudflare MCP server — persistent data, optional password gate, no build step. Use when you need a web app with server-side state that an agent can deploy end-to-end.
• Single-File HTML App: Self-contained HTML with embedded styles, scripts, and CDN dependencies. Use when building quick prototypes, demos, or shareable standalone applications.
• Hot Reload for Local HTML Files: A dependency-free poller embedded in a self-contained HTML artifact that reloads the page when its bytes change, but only when served from localhost, so a shared copy stays inert. Use when an agent iterates on an HTML artifact a human reviews live in the browser.
• Transmogrifier: A prototyping method for rapidly exploring a complex design space and converging on a final design. Use when a component has many interdependent design decisions to evaluate.

Vite

Patterns for configuring Vite: multi-page application setup with automatic HTML entry-point discovery, path aliasing, build-time HTML composition via a custom includes plugin, and Vue-based MPA architecture where each page is a self-contained app.

Topics

• Vite Configuration: Foundational vite.config.js setup covering MPA mode, automatic HTML entry-point discovery, and path aliases. Use when starting or configuring a Vite project.
• Vite HTML Includes Plugin: Build-time HTML composition that inlines <link rel="include"> fragments recursively. Use when composing HTML pages from reusable fragments without a server.
• Vue Multi-Page Application: Architecture where each page is a standalone Vue app with its own HTML entry point and co-located resources. Use when building a multi-page app with Vue and Vite.

VitePress

Patterns for building documentation sites with VitePress: custom page data transforms, Vue components integrated via layout slots, and theme customization.

Topics

• Auto Nav: Auto-generate nav and sidebar config from the file system at build time. Use when manually maintaining navigation config becomes tedious or error-prone.
• Linked Assets: Make relative links from markdown to non-markdown files (scripts, configs, demo pages) resolve to real URLs on the docs site. Use when a skill links to a .sh, .yaml, .js, or HTML demo.
• Copy Buttons: Add copy-link and copy-markdown buttons to every page using build-time page data and a Vue component in the doc-before layout slot. Use when readers need one-click access to a page's URL or markdown source.
• File a Bug Button: Add a "File a Bug" button that opens the GitHub issue form with the current page URL and any selected text pre-filled. Use when readers should be able to report issues directly from the docs.
• Homepage Hero: Style a landing page with VitePress's built-in home layout — hero section, action buttons, and optional feature cards, all from frontmatter.

See also

• Vite Configuration: Foundational Vite setup that VitePress builds on — MPA mode, entry-point discovery, and path aliases.

Vue

Patterns for building Vue 3 applications: reusable components with v-model and accessibility, composables for common async and UI state, reactivity wrappers with lifecycle control, and custom directives.

Topics

• Vue Input Component: Styled text input with floating label, v-model support, and programmatic focus via defineExpose. Use when building form inputs with consistent styling.
• Vue Select Component: Custom-styled select dropdown backed by a hidden native <select> for full accessibility. Use when the default browser select appearance needs to be replaced.
• Vue ValidationErrors Component: Styled error box with summary and bulleted error list that renders only when errors are present. Use when displaying form validation feedback.
• Vue useDataLoader Composable: Reactive wrapper for async data fetching with loading, loaded, and error states. Use when loading data from an API on mount or on demand.
• Vue useForm Composable: Form state management with data loading, validation, submission, and automatic re-validation. Use when building forms that need a complete validation lifecycle.
• Vue useProgress Composable: Reactive progress tracker for batch async operations, exposing a 0-1 proportion. Use when showing progress bars for parallel async work.
• Vue useInert Composable: Composable wrapper around InertController for making background content non-interactive. Use when opening modals or overlays that should disable the page behind them.
• Vue useScrollLock Composable: Composable wrapper around ScrollLock with automatic cleanup on unmount. Use when preventing background scrolling while an overlay is open.
• Vue useShowHide Composable: Reactive toggle for overlay visibility with an optional associated value. Use when controlling dialog or drawer open/close state from a parent.
• Vue Watcher Class: Stateful wrapper around Vue's watch() with explicit start/stop lifecycle control. Use when you need to pause and resume watching programmatically.
• Vue Autofocus Directive: Custom directive that focuses the first focusable element and selects its text on mount. Use when auto-focusing inputs in dialogs or forms.

See also

• Inert Controller: Reference-counted inert management wrapped by the useInert composable.
• Scroll Lock: Scroll prevention with nested modal support, wrapped by the useScrollLock composable.
• Vue Multi-Page Application: MPA architecture where each page is a standalone Vue app with Vite.