Initial commit

commands/ui/component-new.md

@@ -0,0 +1,138 @@
+---
+description: Create a new React component with TypeScript and modern best practices
+model: claude-sonnet-4-5
+---
+
+Generate a new React component following 2025 best practices.
+
+## Component Specification
+
+$ARGUMENTS
+
+## Modern React + TypeScript Standards
+
+### 1. **Function Components Only**
+- Use function components (not class components)
+- React 19 patterns
+- Server Components where appropriate (Next.js)
+
+### 2. **TypeScript Best Practices**
+- Strict typing (`strict: true`)
+- Interface for props
+- Proper TypeScript utility types (ComponentProps, ReactNode, etc.)
+- NO `any` types
+- Explicit return types for complex components
+
+### 3. **Component Patterns**
+
+**Client Components** (interactive, use hooks)
+```typescript
+'use client'
+import { useState } from 'react'
+
+interface Props {
+  // typed props
+}
+
+export function Component({ }: Props) {
+  // implementation
+}
+```
+
+**Server Components** (default in Next.js App Router)
+```typescript
+interface Props {
+  // typed props
+}
+
+export async function Component({ }: Props) {
+  // can fetch data directly
+}
+```
+
+### 4. **State Management**
+- `useState` for local state
+- `useReducer` for complex state
+- Zustand for global state
+- React Context for theme/auth
+
+### 5. **Performance**
+- Lazy loading with `React.lazy()`
+- Code splitting
+- `use memo()` for expensive computations
+- `useCallback()` for callback functions
+
+### 6. **Styling Approach** (choose based on project)
+- **Tailwind CSS** - Utility-first (recommended)
+- **CSS Modules** - Scoped styles
+- **Styled Components** - CSS-in-JS
+
+## What to Generate
+
+1. **Component File** - Main component with TypeScript
+2. **Props Interface** - Fully typed props
+3. **Styles** - Tailwind classes or CSS module
+4. **Example Usage** - How to import and use
+5. **Storybook Story** (optional) - Component documentation
+
+## Code Quality Standards
+
+**Structure**
+-  Feature-based folder organization
+-  Co-locate related files
+-  Barrel exports (index.ts)
+-  Clear file naming conventions
+
+**TypeScript**
+-  Explicit prop types via interface
+-  Proper generics where needed
+-  Utility types (Pick, Omit, Partial)
+-  Discriminated unions for variants
+
+**Props**
+-  Required vs optional props
+-  Default values where appropriate
+-  Destructure in function signature
+-  Props spread carefully
+
+**Accessibility**
+-  Semantic HTML
+-  ARIA labels where needed
+-  Keyboard navigation
+-  Screen reader friendly
+
+**Best Practices**
+-  Single Responsibility Principle
+-  Composition over inheritance
+-  Extract complex logic to hooks
+-  Keep components small (<200 lines)
+
+## Component Types to Consider
+
+**Presentational Components**
+- Pure UI rendering
+- No business logic
+- Receive data via props
+- Easy to test
+
+**Container Components**
+- Data fetching
+- Business logic
+- State management
+- Pass data to presentational components
+
+**Compound Components**
+- Related components working together
+- Shared context
+- Flexible API
+- Example: `<Select><Select.Trigger/><Select.Content/></Select>`
+
+## React 19 Features to Use
+
+- **use()** API for reading promises/context
+- **useActionState()** for form state
+- **useFormStatus()** for form pending state
+- **useOptimistic()** for optimistic UI updates
+- **Server Actions** for mutations
+
+Generate production-ready, accessible, and performant React components following Next.js 15 and React 19 patterns.