Generate and run end-to-end tests with Playwright. Creates test journeys, runs tests, captures screenshots/videos/traces, and uploads artifacts.

Web accessibility specialist enforcing WCAG 2.1 AA / 2.2 AA / EAA compliance and inclusive design. Covers ARIA roles/states/properties, semantic HTML5, keyboard navigation (focus management, focus trap, skip links), screen reader testing (NVDA, JAWS, VoiceOver), color contrast (4.5:1 / 3:1 ratios), text alternatives (alt, aria-label, aria-labelledby), form accessibility (label associations, error messages, fieldsets), live regions (aria-live), prefers-reduced-motion, automated tools (axe-core, Lighthouse, WAVE, Pa11y, Storybook a11y addon), and EU EAA / French RGAA / US ADA legal requirements. Use when auditing a UI for accessibility, fixing WCAG violations, designing accessible components, or preparing for an EAA audit.

End-to-end testing specialist using Vercel Agent Browser (preferred) with Playwright fallback. Use PROACTIVELY for generating, maintaining, and running E2E tests. Manages test journeys, quarantines flaky tests, uploads artifacts (screenshots, videos, traces), and ensures critical user flows work.

Frontend design system and UI/UX specialist for design-token architecture, accessible component libraries, and Figma-to-code workflows. Covers design tokens (colors, typography, spacing, shadows, breakpoints) with Style Dictionary and Figma Variables, atomic design (atoms → molecules → organisms → templates → pages), compound and headless components (Radix, Headless UI), Tailwind CSS mastery (custom themes, plugins, dark mode, JIT), Storybook documentation, accessibility (WCAG 2.1 AA, ARIA, keyboard nav). Use when designing a design system, building reusable components, implementing Figma designs, or auditing UI consistency.

GraphQL specialist for schema design, federation, and resolver optimization. Covers SDL-first vs code-first schema design, Apollo Server / GraphQL Yoga / Mercurius / Hot Chocolate, Apollo Federation v2 (subgraphs, entities, @key, @requires), Relay-style cursor pagination, DataLoader for N+1 elimination, persisted queries and APQ, schema directives (@auth, @cacheControl), schema stitching, GraphQL subscriptions over WebSocket/SSE, error handling (errors as data, union types), introspection security, and clients (Apollo Client, urql, Relay, Hasura). Use when designing a GraphQL schema, debugging resolver performance, federating microservices, or migrating from REST to GraphQL.

Web analytics setup pattern library — Google Analytics 4 with gtag and Measurement Protocol (server-side events), Plausible Analytics (privacy-friendly, no cookies, EU-hostable), Matomo (self-hosted GDPR-compliant alternative), Hotjar / Microsoft Clarity (heatmaps + session recordings), PostHog (product analytics + feature flags), consent management with cookie banners (GDPR-compliant opt-in before loading trackers), event taxonomy best practices (noun_verb naming, standardized properties), funnel tracking, goal conversions, and UTM parameter handling. Use when setting up analytics on a web project: GA4 installation, cookie consent flow, custom event tracking, attribution setup, privacy-friendly analytics alternatives, or server-side tracking to bypass ad blockers. Differentiates from generic observability (Sentry, Datadog) by focusing on marketing/product analytics and user behavior tracking.

Authentication providers pattern library for modern web apps — Auth0 (enterprise SSO, Universal Login, Actions, rules), Clerk (React-first, pre-built UI components, organizations, invitations), NextAuth.js / Auth.js (open-source flexible, OAuth providers, custom credentials), Supabase Auth (Postgres + Row Level Security integration, magic links, OAuth), Lucia Auth (TypeScript-first, self-managed sessions, framework-agnostic), WebAuthn / Passkeys (passwordless FIDO2 via @simplewebauthn), and OAuth 2.0 + PKCE flows. Use when implementing authentication on a web project: choosing a provider, setting up social login (Google, GitHub, Microsoft, Apple), magic links, multi-factor authentication, protected routes, role-based access control, or migrating between auth providers. Differentiates from backend-only auth patterns by covering the full frontend + backend integration for Next.js, Remix, Nuxt, and Astro.

Real-time accessibility guidance during coding. Provides inline a11y best practices, ARIA patterns, and fix suggestions as you write UI code. Scope: proactive a11y guidance while coding ONLY. For full WCAG compliance auditing with axe-core scans, use the accessibility-auditor agent instead.

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

