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-kit1542026년 10월 12일 업데이트
무료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-kit1542026년 10월 12일 업데이트
日本語の業務文書を作成・修正するときに使用する共通品質基準。事実性、確度、論理、簡潔さ、自然な日本語を守る。提案書、報告、技術説明、議事録、メール、Slack、要約、レビューに適用する。創作、広告コピー、コードや構造化データだけの生成には使用しない。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
cloudnative-co/claude-code-starter-kit1542026년 10월 12일 업데이트
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
cloudnative-co/claude-code-starter-kit1542026년 10월 12일 업데이트
Formal evaluation framework for Claude Code sessions implementing eval-driven development (EDD) principles.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
cloudnative-co/claude-code-starter-kit1542026년 10월 12일 업데이트
Example project-specific skill template. Use as a starting point when creating guidelines for your own projects.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
cloudnative-co/claude-code-starter-kit1542026년 10월 12일 업데이트