Coding Standards & Best Practices
Повысьте качество кода с навыком coding-standards для Claude Code. Применяйте лучшие практики TypeScript, React и Node.js для улучшения поддерживаемости.
Этот навык предоставляет стандартизированную основу для создания качественного, поддерживаемого программного обеспечения на основе ключевых принципов: KISS, DRY и YAGNI. Он даёт конкретные рекомендации по соглашениям об именовании в TypeScript, паттернам иммутабельности, структуре React-компонентов и дизайну API. Независимо от того, начинаете ли вы новый проект или рефакторите существующий, этот навык обеспечивает единообразное форматирование, надёжную обработку ошибок и оптимальную производительность во всём вашем full-stack приложении.
Ключевые возможности
Варианты использования
| name | coding-standards |
|---|---|
| description | TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴. |
| origin | ECC |
모든 프로젝트에 적용 가능한 범용 코딩 표준.
- 새 프로젝트 또는 모듈을 시작할 때
- 코드 품질 및 유지보수성을 검토할 때
- 기존 코드를 컨벤션에 맞게 리팩터링할 때
- 네이밍, 포맷팅 또는 구조적 일관성을 적용할 때
- 린팅, 포맷팅 또는 타입 검사 규칙을 설정할 때
- 새 기여자에게 코딩 컨벤션을 안내할 때
- 코드는 작성보다 읽히는 횟수가 더 많다
- 명확한 변수 및 함수 이름 사용
- 주석보다 자기 문서화 코드를 선호
- 일관된 포맷팅 유지
- 동작하는 가장 단순한 해결책
- 과도한 엔지니어링 지양
- 조기 최적화 금지
- 이해하기 쉬운 코드 > 영리한 코드
- 공통 로직을 함수로 추출
- 재사용 가능한 컴포넌트 생성
- 모듈 간 유틸리티 공유
- 복사-붙여넣기 프로그래밍 지양
- 필요하기 전에 기능을 만들지 않기
- 추측에 의한 일반화 지양
- 필요할 때만 복잡성 추가
- 단순하게 시작하고 필요할 때 리팩터링
// PASS: GOOD: Descriptive names
const marketSearchQuery = 'election'
const isUserAuthenticated = true
const totalRevenue = 1000
// FAIL: BAD: Unclear names
const q = 'election'
const flag = true
const x = 1000// PASS: GOOD: Verb-noun pattern
async function fetchMarketData(marketId: string) { }
function calculateSimilarity(a: number[], b: number[]) { }
function isValidEmail(email: string): boolean { }
// FAIL: BAD: Unclear or noun-only
async function market(id: string) { }
function similarity(a, b) { }
function email(e) { }// PASS: ALWAYS use spread operator
const updatedUser = {
...user,
name: 'New Name'
}
const updatedArray = [...items, newItem]
// FAIL: NEVER mutate directly
user.name = 'New Name' // BAD
items.push(newItem) // BAD// PASS: GOOD: Comprehensive error handling
async function fetchData(url: string) {
try {
const response = await fetch(url)
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
}
return await response.json()
} catch (error) {
console.error('Fetch failed:', error)
throw new Error('Failed to fetch data')
}
}
// FAIL: BAD: No error handling
async function fetchData(url) {
const response = await fetch(url)
return response.json()
}// PASS: GOOD: Parallel execution when possible
const [users, markets, stats] = await Promise.all([
fetchUsers(),
fetchMarkets(),
fetchStats()
])
// FAIL: BAD: Sequential when unnecessary
const users = await fetchUsers()
const markets = await fetchMarkets()
const stats = await fetchStats()// PASS: GOOD: Proper types
interface Market {
id: string
name: string
status: 'active' | 'resolved' | 'closed'
created_at: Date
}
function getMarket(id: string): Promise<Market> {
// Implementation
}
// FAIL: BAD: Using 'any'
function getMarket(id: any): Promise<any> {
// Implementation
}// PASS: GOOD: Functional component with types
interface ButtonProps {
children: React.ReactNode
onClick: () => void
disabled?: boolean
variant?: 'primary' | 'secondary'
}
export function Button({
children,
onClick,
disabled = false,
variant = 'primary'
}: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
>
{children}
</button>
)
}
// FAIL: BAD: No types, unclear structure
export function Button(props) {
return <button onClick={props.onClick}>{props.children}</button>
}// PASS: GOOD: Reusable custom hook
export function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => clearTimeout(handler)
}, [value, delay])
return debouncedValue
}
// Usage
const debouncedQuery = useDebounce(searchQuery, 500)// PASS: GOOD: Proper state updates
const [count, setCount] = useState(0)
// Functional update for state based on previous state
setCount(prev => prev + 1)
// FAIL: BAD: Direct state reference
setCount(count + 1) // Can be stale in async scenarios// PASS: GOOD: Clear conditional rendering
{isLoading && <Spinner />}
{error && <ErrorMessage error={error} />}
{data && <DataDisplay data={data} />}
// FAIL: BAD: Ternary hell
{isLoading ? <Spinner /> : error ? <ErrorMessage error={error} /> : data ? <DataDisplay data={data} /> : null}GET /api/markets # List all markets
GET /api/markets/:id # Get specific market
POST /api/markets # Create new market
PUT /api/markets/:id # Update market (full)
PATCH /api/markets/:id # Update market (partial)
DELETE /api/markets/:id # Delete market
# Query parameters for filtering
GET /api/markets?status=active&limit=10&offset=0
// PASS: GOOD: Consistent response structure
interface ApiResponse<T> {
success: boolean
data?: T
error?: string
meta?: {
total: number
page: number
limit: number
}
}
// Success response
return NextResponse.json({
success: true,
data: markets,
meta: { total: 100, page: 1, limit: 10 }
})
// Error response
return NextResponse.json({
success: false,
error: 'Invalid request'
}, { status: 400 })import { z } from 'zod'
// PASS: GOOD: Schema validation
const CreateMarketSchema = z.object({
name: z.string().min(1).max(200),
description: z.string().min(1).max(2000),
endDate: z.string().datetime(),
categories: z.array(z.string()).min(1)
})
export async function POST(request: Request) {
const body = await request.json()
try {
const validated = CreateMarketSchema.parse(body)
// Proceed with validated data
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json({
success: false,
error: 'Validation failed',
details: error.errors
}, { status: 400 })
}
}
}src/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── markets/ # Market pages
│ └── (auth)/ # Auth pages (route groups)
├── components/ # React components
│ ├── ui/ # Generic UI components
│ ├── forms/ # Form components
│ └── layouts/ # Layout components
├── hooks/ # Custom React hooks
├── lib/ # Utilities and configs
│ ├── api/ # API clients
│ ├── utils/ # Helper functions
│ └── constants/ # Constants
├── types/ # TypeScript types
└── styles/ # Global styles
components/Button.tsx # PascalCase for components
hooks/useAuth.ts # camelCase with 'use' prefix
lib/formatDate.ts # camelCase for utilities
types/market.types.ts # camelCase with .types suffix
// PASS: GOOD: Explain WHY, not WHAT
// Use exponential backoff to avoid overwhelming the API during outages
const delay = Math.min(1000 * Math.pow(2, retryCount), 30000)
// Deliberately using mutation here for performance with large arrays
items.push(newItem)
// FAIL: BAD: Stating the obvious
// Increment counter by 1
count++
// Set name to user's name
name = user.name/**
* Searches markets using semantic similarity.
*
* @param query - Natural language search query
* @param limit - Maximum number of results (default: 10)
* @returns Array of markets sorted by similarity score
* @throws {Error} If OpenAI API fails or Redis unavailable
*
* @example
* ```typescript
* const results = await searchMarkets('election', 5)
* console.log(results[0].name) // "Trump vs Biden"
* ```
*/
export async function searchMarkets(
query: string,
limit: number = 10
): Promise<Market[]> {
// Implementation
}import { useMemo, useCallback } from 'react'
// PASS: GOOD: Memoize expensive computations
const sortedMarkets = useMemo(() => {
return [...markets].sort((a, b) => b.volume - a.volume)
}, [markets])
// PASS: GOOD: Memoize callbacks
const handleSearch = useCallback((query: string) => {
setSearchQuery(query)
}, [])import { lazy, Suspense } from 'react'
// PASS: GOOD: Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'))
export function Dashboard() {
return (
<Suspense fallback={<Spinner />}>
<HeavyChart />
</Suspense>
)
}// PASS: GOOD: Select only needed columns
const { data } = await supabase
.from('markets')
.select('id, name, status')
.limit(10)
// FAIL: BAD: Select everything
const { data } = await supabase
.from('markets')
.select('*')test('calculates similarity correctly', () => {
// Arrange
const vector1 = [1, 0, 0]
const vector2 = [0, 1, 0]
// Act
const similarity = calculateCosineSimilarity(vector1, vector2)
// Assert
expect(similarity).toBe(0)
})// PASS: GOOD: Descriptive test names
test('returns empty array when no markets match query', () => { })
test('throws error when OpenAI API key is missing', () => { })
test('falls back to substring search when Redis unavailable', () => { })
// FAIL: BAD: Vague test names
test('works', () => { })
test('test search', () => { })다음 안티패턴을 주의하세요:
// FAIL: BAD: Function > 50 lines
function processMarketData() {
// 100 lines of code
}
// PASS: GOOD: Split into smaller functions
function processMarketData() {
const validated = validateData()
const transformed = transformData(validated)
return saveData(transformed)
}// FAIL: BAD: 5+ levels of nesting
if (user) {
if (user.isAdmin) {
if (market) {
if (market.isActive) {
if (hasPermission) {
// Do something
}
}
}
}
}
// PASS: GOOD: Early returns
if (!user) return
if (!user.isAdmin) return
if (!market) return
if (!market.isActive) return
if (!hasPermission) return
// Do something// FAIL: BAD: Unexplained numbers
if (retryCount > 3) { }
setTimeout(callback, 500)
// PASS: GOOD: Named constants
const MAX_RETRIES = 3
const DEBOUNCE_DELAY_MS = 500
if (retryCount > MAX_RETRIES) { }
setTimeout(callback, DEBOUNCE_DELAY_MS)기억하세요: 코드 품질은 타협할 수 없습니다. 명확하고 유지보수 가능한 코드가 빠른 개발과 자신감 있는 리팩터링을 가능하게 합니다.
🧠 Что это
Coding Standards & Best Practices — это свод универсальных правил, шаблонов и примеров кода для проектов на TypeScript, JavaScript, React и Node.js. Навык задаёт единый стиль, помогает избежать типовых ошибок и ускоряет код-ревью. Он ориентирован на разработчиков, которые хотят:
- начать новый проект с «чистого листа» и сразу придерживаться согласованных конвенций;
- привести существующий код к единому стандарту;
- обучить новичков команды принятым практикам.
В основе лежат классические принципы: читаемость, KISS, DRY, YAGNI. Каждый принцип подкреплён конкретными примерами (как надо и как не надо) для TypeScript, React, REST API и тестов.
⚙️ Как работает
Навык организован по тематическим блокам. Ниже — основные разделы и их содержание.
📝 Основные принципы кода
- Читаемость превыше всего — код пишут один раз, а читают много раз. Имена переменных и функций должны быть осмысленными, код — самодокументированным.
- KISS — выбирайте самое простое работающее решение. Не увлекайтесь преждевременной оптимизацией и излишней абстракцией.
- DRY — избегайте дублирования: выносите общую логику в функции/компоненты, делитесь утилитами между модулями.
- YAGNI — не добавляйте функциональность «на всякий случай». Начинайте с малого и усложняйте только когда это действительно нужно.
🔤 TypeScript / JavaScript
- Нейминг: переменные-существительные (
marketSearchQuery), функции-глаголы (fetchMarketData,isValidEmail). Избегайте однобуквенных имён (q,x). - Иммутабельность: всегда используйте spread-оператор вместо прямой мутации объектов и массивов.
- Обработка ошибок: оборачивайте асинхронные вызовы в
try/catch, проверяйтеresponse.ok, логируйте ошибки и пробрасывайте понятные сообщения. - Async/Await: используйте
Promise.allдля независимых запросов вместо последовательного ожидания. - Типы: избегайте
any, описывайте интерфейсы и используйте строгие типы (union, generic).
⚛️ React
- Компоненты: типизируйте пропсы, используйте функциональные компоненты, задавайте значения по умолчанию. Пример хорошего компонента —
Buttonс явными пропсамиchildren,onClick,disabled,variant. - Кастомные хуки — переиспользуемая логика с префиксом
use. Например,useDebounceдля задержки ввода. - Состояние: используйте функциональные обновления (
setCount(prev => prev + 1)) — они безопаснее при асинхронных сценариях. - Условный рендеринг: предпочитайте короткие логические операторы (
&&) вместо вложенных тернарников.
🌐 API и валидация
- REST: стандартные URL и методы (
GET /api/markets/:id,POST /api/markets). Фильтрация — через query-параметры. - Ответы: единая обёртка
ApiResponseT`` с полямиsuccess,data,error,meta. Коды ошибок — осмысленные. - Валидация: используйте Zod для декларативной проверки входных данных. Ошибки валидации возвращайте с деталями.
📁 Структура проекта и файлов
- Папки:
src/app,src/components/ui,src/hooks,src/lib,src/types,src/styles. - Имена файлов: компоненты —
PascalCase.tsx, хуки —useAuth.ts, утилиты —camelCase.ts, типы —market.types.ts.
💬 Комментарии и документация
- Пишите комментарии, объясняющие почему сделан тот или иной выбор (бизнес-логика, обход бага, оптимизация). Не комментируйте очевидное (
// increment counter). - Для публичных API используйте JSDoc с
@param,@returns,@throwsи@example.
⚡ Производительность
- Мемоизация: оборачивайте тяжёлые вычисления в
useMemo, колбэки — вuseCallback. - Ленивая загрузка: используйте
React.lazy+Suspenseдля компонентов, которые не нужны сразу. - Запросы к БД: запрашивайте только нужные поля (
select('id, name, status')), избегайтеselect(*).
🧪 Тестирование
- AAA (Arrange–Act–Assert): структурируйте тесты в три блока.
- Имена тестов: описывайте ожидаемое поведение (
'returns empty array when no markets match query'). Избегайте'works'или'test search'.
🚫 Антипаттерны (code smells)
Навык явно предупреждает о трёх частых проблемах:
- Длинные функции (больше 50 строк) — разбивайте на более мелкие.
- Глубокое вложение (5+ уровней
if) — заменяйте ранними возвратами (early return). - Магические числа — выносите в именованные константы (
MAX_RETRIES,DEBOUNCE_DELAY_MS).
🎯 Когда использовать
- Новый проект — сразу применить стандарты, чтобы не накапливать технический долг.
- Код-ревью — сверять код с рекомендациями навыка (нейминг, иммутабельность, типы).
- Рефакторинг — переписать legacy-код под единый стиль и избавиться от антипаттернов.
- Настройка инструментов — ESLint, Prettier, TypeScript strict mode — все правила согласуются с описанными здесь.
- Онбординг — дать новому разработчику ссылку на навык, чтобы он быстро влился в код-стайл команды.
💡 Важно знать
- Навык не является догмой — это набор практик, которые стоит адаптировать под конкретный проект (например, некоторые проекты могут выбрать другой нейминг или структуру папок).
- Примеры кода в навыке — не полные файлы, а иллюстрации «хорошо/плохо». Рекомендуется не копировать их слепо, а понять принцип.
- Особое внимание уделено TypeScript и React — если ваш проект использует другой фреймворк или чистый JS, общие принципы (DRY, KISS, YAGNI) остаются применимы, но конкретные примеры потребуют адаптации.
- Для валидации данных навык рекомендует Zod — это современный стандарт, но можно использовать и другие библиотеки (yup, io-ts).
- Навык предполагает использование Next.js App Router (
src/app), но структура папок легко адаптируется под любой React-проект.
# Пример хорошего нейминга (из навыка)
const marketSearchQuery = 'election';
const totalRevenue = 1000;
async function fetchMarketData(marketId: string) { ... }
function isValidEmail(email: string): boolean { ... }
# Пример плохого нейминга (из навыка)
const q = 'election';
const x = 1000;
async function market(id: string) { ... }
function email(e) { ... }
Использование навыка в команде помогает говорить на одном языке при код-ревью и ускоряет разработку за счёт предсказуемого кода.
Какие технологии покрываются этими стандартами?
Навык предоставляет подробные стандарты для TypeScript, JavaScript, React (функциональные компоненты и хуки), Node.js и общего проектирования REST API.
Даёт ли этот навык рекомендации по структуре проекта?
Да, он включает стандартизированную структуру каталогов, оптимизированную для современных фреймворков, таких как Next.js (App Router), и конкретные соглашения по именованию файлов.
Может ли этот навык помочь с производительностью приложения?
Да, он включает конкретные лучшие практики для мемоизации в React (useMemo/useCallback), ленивой загрузки компонентов и выбора эффективных запросов к базе данных.
Как он обрабатывает валидацию данных?
Рекомендуется использовать Zod для валидации схем в маршрутах API, чтобы обеспечить строгую типовую безопасность и целостность входных данных во время разработки.
Синхронизируйте навыки с Claude Cowork, Claude Code, Codex и другими.
Установите одной командой.
npx skillfish add affaan-m/everything-claude-code coding-standardsИсточник: https://mcpmarket.com/tools/skills/coding-standards-best-practices-1776209524342
Комментарии
Комментариев пока нет. Будьте первым.