# Typescript Development

> Develop typescript frontend and/or backend

- Skill: `majiayu000/typescript-development-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/typescript-development-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/typescript-development-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- 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/typescript-development-3

---

# TypeScript Development Guidelines

## Core Requirements
- TypeScript must be used for all code generation
- Never use the `any` type as it will break the build
- Always use Shadcn and Tailwind CSS, but implement without using Card components
- Avoid typing components with React.FC
- Use const for component declarations instead of function
- Follow React's composable patterns

## State Management and Performance
- Minimize use of useState and useEffect hooks
- Prefer computed state where possible
- Use useMemo and useCallback when necessary to prevent unnecessary re-renders
- Prioritize server actions and useActionState
- Fall back to fetch and API route handlers when server actions aren't suitable
- When components need to modify data, they should receive server actions as props

## Component Architecture
- Prioritize server components whenever possible
- Create client components only when necessary
- Utilize Suspense and streaming capabilities where possible
- For components requiring specific functionality not tightly coupled to the component itself, create higher-order components
- Group related components, hooks, and functions in the same file when it makes semantic sense for easier distribution and usage

## Forms and Data Handling
- Implement forms as server-side components
- Only use client components for dynamic operations (e.g., user registration sections)
- Always validate inputs using Zod in server actions and API endpoints
- Always HTML escape text content

## Custom Hooks
- Create custom hooks to encapsulate specific logic when grouping useState and useEffect makes sense
- Custom hooks should be focused and reusable

## Best Practices
- Group related components, hooks, and functions in the same file when it makes semantic sense for easier distribution and usage
- Follow consistent naming conventions
- Maintain clear separation of concerns
- Ensure proper error handling
- Implement proper type safety throughout the codebase