codebelt-code-style

Original：🇺🇸 English

Translated

Enforces the CodeBelt TypeScript and React code style guide for project structure, naming conventions, component patterns, service patterns, testing, and TypeScript rules. Use when writing, reviewing, or refactoring TypeScript or React code, creating new files or components, organizing project directories, writing tests, defining Zod schemas, or when the user mentions code style, conventions, linting, file organization, or naming patterns.

4installs

Sourcecodebelt/codebelt-skills

Added on2026-02-23

NPX Install

npx skill4agent add codebelt/codebelt-skills codebelt-code-style

SKILL.md Content

View Translation Comparison →

CodeBelt Code Style Guide

Opinionated TypeScript and React code style for consistency, maintainability, and scalability. Apply these rules when writing new code, reviewing existing code, or refactoring.

Quick Reference

File Placement

Code Type	Location
React component	`components/pages/` , `components/shared/` , or `components/ui/`
API logic	`services/{provider}/{service}/`
Reusable function	`utils/{utilName}/`
React hook	`hooks/use{HookName}/`
Third-party config	`libs/{libraryName}/`

File Extensions

Extension	Purpose
`.ts{x}`	Main code ( `.tsx` only when file contains JSX)
`.test.ts`	Tests
`.types.ts`	TypeScript types
`.utils.ts{x}`	Helper functions
`.utils.test.ts`	Tests for utility functions
`.schemas.ts`	Zod validation schemas
`.schemas.test.ts`	Tests for schemas
`.constants.ts{x}`	Static objects and constants

Naming Conventions

Context	Convention	Example
Component folders	camelCase	`userCard/`
Component files	PascalCase	`UserCard.tsx`
Everything else	camelCase	`httpClient.ts`
Variables/params	Descriptive (no single chars)	`event` not `e`
Constants	camelCase	`maxRetries` not `MAX_RETRIES`

Exports

All files use named exports only:

typescript

export function Component() {}

No default exports. No barrel files in application code.

Workflows

Creating a New Component

Create folder:

components/{pages|shared|ui}/{componentName}/

Create component file:
```
{ComponentName}.tsx
```
with Props type and JSX only
Extract types to
```
{ComponentName}.types.ts
```
(if needed beyond Props)
Extract constants to
```
{ComponentName}.constants.ts
```
(if any)
Extract helpers to
```
{ComponentName}.utils.ts
```
(if any)
Verify: one component per file, Props not exported, named export

Creating a New Service

Create folder:
```
services/{provider}/{serviceName}/
```
Create main file:
```
{serviceName}.ts
```
with fetch functions and query hooks
Create schema file:
```
{serviceName}.schemas.ts
```
with Zod schemas
Create constants file:
```
{serviceName}.constants.ts
```
with query keys
Verify: schema and type share same name, comment with HTTP method and path

Creating a New Hook

Create folder:
```
hooks/use{HookName}/
```
Create hook file:
```
use{HookName}.ts
```
Create test file:
```
use{HookName}.test.ts
```

Creating a New Utility

Create folder:
```
utils/{utilName}/
```
Create utility file:
```
{utilName}.ts
```
(no
```
.utils.ts
```
suffix inside
```
utils/
```
)
Create test file:
```
{utilName}.test.ts
```

Detailed References

Component patterns and hierarchy: See COMPONENTS.md
Service and schema patterns: See SERVICES.md
Testing patterns: See TESTING.md
Common mistakes to avoid: See MISTAKES.md