Europa

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Test and verify local web applications using browser automation. Triggers: 「ブラウザでテスト」「UIの動作確認」「スクリーンショット」「実際に動かして確認」 Use when: Verifying frontend functionality, debugging UI behavior, capturing screenshots. Uses AntiGravity's browser_subagent for browser interaction.

Guide users through a structured workflow for co-authoring documentation. Triggers: 「ドキュメントを書いて」「仕様書を作成」「READMEを更新」「提案書を作って」「PRD」「設計ドキュメント」 Use when: Writing documentation, proposals, technical specs, decision docs, or similar structured content. Workflow: Context Gathering → Refinement & Structure → Reader Testing

Analyze and fix failing E2E tests. Includes CI auto-repair mode for GitHub Actions failures. Triggers: 「テストが失敗」「CIが落ちている」「テストをデバッグ」「test failed」「flaky test」 Use when: E2E tests are failing, tests are flaky/unstable, error messages need investigation. Outputs: Fixed Page Object and spec files, error analysis reports.

Create new E2E tests using Playwright with Page Object Model pattern and semantic locators. Triggers: 「E2Eテストを書いて」「テストを作成して」「新機能のテストが必要」「E2E test」「create test」 Use when: Creating E2E tests for new pages or components, after implementing new features. Outputs: Page Object files (frontend/e2e/pages/) and spec files (frontend/e2e/*.spec.ts)

Guide for creating MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Triggers: 「MCPサーバーを作成」「外部API連携」「ツール統合」「MCP開発」 Use when: Building MCP servers to integrate external APIs or services. Recommended stack: TypeScript + MCP SDK

Master Next.js 16+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

Refactor existing E2E tests to use Page Object Model pattern and semantic locators. Triggers: 「テストをリファクタリング」「ロケータを改善」「Page Objectに変換」「refactor test」 Use when: Tests don't use semantic locators, Page Object pattern not applied, tests use deprecated patterns. Outputs: Updated/new Page Objects and refactored spec files.

Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Generates creative, polished UI that avoids generic "AI slop" aesthetics. Triggers: 「UIを作成」「コンポーネントを作って」「美しいページを」「デザインを改善」 Project stack: Next.js 16 + React 19 + TailwindCSS 4 + shadcn/ui

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.