Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
日本語の概要は準備中です。原文の説明を表示しています。
cloudnative-co/claude-code-starter-kit1532026年10月8日 更新
無料GitHub で公開
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
インストール方法を見る含まれるファイル（5）
- SKILL.md2.1 KB
- references/component-patterns.md2.1 KB
- references/forms-errors-a11y.md4.2 KB
- references/hooks-patterns.md1.4 KB
- references/state-performance.md3.1 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Frontend Development Patterns
Modern frontend patterns for React, Next.js, and performant user interfaces.
Pattern Categories
Component Patterns
Composition over inheritance, compound components, render props. See references/component-patterns.md for implementations.
Custom Hooks
Reusable hooks: useToggle, useDebounce; server state via TanStack Query / SWR. See references/hooks-patterns.md for implementations.
State Management & Performance
Context + Reducer pattern, memoization, code splitting, virtualization. See references/state-performance.md for implementations.
Forms, Error Boundaries, Animation & Accessibility
Controlled forms with validation, ErrorBoundary, motion (formerly Framer Motion), keyboard navigation, focus management. See references/forms-errors-a11y.md for implementations.
Quick Decision Guide
| 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.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
ClickHouse database patterns, query optimization, analytics, and data engineering best practices for high-performance analytical workloads.
日本語の概要は準備中です。原文の説明を表示しています。
cloudnative-co/claude-code-starter-kit1532026年10月8日 更新
日本語の業務文書を作成・修正するときに使用する共通品質基準。事実性、確度、論理、簡潔さ、自然な日本語を守る。提案書、報告、技術説明、議事録、メール、Slack、要約、レビューに適用する。創作、広告コピー、コードや構造化データだけの生成には使用しない。
cloudnative-co/claude-code-starter-kit1532026年10月8日 更新
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
日本語の概要は準備中です。原文の説明を表示しています。
cloudnative-co/claude-code-starter-kit1532026年10月8日 更新
Formal evaluation framework for Claude Code sessions implementing eval-driven development (EDD) principles.
日本語の概要は準備中です。原文の説明を表示しています。
cloudnative-co/claude-code-starter-kit1532026年10月8日 更新
Example project-specific skill template. Use as a starting point when creating guidelines for your own projects.
日本語の概要は準備中です。原文の説明を表示しています。
cloudnative-co/claude-code-starter-kit1532026年10月8日 更新