Menu
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Web取得の標準前処理レイヤー。URL・公式ドキュメント・ブログ・ニュース・OSSページを読むときは、原則として毎回このSkillでDefuddleを使い本文をMarkdown/JSON化してから読む。生HTMLのまま要約・分析・比較・レビューしない。トリガー例: URLを読む/Webページ要約/OSS調査/公式Doc確認/記事解析/競合サイト確認/Web一次情報確認。
Formal evaluation framework for Claude Code sessions implementing eval-driven development (EDD) principles.
Example project-specific skill template. Use as a starting point when creating guidelines for your own projects.
Practical prompt patterns and techniques for effective Claude Code usage. Reference when crafting prompts, planning workflows, or debugging interactions.
Use this skill when the user explicitly asks for TDD or a tests-first workflow, or when developing a new feature with a test coverage requirement. Provides a structured red-green-refactor workflow with unit, integration, and E2E test guidance.
Comprehensive verification system for Claude Code sessions. Use after implementation to validate correctness.
| name | frontend-patterns |
| description | Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. |
| when_to_use | Use when building or reviewing React or Next.js UI, custom hooks, state management, or frontend performance work. |
Modern frontend patterns for React, Next.js, and performant user interfaces.
Composition over inheritance, compound components, render props. See references/component-patterns.md for implementations.
Reusable hooks: useToggle, useDebounce; server state via TanStack Query / SWR. See references/hooks-patterns.md for implementations.
Context + Reducer pattern, memoization, code splitting, virtualization. See references/state-performance.md for implementations.
Controlled forms with validation, ErrorBoundary, motion (formerly Framer Motion), keyboard navigation, focus management. See references/forms-errors-a11y.md for implementations.
| Need | Pattern |
|---|---|
| Shared state across siblings | Context + Reducer |
| Expensive computation (no React Compiler) | useMemo |
| Stable callback reference (no React Compiler) | useCallback |
| Prevent unnecessary re-renders (no React Compiler) | React.memo |
| Large list rendering | Virtualization (@tanstack/react-virtual) |
| Heavy component | lazy() + Suspense |
| Form validation | Controlled form + error state |
| Graceful error handling | ErrorBoundary class component |
| Keyboard accessible UI | role, aria-*, onKeyDown handlers |
Note: On projects using React Compiler, manual memoization (useMemo/useCallback/React.memo) is generally unnecessary; add it only when profiling shows a real problem.
Remember: Choose patterns that fit your project complexity. Not every project needs every pattern.
