ck:frontend-development

What problem does it solve?

Teams often face inconsistent component patterns, manual data fetching, and performance bottlenecks when building React applications, leading to duplicated effort and slower delivery.

Core Features & Use Cases

• Component Blueprint: Enforces React.FC with TypeScript, lazy loading, and Suspense loaders for consistent, testable components.
• Data Layer: Standardized useSuspenseQuery with TanStack Query for cache‑first fetching, reducing API calls.
• File Organization: Clear features versus components structure, import aliases, and styling conventions.
• Performance Toolkit: Guidelines for useMemo, useCallback, and React.memo to optimize rendering.
• Error & Loading Strategy: Mandatory Suspense boundaries, Snackbar notifications, and no early returns to prevent layout shift. These features help build new feature modules, create reusable UI components, and optimize existing pages in a Next.js TypeScript codebase.

Quick Start

Generate a new “user-profile” feature with a lazy‑loaded React component that uses useSuspenseQuery for data fetching.