๋ฌ๋ ์คํฐ๋์ ์์ด์ ํธ ์คํฌ ๋ชจ์์ ๋๋ค.
๋ค์ํ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์์ฃผ ์ฐ๋ ์ง์, ๋ฐ๋ณต๋๋ ์ฒดํฌ๋ฆฌ์คํธ, ๋ ธํ์ฐ, ๋ชจ๋ฒ ๊ดํ, ์ํฐ ํจํด ๊ฐ์ ๊ฒ๋ค์ด ์์ฐ์ค๋ฝ๊ฒ ์ง์ ์์ฐ์ผ๋ก ์์ ๋๋ค. ์ด์ ์ด๋ฐ ๊ณต๋ ์ง์์ AI ์์ด์ ํธ๋ ํ์ฉํ ์ ์๋๋ก Agent Skills ํ์์ผ๋ก ์ฒด๊ณํํ์ต๋๋ค.
npx skills add dalestudy/skills๋๋ Bun ์ฌ์ฉ ์:
bunx skills add dalestudy/skillsnpx skills add dalestudy/skills --skill bunNode.js ๋์ Bun ๋ฐํ์ ์ฌ์ฉ์ ์ํ ๊ฐ์ด๋
์ฃผ์ ๊ธฐ๋ฅ:
- npm/yarn โ bun ๋ช ๋ น์ด ๋งคํ
- ํ๋ก์ ํธ ์ด๊ธฐํ ๋ฐ ํจํค์ง ๊ด๋ฆฌ
- GitHub Actions CI ์ค์
- Node.js ๋ง์ด๊ทธ๋ ์ด์ ์ฒดํฌ๋ฆฌ์คํธ
์ธ์ ํ์ฑํ๋๋์?
package.json์์ bun ๊ด๋ จ ์์ ์- "bun์ผ๋ก ํ๋ก์ ํธ ์์ํด์ค" ๊ฐ์ ์์ฒญ ์
npx skills add dalestudy/skills --skill bunGitHub Actions ์ํฌํ๋ก์ฐ ์์ฑ ์ ๋ณด์๊ณผ ์ต์ ๋ฒ์ ๊ด๋ฆฌ
์ฃผ์ ๊ธฐ๋ฅ:
- ์ต์ ์ก์
๋ฒ์ ์๋ ํ์ธ (
gh apiํ์ฉ) - ์ต์ ๊ถํ ์์น ๋ฐ ์ํฌ๋ฆฟ ๊ด๋ฆฌ
- ์ ๋ ฅ๊ฐ ์ธ์ ์ ๋ฐฉ์ง ํจํด
pull_request_target๋ณด์ ๊ฐ์ด๋
์ธ์ ํ์ฑํ๋๋์?
.github/workflows/ํ์ผ ์์ ์- "CI ์ํฌํ๋ก์ฐ ๋ง๋ค์ด์ค" ๊ฐ์ ์์ฒญ ์
uses:,actions/ํค์๋ ํฌํจ ์์ ์
npx skills add dalestudy/skills --skill github-actionsStorybook ์คํ ๋ฆฌ ์์ฑ ๋ฐ CSF 3.0 ๋ฒ ์คํธ ํ๋ํฐ์ค
์ฃผ์ ๊ธฐ๋ฅ:
- CSF 3.0 ํ์๊ณผ ํ์ ์์ ํ ํจํด
- Args ๊ธฐ๋ฐ ์คํ ๋ฆฌ ์์ฑ ๋ฐ ์ฌ์ฌ์ฉ
- Decorators๋ก ์ปจํ ์คํธ ์ ๊ณต (Theme, Router, Provider ๋ฑ)
- Parameters์ ArgTypes ์ธ๋ฐํ ์ ์ด
์ธ์ ํ์ฑํ๋๋์?
.stories.tsx,.stories.tsํ์ผ ์์ ์- "Button ์ปดํฌ๋ํธ ์คํ ๋ฆฌ ๋ง๋ค์ด์ค" ๊ฐ์ ์์ฒญ ์
storybook,CSFํค์๋ ํฌํจ ์์ ์
npx skills add dalestudy/skills --skill storybook์ ์คํฌ ์์ฑ ๋ฐ ๊ด๋ฆฌ ๊ฐ์ด๋
์ฃผ์ ๊ธฐ๋ฅ:
- SKILL.md ํ์ ๋ฐ frontmatter ๊ท์น
- ์คํฌ ์์ฑ 6๋จ๊ณ ํ๋ก์ธ์ค
- ์๋ ๊ฒ์ฆ ๋ฐ ํจํค์ง
์ธ์ ํ์ฑํ๋๋์?
- "์ ์คํฌ ๋ง๋ค์ด์ค" ์์ฒญ ์
/skill-creator๋ช ๋ น์ด ์ฌ์ฉ ์- SKILL.md ์์ฑ ๋๋ ์์ ์
npx skills add dalestudy/skills --skill skill-creator์ค์น ํ ๊ฐ AI ๋๊ตฌ์์ ์๋์ผ๋ก ํ์ฑํ๋ฉ๋๋ค:
| ๋๊ตฌ | ํ์ฑํ ๋ฐฉ์ | ์์ |
|---|---|---|
| Claude Code | ์๋ (ํค์๋ ๊ฐ์ง) ๋๋ ์ฌ๋์ ๋ช ๋ น์ด | "GitHub Actions ์ํฌํ๋ก์ฐ ๋ง๋ค์ด์ค" |
| Cursor | ํ์ผ ํจํด ๋งค์นญ | .stories.tsx ํ์ผ ์ด๋ฉด ์๋ ํ์ฑํ |
| GitHub Copilot | @workspace ๋ฉ์
|
@workspace Storybook ์คํ ๋ฆฌ ์์ฑ ๋ฐฉ๋ฒ |
๊ฐ ์คํฌ์ Agent Skills ์คํ์ ๋ฐ๋ฆ ๋๋ค:
skill-name/
โโโ SKILL.md # ํ์: YAML frontmatter + ๋งํฌ๋ค์ด ์ง์์ฌํญ
โโโ scripts/ # ์ ํ: ์คํ ๊ฐ๋ฅํ ์คํฌ๋ฆฝํธ
โโโ references/ # ์ ํ: ์ฐธ์กฐ ๋ฌธ์
โโโ assets/ # ์ ํ: ํ
ํ๋ฆฟ, ์ด๋ฏธ์ง ๋ฑ
์ ์คํฌ์ ์ถ๊ฐํ๊ฑฐ๋ ๊ธฐ์กด ์คํฌ์ ๊ฐ์ ํ๊ณ ์ถ์ผ์๋ค๋ฉด:
- skill-creator ์คํฌ ์ค์น
npx skills add dalestudy/skills --skill skill-creator- ์ ์คํฌ ์ด๊ธฐํ
npx skills init <์คํฌ๋ช
>๋๋ Claude Code์์:
/skill-creator
- ์คํฌ ๊ฐ๋ฐ ๋ฐ ํ ์คํธ
skill-creator ๊ฐ์ด๋๋ฅผ ๋ฐ๋ผ SKILL.md ์์ฑ ๋ฐ ๋ฆฌ์์ค ์ถ๊ฐ
- Pull Request ์ ์ถ
๋ณ๊ฒฝ์ฌํญ์ ์ปค๋ฐํ๊ณ PR์ ๋ณด๋ด์ฃผ์ธ์!