# Component New

> Create a new React component with TypeScript and modern best practices

- Skill: `majiayu000/component-new` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/component-new`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/component-new/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/component-new

---


# Create New Component

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
- `useMemo()` 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.