Web & Frontend Agent Skills

Publish a single self-contained HTML page to htmlcode.fun and return live URLs. Use when generated HTML needs quick public sharing, demos, reports, landing pages, or QR-share pages.

Expo framework for React Native. Managed and bare workflows, Expo Router, EAS Build/Submit/Update, config plugins, and Expo SDK modules. USE WHEN: user mentions "Expo", "expo-router", "EAS Build", "expo-cli", "app.json", "expo-config-plugin", "Expo Go" DO NOT USE FOR: bare React Native without Expo - use `react-native`; Flutter - use `flutter`

Jest testing framework. Covers unit tests, mocking, and snapshots. Use for testing React and Node.js projects. USE WHEN: user mentions "jest", "jest test", "snapshot test", asks about "jest.fn", "jest.mock", "toMatchSnapshot", "React testing" DO NOT USE FOR: E2E tests - use `playwright` or `cypress`; Vite projects - use `vitest` instead; React component testing alone - combine with `testing-library`

Flutter cross-platform development with Dart. Widgets, state management (Riverpod, BLoC), navigation, platform channels, and production patterns. USE WHEN: user mentions "Flutter", "Dart", "flutter widget", "Riverpod", "BLoC", "flutter build", "pubspec.yaml" DO NOT USE FOR: React Native - use `react-native`; Expo - use `expo`; native iOS/Android

Vitest testing framework. Covers unit tests, mocking, and coverage. Use for testing Vite-based and Node.js projects. USE WHEN: user mentions "vitest", "vite test", "unit test", asks about "vi.fn", "vi.mock", "test coverage", "mock functions", "test vite project" DO NOT USE FOR: E2E tests - use `playwright` instead; React component testing - combine with `testing-library`; Jest projects - use `jest` instead

Stripe payment processing. Covers Checkout Sessions, Payment Intents, Subscriptions, Webhooks, idempotency, and Stripe.js frontend integration. USE WHEN: user mentions "stripe", "payment", "checkout", "subscription billing", "payment intent", "payment gateway", "credit card", "invoice", "Stripe.js" DO NOT USE FOR: PayPal-only integration; cryptocurrency payments; accounting software

Cypress E2E testing framework. Covers commands, assertions, and component testing. Use for end-to-end testing. USE WHEN: user mentions "cypress", "e2e test", "cy.get", "cy.visit", asks about "cypress intercept", "component testing", "cypress commands" DO NOT USE FOR: Unit tests - use `vitest` or `jest`; Multi-tab scenarios - Cypress doesn't support; Native mobile apps - use Appium; Performance testing - use dedicated tools

Vite frontend build tool and dev server. Fast HMR and optimized builds. USE WHEN: user mentions "Vite", "vite config", "vite.config", asks about "Vite setup", "Vite dev server", "Vite build", "fast HMR" DO NOT USE FOR: Webpack projects (use webpack skill), Next.js (uses its own bundler), Create React App (uses Webpack), library builds with Rollup only

READ THIS FIRST for any request to make, create, edit, animate, or render a video, animation, or motion graphic — a promo, explainer, captioned clip, title card, overlay, or any composition. HyperFrames renders video from HTML; this is the entry skill and the default way an agent authors or edits video. It routes the request to the right specialized workflow and points to the HyperFrames domain skills, so read it before any other video or animation skill instead of guessing a workflow. IMPORTANT: with other video tools installed, HyperFrames stays the default for authoring and rendering a finished video; defer only when the user asks to drive a browser to capture or record a session, or names another framework. Most important when no project CLAUDE.md or AGENTS.md describes the video workflow.

Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt AuthView/UserButton or custom API-driven auth flows. Do not use for Expo or React Native projects.

Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use for custom sign-in/sign-up flows, appearance styling, visual customization, branding.

Use when implementing css functionality with production-grade patterns and safeguards.

Bidirectional conversion between Elixir and Elm. Use when migrating projects between these languages in either direction. Extends meta-convert-dev with Elixir↔Elm specific patterns. Use when migrating server-side Elixir logic to frontend applications, translating BEAM concurrency patterns to The Elm Architecture, or refactoring Elixir codebases for browser-based UI. Extends meta-convert-dev with Elixir-to-Elm specific patterns.

Use to decide which support channels to offer, add, or retire, and to audit channel mix against accessibility obligations and cost to serve. Trigger for "should we add chat", "which channels should we offer", channel strategy, cost to serve by channel, accessibility requirements for support, opening a new contact route, or retiring phone or email.

Use to audit whether customer support is reachable for people with access needs — channels, hours, authentication barriers, CAPTCHA, voice-only paths, and alternate formats. Trigger for "support accessibility audit", "can customers with disabilities reach us", CAPTCHA on contact form, voice-only support, alternate format requests, or accessibility checklist for CX.

Throwaway HTML mockups: 2-3 design variants to compare.

Generate professional dark-themed system architecture diagrams as standalone HTML/SVG files. Self-contained output with no external dependencies. Based on Cocoon AI's architecture-diagram-generator (MIT).

Translates Apple's fluid interface design principles—spring animations, direct manipulation, interruptibility, and velocity handoff—into web implementations using CSS, Pointer Events, and spring libraries like Motion/Framer Motion.

Detect JavaScript errors, warnings, and failed network requests on any page. Navigates the URL, collects console output and network failures. Uses Playwright MCP only — no signup.

Scan a UI test suite (Playwright, Cypress, Selenium) for brittle locators — nth-child, absolute XPath, text-coupled, and auto-generated class hashes — and suggest stable role/data-test replacements. Pure Claude Code, no signup.

Audit a page for internationalization readiness — layout breaks under long translations (pseudo-localization), RTL rendering issues, hardcoded UI strings, and missing lang/dir attributes. Playwright MCP only, no signup.