skills/doyajin174/no-hardcoding/SKILL.md
Forbid hardcoded values in code. Use this when reviewing code, writing new features, or when magic numbers/strings are detected. Enforces constants, env variables, and config files.
npx skillsauth add aiskillstore/marketplace no-hardcodingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
코드에 하드코딩된 값을 금지하고 상수/환경변수/설정 파일을 사용하도록 강제하는 스킬입니다.
"코드에 직접 값을 쓰는 순간, 변경이 배포가 된다."
| 유형 | 상태 | 대안 |
|------|------|------|
| Magic Number | 🔴 금지 | 상수/enum |
| Magic String | 🔴 금지 | 상수/enum |
| URL/경로 | 🔴 금지 | 환경변수/config |
| 크리덴셜 | 🔴 절대 금지 | .env + secrets |
| 타임아웃/딜레이 | 🔴 금지 | 상수/config |
| 포트 번호 | 🔴 금지 | 환경변수 |
| API 키 | 🔴 절대 금지 | 환경변수 + secrets |
// ❌ BAD: 의미 불명확
if (users.length > 100) { ... }
setTimeout(callback, 3000);
const tax = price * 0.1;
// ✅ GOOD: 의미 명확
const MAX_USERS = 100;
const DEBOUNCE_MS = 3000;
const TAX_RATE = 0.1;
if (users.length > MAX_USERS) { ... }
setTimeout(callback, DEBOUNCE_MS);
const tax = price * TAX_RATE;
// ❌ BAD: 문자열 반복, 오타 위험
if (status === 'pending') { ... }
if (status === 'pending') { ... } // 다른 곳에서 또 사용
// ✅ GOOD: 상수 또는 enum
enum Status {
PENDING = 'pending',
APPROVED = 'approved',
REJECTED = 'rejected',
}
if (status === Status.PENDING) { ... }
// ❌ BAD: URL 하드코딩
const response = await fetch('https://api.example.com/users');
// ✅ GOOD: 환경변수
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const response = await fetch(`${API_URL}/users`);
// ❌ CRITICAL: 절대 금지 - 보안 위협
const apiKey = 'sk-1234567890abcdef';
const password = 'admin123';
const dbConnection = 'mongodb://user:pass@host:27017';
// ✅ GOOD: 환경변수 사용
const apiKey = process.env.API_KEY;
const password = process.env.DB_PASSWORD;
const dbConnection = process.env.DATABASE_URL;
// ❌ BAD: 하드코딩 타임아웃
await page.waitForTimeout(5000);
time.sleep(3);
// ✅ GOOD: 조건 기반 또는 상수
const ANIMATION_DURATION = 300;
await page.waitForSelector('#content'); // 조건 기반
await delay(ANIMATION_DURATION); // 상수 사용
src/
├── constants/
│ ├── index.ts # Re-exports
│ ├── api.ts # API 관련 상수
│ ├── ui.ts # UI 관련 상수
│ └── business.ts # 비즈니스 로직 상수
├── config/
│ ├── index.ts
│ └── env.ts # 환경변수 검증 및 타입
└── types/
└── enums.ts # Enum 정의
// constants/api.ts
export const API = {
TIMEOUT_MS: 30000,
RETRY_COUNT: 3,
ENDPOINTS: {
USERS: '/api/users',
POSTS: '/api/posts',
},
} as const;
// constants/ui.ts
export const UI = {
DEBOUNCE_MS: 300,
ANIMATION_DURATION_MS: 200,
MAX_ITEMS_PER_PAGE: 20,
BREAKPOINTS: {
MOBILE: 768,
TABLET: 1024,
DESKTOP: 1280,
},
} as const;
// config/env.ts
const requiredEnvVars = [
'DATABASE_URL',
'API_KEY',
'NEXT_PUBLIC_API_URL',
] as const;
export function validateEnv() {
for (const envVar of requiredEnvVars) {
if (!process.env[envVar]) {
throw new Error(`Missing required env var: ${envVar}`);
}
}
}
export const env = {
DATABASE_URL: process.env.DATABASE_URL!,
API_KEY: process.env.API_KEY!,
API_URL: process.env.NEXT_PUBLIC_API_URL!,
} as const;
# Magic Numbers 검색 (일반적인 패턴)
grep -rn "[^a-zA-Z][0-9]\{3,\}[^a-zA-Z0-9]" --include="*.ts" --include="*.tsx" src/
# 하드코딩된 URL 검색
grep -rn "https\?://" --include="*.ts" --include="*.tsx" src/ | grep -v "node_modules"
# 잠재적 크리덴셜 검색
grep -rn "password\|apiKey\|secret\|token" --include="*.ts" --include="*.tsx" src/ | grep -v "\.d\.ts"
하드코딩 감지:
1. Magic Number/String 검색
2. URL/경로 하드코딩 확인
3. 크리덴셜 하드코딩 확인 (최우선)
위반 발견 시:
→ 상수 추출 권장
→ 환경변수 사용 안내
→ .env.example 업데이트 확인
값 사용 전 체크:
- 이 값이 변경될 수 있는가? → 환경변수/config
- 이 값이 여러 곳에서 사용되는가? → 상수
- 이 값이 민감한가? → 환경변수 + secrets
- 이 값이 의미를 가지는가? → 상수 (이름으로 의미 부여)
// 0, 1, -1 (일반적으로 명확한 의미)
const index = array.indexOf(item);
if (index === -1) { ... }
// 배열 첫/마지막 요소
const first = array[0];
const last = array[array.length - 1];
// 명확한 수학적 연산
const half = total / 2;
const percentage = (part / whole) * 100;
development
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
tools
Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.
testing
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.
tools
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.