Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

Loslegen

typescript-development

Sterne6

Forks0

Aktualisiert22. März 2026 um 08:24

Develop typescript frontend and/or backend

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

rocket-generator

rocket-generator/next-template

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·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

Mehr aus diesem Repository

gleiches 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