Agent skill

Coding Standards

by affaan-m in affaan-m/ECC

TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.

MITAuto-check passedDevelopment

Install Coding Standards

skills CLI
$ npx skills add affaan-m/ECC --skill coding-standards -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install affaan-m/ECC coding-standards --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .claude/skills && cp -r skills-src/docs/ko-KR/skills/coding-standards .claude/skills/coding-standards && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
coding-standards
GitHub stars
275k
Used in
2 other repos
Token cost
~2.7k tokens
SKILL.md length
248 words
Files
1
Skills in repo
645
Repo updated
First seen
Licence
MIT

At a glance

TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.

  • Works in 7 steps: 가독성 우선 → KISS (Keep It Simple, Stupid) → DRY (Don't Repeat Yourself) → …
  • Tasks that involve Code quality
  • SKILL.md covers 활성화 시점, 코드 품질 원칙, TypeScript/JavaScript 표준 and React 모범 사례, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Coding Standards is an agent skill from affaan-m/ECC. TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Code quality. It works with JavaScript, TypeScript, React and Node.js. The repository describes itself as: The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond. The licence is MIT.

When your agent uses it

  • Tasks that involve Code quality

Example prompts

  • “/coding-standards”

Requirements

  • Node.js

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. 가독성 우선
  2. KISS (Keep It Simple, Stupid)
  3. DRY (Don't Repeat Yourself)
  4. YAGNI (You Aren't Gonna Need It)
  5. 긴 함수
  6. 깊은 중첩
  7. 매직 넘버

What it can do on your machine

Read from SKILL.md and the folder at commit ef648e0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Coding Standards loads about 2.7k tokens when it runs. Until then it costs about 21 tokens; SKILL.md has 248 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~21
When it runs · the whole SKILL.md, loaded when a task matches
~2.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from affaan-m/ECC at commit ef648e0, republished under its MIT licence (© affaan-m). 248 words, ~2,700 tokens.

Download SKILL.mdSave it as .claude/skills/coding-standards/SKILL.md (or your agent's skills folder).
name
coding-standards
description
TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.
origin
ECC

코딩 표준 및 모범 사례

모든 프로젝트에 적용 가능한 범용 코딩 표준.

활성화 시점

  • 새 프로젝트 또는 모듈을 시작할 때
  • 코드 품질 및 유지보수성을 검토할 때
  • 기존 코드를 컨벤션에 맞게 리팩터링할 때
  • 네이밍, 포맷팅 또는 구조적 일관성을 적용할 때
  • 린팅, 포맷팅 또는 타입 검사 규칙을 설정할 때
  • 새 기여자에게 코딩 컨벤션을 안내할 때

코드 품질 원칙

1. 가독성 우선
  • 코드는 작성보다 읽히는 횟수가 더 많다
  • 명확한 변수 및 함수 이름 사용
  • 주석보다 자기 문서화 코드를 선호
  • 일관된 포맷팅 유지
2. KISS (Keep It Simple, Stupid)
  • 동작하는 가장 단순한 해결책
  • 과도한 엔지니어링 지양
  • 조기 최적화 금지
  • 이해하기 쉬운 코드 > 영리한 코드
3. DRY (Don't Repeat Yourself)
  • 공통 로직을 함수로 추출
  • 재사용 가능한 컴포넌트 생성
  • 모듈 간 유틸리티 공유
  • 복사-붙여넣기 프로그래밍 지양
4. YAGNI (You Aren't Gonna Need It)
  • 필요하기 전에 기능을 만들지 않기
  • 추측에 의한 일반화 지양
  • 필요할 때만 복잡성 추가
  • 단순하게 시작하고 필요할 때 리팩터링

TypeScript/JavaScript 표준

변수 네이밍
typescript
// 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
함수 네이밍
typescript
// 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) { }
불변성 패턴 (필수)
typescript
// 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
에러 처리
typescript
// 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()
}
Async/Await 모범 사례
typescript
// 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()
타입 안전성
typescript
// 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
}

React 모범 사례

컴포넌트 구조
typescript
// 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>
}
커스텀 Hook
typescript
// 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)
상태 관리
typescript
// 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
조건부 렌더링
typescript
// 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}

API 설계 표준

REST API 컨벤션
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
응답 형식
typescript
// 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 })
입력 유효성 검사
typescript
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

주석 및 문서화

주석을 작성해야 하는 경우
typescript
// 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
공개 API를 위한 JSDoc
typescript
/**
 * 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
}

성능 모범 사례

메모이제이션
typescript
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)
}, [])
지연 로딩
typescript
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>
  )
}
데이터베이스 쿼리
typescript
// 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('*')

테스트 표준

테스트 구조 (AAA 패턴)
typescript
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)
})
테스트 네이밍
typescript
// 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', () => { })

코드 스멜 감지

다음 안티패턴을 주의하세요:

1. 긴 함수
typescript
// 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)
}
2. 깊은 중첩
typescript
// 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
3. 매직 넘버
typescript
// 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)

기억하세요: 코드 품질은 타협할 수 없습니다. 명확하고 유지보수 가능한 코드가 빠른 개발과 자신감 있는 리팩터링을 가능하게 합니다.

© affaan-m, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in docs/ko-KR/skills/coding-standards of affaan-m/ECC.

Open the folder on GitHubat commit ef648e0

Used in 2 other repositories

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in affaan-m/ECC, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Coding Standards next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Coding Standards compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Coding Standards this skillaffaan-m/ECC275k2 repos~2.7kAutomated safety check: PassMIT
Coding Standardskurealnum/dotfiles29017 repos~2.9kAutomated safety check: PassNone
Coding Standardsxu-xiang/everything-claude-code-zh2k—~2.4kAutomated safety check: PassMIT
Coding Standardsxu-xiang/everything-claude-code-zh2k—~2.3kAutomated safety check: PassMIT
Coding StandardsNeverSight/learn-skills.dev2161 repos~2.4kAutomated safety check: PassNone
Generate Release Notesteambit/bit18k—~2.2kAutomated safety check: PassCustom licence

Similar skills

  • Coding Standards

    kurealnum/dotfiles

    Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

    290 GitHub starsUsed in 17 repos~2.9k tokens
    DevelopmentAuto-check passed
  • Coding Standards

    xu-xiang/everything-claude-code-zh

    适用于 TypeScript、JavaScript、React 和 Node.js 开发的通用编码标准、最佳实践与模式。

    2k GitHub stars~2.4k tokensUpdated 7 mo ago
    DevelopmentAuto-check passed
  • Coding Standards

    xu-xiang/everything-claude-code-zh

    TypeScript、JavaScript、React、Node.js 开发的通用编码标准、最佳实践和模式. An agent skill from xu-xiang/everything-claude-code-zh.

    2k GitHub stars~2.3k tokensUpdated 7 mo ago
    DevelopmentAuto-check passed
  • Coding Standards

    NeverSight/learn-skills.dev

    适用于 TypeScript、JavaScript、React 和 Node.js 开发的通用编码标准、最佳实践和模式。

    216 GitHub starsUsed in 1 repo~2.4k tokens
    DevelopmentAuto-check passed
  • Generate comprehensive release notes for Bit from git commits and pull requests.

    18k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Bit CLI

    teambit/bit

    MUST consult before running ANY bit command. An agent skill from teambit/bit.

    18k GitHub stars~2k tokensUpdated today
    DevelopmentAuto-check: warnings

More from affaan-m/ECC

All 645 skills in this repo
  • Videodb

    affaan-m/ECC

    Ingest, index, search, edit, and monitor video and audio with the VideoDB Python SDK — upload from files, URLs, or RTSP feeds, build spoken and scene indexes with timestamped search and playable…

    275k GitHub starsUsed in 3 repos~3.5k tokens
    Auto-check: notes
  • Rules Distillation

    affaan-m/ECC

    Scans installed skills for principles that recur across them and proposes rule-file changes: append, revise, add a section, create a file or leave as covered.

    275k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed
  • Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.

    275k GitHub stars~2.9k tokensUpdated 3 days ago
    Auto-check passed
  • Measures whether agents actually follow a skill, rule or agent definition by generating scenarios at three strictness levels and scoring tool-call traces.

    275k GitHub starsUsed in 1 repo~623 tokens
    Auto-check passed
  • Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents.

    275k GitHub stars~3.5k tokensUpdated 3 days ago
    Auto-check passed
  • Adds one optional external Codex critique that tries to break a council's decision draft, sent to OpenAI only after you consent.

    275k GitHub stars~1.5k tokensUpdated 3 days ago
    Auto-check passed

Categories

Questions about Coding Standards

What does Coding Standards do?

TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴. Coding Standards is an agent skill from affaan-m/ECC.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.

When should I use Coding Standards?

Coding Standards fits situations like: tasks that involve Code quality.

How do I install Coding Standards in Claude Code?

Run `npx skills add affaan-m/ECC --skill coding-standards -a claude-code`. Or copy the skill folder (docs/ko-KR/skills/coding-standards in affaan-m/ECC) into .claude/skills/coding-standards in your project. Claude Code loads it when a task matches its description.

How do I install Coding Standards in Codex?

Run `npx skills add affaan-m/ECC --skill coding-standards -a codex`. Or copy the skill folder (docs/ko-KR/skills/coding-standards in affaan-m/ECC) into .agents/skills/coding-standards in your project. Codex loads it when a task matches its description.

Can I use Coding Standards in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add affaan-m/ECC --skill coding-standards -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/coding-standards, .gemini/skills/coding-standards, .github/skills/coding-standards and .opencode/skills/coding-standards in your project.

What does Coding Standards need to run?

SKILL.md names no scripts, command-line tools or credentials: Coding Standards is instructions for the agent only. Our summary lists: Node.js.

Does Coding Standards access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Coding Standards safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Coding Standards use?

Coding Standards is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Coding Standards use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Coding Standards?

Skills that share tags, products or a category with Coding Standards: Coding Standards (kurealnum/dotfiles, 290 stars), Coding Standards (xu-xiang/everything-claude-code-zh, 2k stars), Coding Standards (xu-xiang/everything-claude-code-zh, 2k stars) and Coding Standards (NeverSight/learn-skills.dev, 216 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Coding Standards?

affaan-m (a GitHub user) maintains it in affaan-m/ECC, which has 275,023 GitHub stars. The repository holds 645 skills in this directory. The repository was last updated on October 5, 2026.

Source: affaan-m/ECC on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.