菜单
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
