Use when adding new error messages to React, or seeing "unknown error code" warnings.
npx skills add 30eggis/claude-frontend-skills --skill "spec-test-loader"
Install specific skill from multi-skill repository
# Description
|
# SKILL.md
name: spec-test-loader
description: |
์ ์ง์ ์ผ๋ก ํ
์คํธ ๊ณํ์๋ฅผ ๋ก๋ฉํฉ๋๋ค.
์ ์ฒด ๋ก๋ฉ, ์นดํ
๊ณ ๋ฆฌ๋ณ, ์ฐ์ ์์๋ณ, ์ปดํฌ๋ํธ๋ณ ๋ก๋ฉ ์ง์.
Agent์ ์ปจํ
์คํธ ํจ์จ์ฑ์ ์ํด ํ์ํ ๋ถ๋ถ๋ง ์ ํ์ ์ผ๋ก ๋ก๋ฉํฉ๋๋ค.
allowed-tools: Read, Glob, Grep
argument-hint: "
permissionMode: bypassPermissions
spec-test-loader
ํ ์คํธ ๊ณํ์๋ฅผ ์ ์ง์ ์ผ๋ก ๋ก๋ฉํ์ฌ Agent์ ์ปจํ ์คํธ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํฉ๋๋ค.
์ฌ์ฉ ๋ชฉ์
- Spec ๋ฌธ์๊ฐ ํฌ๋ฉด Agent ํธ์ถ ์ ์ปจํ ์คํธ ์ด๊ณผ ์ํ
- ํ์ํ ํ ์คํธ ๊ณํ๋ง ์ ์ง์ ์ผ๋ก ๋ก๋ฉ
- Agent๊ฐ ํ์ฌ ์์ ์ ํ์ํ ํ ์คํธ๋ง ๊ฐ์ ธ์ค๋๋ก ํจ
์ฌ์ฉ๋ฒ
์ ์ฒด ํ ์คํธ ๋ชฉ๋ก (์์ฝ)
/spec-test-loader {spec-folder} --list
์ถ๋ ฅ:
# ํ
์คํธ ๋ชฉ๋ก ์์ฝ
## Unit Tests (23๊ฐ)
- P0: 8๊ฐ
- P1: 10๊ฐ
- P2: 5๊ฐ
## Integration Tests (12๊ฐ)
- P0: 4๊ฐ
- P1: 6๊ฐ
- P2: 2๊ฐ
## E2E Tests (8๊ฐ)
- P0: 3๊ฐ
- P1: 4๊ฐ
- P2: 1๊ฐ
## ์ปดํฌ๋ํธ๋ณ
| ์ปดํฌ๋ํธ | Unit | Integration | E2E |
|----------|------|-------------|-----|
| StockCard | 5 | 2 | 1 |
| PriceDisplay | 3 | 1 | 0 |
| ...
์นดํ ๊ณ ๋ฆฌ๋ณ ๋ก๋ฉ
/spec-test-loader {spec-folder} --category unit
/spec-test-loader {spec-folder} --category integration
/spec-test-loader {spec-folder} --category e2e
์ถ๋ ฅ: ํด๋น ์นดํ ๊ณ ๋ฆฌ์ ๋ชจ๋ ํ ์คํธ ์คํ ์ ์ฒด ๋ด์ฉ
์ฐ์ ์์๋ณ ๋ก๋ฉ
/spec-test-loader {spec-folder} --priority P0
/spec-test-loader {spec-folder} --priority P1
/spec-test-loader {spec-folder} --priority P2
์ถ๋ ฅ: ํด๋น ์ฐ์ ์์์ ํ ์คํธ ์คํ๋ง ๋ก๋ฉ
ํน์ ์ปดํฌ๋ํธ ํ ์คํธ๋ง
/spec-test-loader {spec-folder} --component StockCard
/spec-test-loader {spec-folder} --component PriceDisplay
์ถ๋ ฅ: ํด๋น ์ปดํฌ๋ํธ์ ํ ์คํธ ์คํ ์ ์ฒด ๋ด์ฉ
์ปค๋ฒ๋ฆฌ์ง ๊ฐญ ๋ถ์
/spec-test-loader {spec-folder} --coverage-gap
์ถ๋ ฅ:
# ์ปค๋ฒ๋ฆฌ์ง ๊ฐญ ๋ถ์
## ํ
์คํธ ๋ฏธ์์ฑ ์ปดํฌ๋ํธ
| ์ปดํฌ๋ํธ | ์์ ํ
์คํธ | ์์ฑ๋จ | ๊ฐญ |
|----------|-------------|--------|-----|
| Header | 5 | 2 | 3 |
| Footer | 3 | 0 | 3 |
## ์ฐ์ ์์๋ณ ๋ฏธ์ปค๋ฒ๋ฆฌ์ง
- P0 ๋ฏธ์ปค๋ฒ๋ฆฌ์ง: 2๊ฑด (๊ธด๊ธ)
- P1 ๋ฏธ์ปค๋ฒ๋ฆฌ์ง: 5๊ฑด
- P2 ๋ฏธ์ปค๋ฒ๋ฆฌ์ง: 8๊ฑด
## ๊ถ์ฅ ์์ฑ ์์
1. Header - P0 ํ
์คํธ 3๊ฑด
2. Footer - P0 ํ
์คํธ 2๊ฑด
3. ...
Spec ํด๋ ๊ตฌ์กฐ
{spec-folder}/05-tests/
โโโ coverage-map.md โ ์ปค๋ฒ๋ฆฌ์ง ๋งตํ
โโโ personas/ โ ํ๋ฅด์๋ ๊ธฐ๋ฐ ํ
์คํธ
โ โโโ busy-professional.md
โ โโโ casual-investor.md
โโโ scenarios/ โ E2E ์๋๋ฆฌ์ค
โ โโโ critical-path.md
โ โโโ screen-*.md
โโโ components/ โ ์ปดํฌ๋ํธ๋ณ ํ
์คํธ
โโโ StockCard.test.md โ Markdown (legacy)
โโโ StockCard.test.yaml โ YAML (preferred)
โโโ PriceDisplay.test.md
โโโ ...
Format Detection
The loader auto-detects spec format by file extension:
| Extension | Format | Priority |
|---|---|---|
.test.yaml |
YAML (structured) | Preferred |
.test.md |
Markdown (legacy) | Fallback |
When both formats exist, YAML takes precedence.
๋ก๋ฉ ๋ก์ง
--list ๋ชจ๋
1. Glob: {spec-folder}/05-tests/**/*.{yaml,md}
2. ๊ฐ ํ์ผ์์ ๋ฉํ๋ฐ์ดํฐ ์ถ์ถ:
- YAML: direct parse from id, priority, category fields
- MD: regex parse from headers
- ํ
์คํธ ๊ฐ์
- ์ฐ์ ์์ ๋ถํฌ
- ์นดํ
๊ณ ๋ฆฌ
3. ์์ฝ ํ
์ด๋ธ ์์ฑ
--category ๋ชจ๋
1. ์นดํ
๊ณ ๋ฆฌ ๋งคํ:
- unit โ {spec-folder}/05-tests/components/*.{yaml,md}
- integration โ {spec-folder}/05-tests/scenarios/*-integration.{yaml,md}
- e2e โ {spec-folder}/05-tests/scenarios/*.{yaml,md}
2. Glob์ผ๋ก ํ์ผ ๋ชฉ๋ก ํ๋ (YAML ์ฐ์ )
3. ๋ชจ๋ ํ์ผ ๋ด์ฉ Read
4. ํตํฉ ์ถ๋ ฅ
--priority ๋ชจ๋
1. YAML: Grep for "priority: \"P0\"" (etc)
2. MD: Grep: "Priority: {P0|P1|P2}" ๋๋ "์ฐ์ ์์: {P0|P1|P2}"
3. ๋งค์นญ๋ ํ์ผ์์ ํด๋น ์ฐ์ ์์ ์น์
๋ง ์ถ์ถ
4. ํตํฉ ์ถ๋ ฅ
--component ๋ชจ๋
1. Read: {spec-folder}/05-tests/components/{ComponentName}.test.yaml (preferred)
2. Fallback: {spec-folder}/05-tests/components/{ComponentName}.test.md
3. ์์ผ๋ฉด: Grep์ผ๋ก ์ปดํฌ๋ํธ๋ช
๊ฒ์
4. ๊ด๋ จ ํ
์คํธ ์คํ ์ถ๋ ฅ
--coverage-gap ๋ชจ๋
1. Read: {spec-folder}/05-tests/coverage-map.md
2. Glob: {spec-folder}/05-tests/components/*.{yaml,md}
3. ๊ธฐ๋ ํ
์คํธ vs ์ค์ ํ
์คํธ ๋น๊ต
4. ๊ฐญ ๋ถ์ ๋ฆฌํฌํธ ์์ฑ
YAML Parsing Guide
YAML ํฌ๋งท ํ ์คํธ ์คํ์์ ๋ฐ์ดํฐ ์ถ์ถ:
# ๋ฉํ๋ฐ์ดํฐ
id: "TST-001" โ ํ
์คํธ ID
component: "StockCard" โ ์ปดํฌ๋ํธ ์ด๋ฆ
category: "unit" โ unit | integration | e2e
priority: "P0" โ P0 | P1 | P2
# ํ
์คํธ ์ผ์ด์ค
tests:
unit:
- description: "renders correctly with props"
type: "render"
priority: "P0"
- description: "handles click events"
type: "interaction"
priority: "P1"
accessibility:
- description: "meets WCAG 2.1 AA"
type: "axe"
Agent ์ฐ๋ ์์
Phase 6: UNIT-TEST์์ ์ฌ์ฉ
Task(test-implementer, opus):
prompt: "
# Step 1: ํ
์คํธ ๋ชฉ๋ก ํ์ธ
Skill(spec-test-loader {spec-folder} --list)
# Step 2: P0 ์ฐ์ ์์ ํ
์คํธ๋ง ๋ก๋ฉ
Skill(spec-test-loader {spec-folder} --priority P0)
# Step 3: ํด๋น ํ
์คํธ ๊ตฌํ
FOR test IN P0_tests:
- Read test spec
- Write test file
- Run test
- Verify pass
# Step 4: P1 ์ฐ์ ์์
Skill(spec-test-loader {spec-folder} --priority P1)
...
# Step 5: ์ปค๋ฒ๋ฆฌ์ง ๊ฐญ ํ์ธ
Skill(spec-test-loader {spec-folder} --coverage-gap)
โ ์ถ๊ฐ ํ
์คํธ ๊ตฌํ
"
์ ์ง์ ๋ก๋ฉ ํจํด
# 1๋จ๊ณ: ์ ์ฒด ๊ตฌ์กฐ ํ์
(๊ฐ๋ฒผ์ด ๋ก๋ฉ)
Skill(spec-test-loader specs --list)
# 2๋จ๊ณ: ํ์ํ ๋ถ๋ถ๋ง ์์ธ ๋ก๋ฉ
Skill(spec-test-loader specs --component StockCard)
# 3๋จ๊ณ: ๊ตฌํ ํ ๋ค์ ์ปดํฌ๋ํธ
Skill(spec-test-loader specs --component PriceDisplay)
์ถ๋ ฅ ํฌ๋งท
๋ชจ๋ ์ถ๋ ฅ์ Markdown ํ์์ผ๋ก ์ ๊ณต๋ฉ๋๋ค:
# {๋ก๋ฉ ํ์
} ๊ฒฐ๊ณผ
## ๋ฉํ๋ฐ์ดํฐ
- ๋ก๋ฉ ์ผ์: {timestamp}
- ์์ค: {spec-folder}
- ํํฐ: {filter-type}
## ๋ด์ฉ
{actual content}
---
*Loaded by spec-test-loader*
๊ด๋ จ Skill
spec-scenario-loader: ์๋๋ฆฌ์ค ๊ณํ์ ๋ก๋ฉspec-component-loader: ์ปดํฌ๋ํธ ์คํ ๋ก๋ฉspec-it-execute: Phase 6์์ ์ด skill ์ฌ์ฉ
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.