Run any Skill in Manus with one click

Get Started

typescript-development

Stars6

Forks0

UpdatedMarch 22, 2026 at 08:24

Develop typescript frontend and/or backend

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

rocket-generator

rocket-generator/next-template

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	typescript-development
description	Develop typescript frontend and/or backend

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

More from this repository

same repository

admin-page-scaffolding

rocket-generator/next-template

Use when creating pages under src/app/(site)/(authorized)/admin/. Covers list/detail/edit/create page patterns with DataTable/DataView/DataForm, repositories under src/repositories/, request schemas under src/requests/admin/, and AdminPageHeader breadcrumbs.

2026-04-186

auth-implementation

rocket-generator/next-template

Use when modifying Better Auth + Prisma authentication: src/libraries/auth.ts, src/libraries/auth-client.ts, src/proxy.ts, src/services/auth_service.ts, auth-related actions.ts, or prisma/schema.prisma auth models (User/Session/Account/Verification). Covers session helpers, URL/secret env resolution, DB TLS, and PUBLIC_PATHS.

2026-04-186

data-access-repository

rocket-generator/next-template

Use when creating or modifying files under src/repositories/, src/models/, or src/requests/. Covers BaseRepository inheritance (Prisma/API/Local/Airtable/Dify), Zod schema placement, and separation between repository and schema files.

2026-04-186

email-provider

rocket-generator/next-template

Use when changing this template's mail delivery backend, reviewing email env setup, switching between `ses` and `smtp`, or adding a new provider such as Resend, SendGrid, Postmark, or Mailgun. Covers EMAIL_PROVIDER routing, EMAIL_FROM priority, dynamic import for Node-only SDKs, and test coverage for both email.test.ts and Better Auth callback smoke.

2026-04-186

i18n-messages

rocket-generator/next-template

Use when adding or changing translations in messages/ja.json or messages/en.json, using getTranslations/useTranslations, or updating next-intl configuration under src/i18n/. Covers message key hierarchy, Server/Client Component APIs, dynamic and rich-text patterns, and JSON duplicate-key pitfalls.

2026-04-186

nextjs-component-design

rocket-generator/next-template

Use when adding or modifying pages under src/app, or components under src/components (atoms/molecules/organisms) in this Next.js App Router project. Covers Server/Client Component boundary, Atomic Design placement, Server Actions in actions.ts, URL-based state management, sidebar active-state, and shadcn-only atoms rule.

2026-04-186

name	typescript-development
description	Develop typescript frontend and/or backend

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