do-web-ui-template-2026

Playwright E2E testing and responsive screenshot testing across 12 viewports. Use when writing E2E tests, taking screenshots, or verifying layouts. Triggers: "playwright", "e2e", "responsive", "screenshot", "viewport", "mobile", "tablet", "desktop".

Comprehensive testing strategies for web UI — unit, integration, E2E, property-based, accessibility, visual regression, and performance testing with Vitest, Playwright, fast-check, and axe-core. Use when writing tests, debugging failures, improving coverage, or setting up test infrastructure. Triggers: "test", "vitest", "unit", "integration", "e2e", "coverage", "mock", "snapshot", "axe", "playwright", "fast-check", "tdd".

Modern CSS features: anchor positioning, container queries, native nesting, @scope, view transitions, popover API, @starting-style, color-mix. Use when building modern UI with cutting-edge CSS. Triggers: "css", "modern", "anchor", "container", "nesting", "popover", "transition".

Standard agent workflow pattern: explore→plan→code→verify→commit. Use when starting any coding task, feature implementation, or bug fix. Triggers: "workflow", "implement", "feature", "fix", "task".

Fan-out/fan-in patterns for parallel agent work. Writer/reviewer pattern, conflict resolution, quality verification across parallel sessions. Use when working on multi-file changes or large migrations. Triggers: "parallel", "fan-out", "migration", "batch", "multi-file".

Browser debugging workflows for Chrome DevTools, Firefox DevTools, and AI agent debugging. Use when debugging UI issues, inspecting elements, analyzing performance, or troubleshooting rendering problems in the browser. Triggers: "debug", "devtools", "inspect", "console", "network", "performance", "memory", "render", "layout", "css issue", "js error".

WCAG 2.2 AA compliance, axe-core auditing, ARIA patterns, keyboard navigation. Use when auditing, writing, or reviewing web UI code for accessibility. Triggers: "accessibility", "a11y", "aria", "wcag", "axe", "screen reader".

Harness engineering guide — maps all sensors and feedforward guides, teaches self-correction protocol when a CI sensor fires. Use when a sensor fires, before making code changes, or when setting up agent context for a new task. Triggers: "harness", "sensor fire", "CI failure", "self-correction".

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

Structured logging, OpenTelemetry integration, error boundaries. Use when adding logging, tracing, error handling, or observability. Triggers: "logging", "log", "trace", "error boundary", "telemetry".

Bundle budgeting, Core Web Vitals, lazy loading, performance optimization. Use when optimizing performance, checking bundle size, or reviewing Core Web Vitals. Triggers: "performance", "bundle", "lcp", "cls", "inp", "lazy", "optimization".

semantic-release, conventional commits, changelog generation. Use when preparing releases, tagging, or publishing. Triggers: "release", "publish", "tag", "version", "changelog".

OWASP Top 10 checks, CSP headers, secrets scanning, dependency audit. Use when auditing security, adding CSP, or reviewing for vulnerabilities. Triggers: "security", "owasp", "csp", "xss", "injection", "headers".

Create new skills, modify and improve existing skills. Use when users want to create a skill from scratch, edit, or optimize an existing skill. Triggers: "create skill", "new skill", "add skill", "skill template".

Evaluate skill effectiveness with structure checks and real usage spot checks. Use when evaluating a skill, checking if a skill works, or benchmarking skill performance. Triggers: "evaluate skill", "check skill", "skill quality", "skill benchmark".

Break down complex tasks into atomic, actionable goals with clear dependencies. Use when planning work, breaking down features, or organizing tasks. Triggers: "decompose", "break down", "task", "plan", "subtask".

Detect and prevent generic AI-generated code patterns. Use when auditing, writing, or reviewing web UI code to avoid slop. Triggers: "slop", "ai-generated", "generic", "template", "boilerplate".

Atomic git workflow — validate, commit, push, verify CI. Use when committing changes, creating PRs, or pushing code. Triggers: "commit", "push", "pr", "merge request", "ci".

Reusable UI component patterns, design tokens, and CSS architecture. Use when creating, modifying, or reviewing UI components. Triggers: "component", "button", "card", "modal", "token", "css".

fast-check property-based testing for pure functions. Use when writing property-based tests or testing pure functions. Triggers: "property", "fast-check", "fc.assert", "invariant", "pure function".

Self-learning loop — capture lessons, update skills, improve the harness. Use when completing a phase, after failures, or when improving the harness. Triggers: "self-improve", "lesson", "learning", "harness improvement".