Frontend

WHEN: Next.js project review, App Router patterns, Server/Client Component separation, data fetchingWHAT: Router pattern analysis + SC/CC separation + next/image·font optimization + Server Actions reviewWHEN NOT: General code quality → code-reviewer, Bundle performance → perf-analyzer

Analyze web interfaces for UX issues, accessibility compliance (WCAG 2.1), color contrast, typography hierarchy, responsive design, and Core Web Vitals. Returns actionable improvements with code examples.

Design and build reusable, composable UI components following single responsibility principle with clear interfaces and proper state management. Use this skill when creating React components, Vue components, or other framework components, defining component props and interfaces, managing component state, building reusable UI elements, working with component files (*.tsx, *.jsx, *.vue, *.svelte, components/*, ui/*), implementing component composition patterns, encapsulating component logic, documenting component APIs, keeping state local or lifting it up when needed, designing component hierarchies, or refactoring monolithic components into smaller pieces. Apply this skill when building new components, refactoring existing component structures, reviewing component design patterns, or ensuring components are maintainable and reusable.

This skill should be used when users need to capture screenshots of web pages. It supports full-page screenshots, viewport-specific captures, responsive screenshots across multiple device sizes, and element-specific screenshots. Use this skill for visual testing, documentation, design reviews, or any task requiring automated browser screenshots.

Spec-Driven Development (SDD) agent for maintaining synchronized specifications, code, and documentation.Core principle: "1 Todo = 1 Commit = 1 Spec Update".Use this skill when:- Starting a new feature or task that needs specification- Implementing code based on existing specifications- Validating that code matches specifications- Updating CHANGELOG.md with changes- Managing PRD/specification documents- Ensuring traceability between requirements and implementationTriggers: "spec", "specification", "PRD", "requirements", "SDD", "spec-driven"

Guide developers through mutation testing to assess and improve test suite quality

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reports, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact, or generate a new theme on-the-fly.

Tailwind CSS styling patterns, dark theme implementation, and theme management for this project. Use when styling components, implementing UI changes, or working with the design system.

Semantic HTML, keyboard navigation, focus states, ARIA labels, skip links, and WCAG contrast requirements. Use when ensuring accessibility compliance, implementing keyboard navigation, or adding screen reader support.

Deploy and manage Docker containers on Cloudflare's global network alongside Workers. Use when building applications that need to run Python code, process large files (multi-GB zips, video transcoding), execute CLI tools, run AI inference, create code sandboxes, or any workload requiring more memory/CPU than Workers provide. Triggers include requests to run containers, execute arbitrary code, process large files, deploy backend services in Python/Go/Rust, or integrate heavyweight compute with Workers.

Build production-ready NestJS modules with entities, DTOs, services, controllers

Modern R development practices emphasizing tidyverse patterns (dplyr 1.1 and later, native pipe, join_by, .by grouping), rlang metaprogramming, performance optimization, and package development. Use when Claude needs to write R code, create R packages, optimize R performance, or provide R programming guidance.

Comprehensive project architecture analyzer that identifies technology stacks, build tools, and architectural patterns. Use when you need to quickly understand a project's structure, dependencies, and technical configuration. Provides analysis for frontend frameworks (Vue/React/Angular), Node.js environments, package managers, TypeScript usage, linters, and architecture patterns.

For leaders evaluating dashboards, metrics, or AI-generated reports to determine if they measure realityor generate confident-looking noise (Potemkin maps).Helps identify gaming potential, blind spots, and whether you should trust a metric more, less, or differently.Use when implementing new metrics, questioning existing dashboards, evaluating vendor claims,or when something feels off about your data.Keywords: dashboard audit, metrics, KPIs, gaming, Goodhart's law, AI reports, data quality,measurement validity, blind spots, Potemkin, are my metrics real, can I trust this data

実装前にノウハウを確認。Tauriコマンド追加、serde、WebSocket通信、設定項目追加、UI/オーバーレイ実装、セキュリティ関連の作業時に自動的にチェックリストを提供する。

Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.

Plan and triage work into GitHub issues. Use when Codex needs to decide whether a new issue is required, describe the problem, outline high-level plans and goals, propose architecture, split large work into sub-issues, add labels, and create a GitHub branch for each issue using gh.

Guide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navigation (Link, redirect, useRouter), cookies/headers access, and 'use client' directive. Activates when prompt mentions useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client'. Essential for avoiding mixing server/client APIs.

구현 품질 종합 검증. Use when:(1) 구현 완료 후 최종 검증, (2) PR 전 품질 체크,(3) 팀 코덱스 + Reactive + 테스트 통합 검증.

MANDATORY for ALL JavaScript code! PROACTIVE - Use when writing JavaScript/TypeScript code. Requires JSDoc comments with @skill-verified tag for all functions. Essential for code documentation and IDE support.