Generate and audit visual design systems. Extracts design tokens, scores UI consistency across 10 dimensions, and detects AI-generated design slop. Use when asked to create a design system, audit visual consistency, or check for generic AI aesthetics.

Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies.

HTML email template authoring pattern library for web projects — React Email (component-based JSX templates, preview dev server, integration with Resend/Postmark/SendGrid), MJML (markup language that compiles to cross-client HTML tables), Handlebars + juice (inline CSS postprocessing), email-specific HTML quirks (tables for layout, inline CSS only, Outlook conditional comments, Gmail 102 KB clipping, dark mode CSS variables, CSS custom properties), responsive email patterns (media queries vs fluid layouts), preheader text, alt text for images, testing across clients (Litmus, Email on Acid, Mailpit). Use when designing or maintaining HTML email templates: authoring welcome emails, password resets, order confirmations, receipts, newsletters, or any branded communication. Differentiates from email-transactional (backend sending logic) by focusing on the template authoring and cross-client rendering. Complements ghost-expert (Ghost newsletters), sanity-expert (Sanity-managed email content), and wordpress-expert (WooCommerce email templates).

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "page load speed", "Core Web Vitals", "HTTP/2", "resource hints", "network latency", or "render blocking". Covers TCP/TLS optimization, caching strategies, WebSocket/SSE, and protocol selection.

Internationalization (i18n) pattern library for modern web apps — next-intl (Next.js App Router recommended, routing + messages + date/number formatting), react-i18next (React universel), @nuxtjs/i18n (Nuxt officiel), @paraglidejs/paraglide (type-safe compile-time), Astro i18n (built-in routing), locale-aware routing strategies (sub-path /fr/about, sub-domain fr.example.com, query param ?lang=fr), ICU MessageFormat for pluralization and gender rules, translation management workflows (Crowdin, Lokalise, Tolgee, Phrase), hreflang coordination with SEO, RTL support for Arabic/Hebrew, date/number/currency formatting via Intl.NumberFormat and Intl.DateTimeFormat, and automated translation pipelines. Use when building or maintaining multilingual sites: initial i18n setup, adding a new locale, translation workflow setup, pluralization edge cases, or migrating between i18n libraries. Differentiates from backend i18n (server-side content translation in CMS) by focusing on frontend routing, message extraction, and runtime formatting.

Image dimension management rules to prevent workflow blocking. Applies to ALL image sources — browser screenshots, ADB captures, Figma/Canva, user-pasted images.

Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.

Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "fix the design", "Tailwind styling", "color palette", or "visual hierarchy". Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

Technical SEO pattern library for modern web stacks — server-side meta tags (Next.js generateMetadata, Remix meta, Nuxt useHead), JSON-LD structured data (schema.org Product, Article, Organization, BreadcrumbList, FAQPage, LocalBusiness), XML sitemaps (dynamic generation with next-sitemap, automatic Shopify/WordPress/Sanity feeds), robots.txt rules, canonical URLs, hreflang for multi-region/multi-language, Open Graph and Twitter Card meta, Core Web Vitals optimization (LCP/CLS/INP), and Google Search Console integration. Use whenever implementing SEO on a website: setting up meta tags per route, adding structured data, generating sitemaps, managing redirects, auditing Core Web Vitals, or preparing a site for Google Search Console. Differentiates from generic frontend-patterns by focusing exclusively on search engine discoverability and ranking factors.

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

Visual regression testing pattern library for modern web apps — Percy (BrowserStack, Git-integrated, cross-browser), Chromatic (Storybook-native, built by Storybook maintainers), Applitools Eyes (AI-powered visual diff with Ultrafast Grid), BackstopJS (open-source Puppeteer-based local runner), Playwright built-in visual comparisons (toHaveScreenshot / toMatchSnapshot), Cypress visual testing via plugins. Covers baseline management, visual diff algorithms (pixel-perfect vs perceptual), dynamic content handling (animations, timestamps, random IDs), viewport matrices, browser matrices, CI integration (approve/reject diffs in PR), Storybook component snapshot workflows, and strategies for avoiding flaky tests (fixed dates, font loading, disable animations). Use when adding visual regression to a new project, choosing between tools, setting up Storybook with Chromatic, handling dynamic content, or debugging flaky visual tests. Differentiates from e2e-testing by focusing exclusively on pixel-level rendering correctness, not functional behavior.

1 hook across 1 event