メニュー
Write TypeScript code following best practices. Use when developing TypeScript/JavaScript applications. Covers type safety, patterns, and tooling.
SOC 職業分類に基づく
Biome 2.x linting and formatting patterns. Use when configuring code quality tools, setting up linting rules, formatting code, or integrating with CI/CD. Covers migration from ESLint/Prettier.
Hono 4.x web framework patterns. Use when building APIs, middleware, routing, or server-side applications. Covers multi-runtime support (Node, Bun, Cloudflare Workers), validation, CORS, and error handling.
Radix UI primitive patterns. Use when building accessible, unstyled UI components like dialogs, dropdowns, tooltips, tabs, and selects. Covers Tailwind styling, keyboard navigation, animations, and portal management.
React development patterns. Use when building React components, managing state, creating custom hooks, or optimizing React applications. Covers React 19 features, TypeScript integration, and composition patterns.
Tailwind CSS 4.x utility-first styling patterns. Use when building UI components, creating responsive layouts, implementing design systems, or customizing themes. Covers CSS-first configuration, @theme directive, and component patterns.
Vite 7.x build tool patterns. Use when configuring build setup, development server, environment variables, asset handling, or optimizing production builds for React applications.
| name | typescript |
| description | Write TypeScript code following best practices. Use when developing TypeScript/JavaScript applications. Covers type safety, patterns, and tooling. |
# Initialize with pnpm
pnpm init
pnpm add -D typescript @types/node
# TypeScript config
npx tsc --init
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitReturns": true,
"esModuleInterop": true,
"skipLibCheck": true,
"outDir": "./dist"
},
"include": ["src/**/*"]
}
type Result<T> =
| { success: true; data: T }
| { success: false; error: Error };
function handleResult(result: Result<User>) {
if (result.success) {
console.log(result.data); // User
} else {
console.error(result.error); // Error
}
}
type UserId = string & { readonly brand: unique symbol };
type OrderId = string & { readonly brand: unique symbol };
function createUserId(id: string): UserId {
return id as UserId;
}
// Make all properties optional
Partial<User>
// Make all properties required
Required<User>
// Pick specific properties
Pick<User, 'id' | 'email'>
// Omit specific properties
Omit<User, 'password'>
// Make properties readonly
Readonly<User>
// Result type pattern
type Result<T, E = Error> =
| { ok: true; value: T }
| { ok: false; error: E };
async function fetchUser(id: string): Promise<Result<User>> {
try {
const user = await db.users.findById(id);
if (!user) {
return { ok: false, error: new Error('User not found') };
}
return { ok: true, value: user };
} catch (error) {
return { ok: false, error: error as Error };
}
}
import { describe, test, expect, vi } from 'vitest';
describe('UserService', () => {
test('creates user with valid email', async () => {
const service = new UserService(mockRepo);
const user = await service.create('test@example.com');
expect(user.email).toBe('test@example.com');
});
test('throws on invalid email', async () => {
const service = new UserService(mockRepo);
await expect(service.create('invalid')).rejects.toThrow();
});
});
# Biome (linting + formatting)
pnpm add -D @biomejs/biome
pnpm biome check --apply .
# Vitest (testing)
pnpm add -D vitest
pnpm vitest