nexus

color

promise

axios

terminal

Let's Encrypt

sync

rename

keyboard

diff

merge

compare

sniffer

memory

fiddler

scan

cleaner

icon

mstsc

remote

chmod

shutdown

defender

cidr

javascript

datatable

spring

websocket

stomp

boot

ping

image

hotspot

sharpener

mail

linux

sftp

tomcat

service

systemctl

admin

root

firewall

regex

timezone

annotation

time

i18n

weekend

coroutine

static

autowired

procedure

azul

openjdk

maven

versioning

security

onload

test

debug

lucene

docker

backup

json

jackson

lombok

builder

logstash

kafka

redis

<p><a target="_blank" rel="noopener noreferrer" href="https://lazyowen.com/guides/claude-code-skills-5-0813">https://lazyowen.com/guides/claude-code-skills-5-0813</a></p><hr><h1>공통</h1><h2>설치 전 준비</h2><pre><code class="language-shell">node -v          # Node.js 18 이상 권장 (LTS 20+)
npm -v
claude --version</code></pre><h2>설치 후</h2><p>Claude Code를 완전히 종료했다가 다시 실행해야 새 스킬과 명령이 인식됩니다.</p><pre><code class="language-shell">ls -al ~/.claude/skills/
ls -al ~/.claude/commands/
npx --yes skills@latest list --agent claude-code --global</code></pre><h2>문제 해결</h2><figure class="table content-table"><table><thead><tr><th>증상</th><th>조치</th></tr></thead><tbody><tr><td>스킬이 목록에 없음</td><td>Claude Code 완전 종료 후 재시작</td></tr><tr><td>npx 캐시/권한 오류</td><td><code>npm cache clean --force</code> 후 재실행</td></tr><tr><td>프로젝트 단위로 설치하고 싶음</td><td><code>--global</code> 제거 후 프로젝트 루트에서 실행</td></tr><tr><td>스킬 제거</td><td><code>rm -rf ~/.claude/skills/&lt;스킬명&gt;</code></td></tr></tbody></table></figure><h2>역할 구분</h2><ul><li data-list-item-id="e66208b706bbc6c77c64bf355e80fa982">GSD Core : 프로세스 계층 (무엇을 어떤 순서로, 맥락 유지)</li><li data-list-item-id="ea533b65b071fb4b6c69134c2fc27958a">mcp-builder : 연동 계층 (Claude가 시스템을 조작하게 하기)</li><li data-list-item-id="e1e176e85482580512c01c09347eaef47">design-taste-frontend : 화면 계층 (결과물이 뻔해 보이지 않게)</li></ul><h2>&nbsp;</h2><h1>agent-browser</h1><h2>특징</h2><p>에이전트 우선 : 간결한 텍스트 출력은 JSON보다 토큰 수가 적어 AI 컨텍스트 효율성을 높이도록 설계되었습니다.<br>참조 기반 : 스냅샷은 결정론적 요소 선택을 위한 참조가 포함된 접근성 트리를 반환합니다.<br>완벽함 : 탐색, 양식, 스크린샷, 네트워크, 저장소, 파일, 탭, 프레임 및 디버깅을 위한 50개 이상의 명령이 포함되어 있습니다.<br>Observable : 비디오 녹화 , 스트리밍 , 디버깅 , 프로파일링 및 차이점 비교 도구가 내장되어 있습니다.<br>최신 앱 : 네트워크 제어 , React 및 웹 바이탈 , 초기화 스크립트 , Next.js + Vercel , 그리고 eve 확장 워크플로는 훌륭한 문서들을 제공합니다.<br>상태 유지 : 세션 , 프로필, 인증 상태, 쿠키, 저장소, 프록시 및 보안 제어를 통해 장기 실행 에이전트를 지원합니다.<br>크로스 플랫폼 : macOS, Linux, Windows (네이티브 바이너리 포함)</p><h2>cli 설치</h2><pre><code class="language-shell"># macOS는 brew install agent-browser 도 가능
npm install -g agent-browser
# 첫 실행 시 Chrome 다운로드 (Linux는 --with-deps)
agent-browser install </code></pre><h2>전역 설치</h2><pre><code class="language-shell">npx skills add vercel-labs/agent-browser --global</code></pre><blockquote><p>결과: ~/.claude/skills/agent-browser/SKILL.md</p></blockquote><h2>권한 허용(~/.claude/settings.json)</h2><pre><code class="language-json">{
  "permissions": {
    "allow": ["Bash(agent-browser *)", "Bash(npx agent-browser *)"]
  }
}</code></pre><hr><h1>design-taste-frontend (Taste-Skill)</h1><h2>특징</h2><ul><li data-list-item-id="e23f62a2382110458ec4eb87c009a8eff">안티 슬롭 : AI가 만들어내는 뻔하고 템플릿 같은 프론트엔드 결과물을 차단합니다.</li><li data-list-item-id="eda23b8872391dd47c0a44b3dd185138b">브리프 우선 : 코드를 쓰기 전에 요구사항을 읽고 디자인 방향(SaaS 미니멀, 에이전시 실험적, 프리미엄 소비재 등)을 먼저 추론합니다.</li><li data-list-item-id="ef2c0b52879cf1d33a365f8fc8b17c38f">3개 다이얼 : <code>DESIGN_VARIANCE</code>(레이아웃 실험성), <code>MOTION_INTENSITY</code>(애니메이션 깊이), <code>VISUAL_DENSITY</code>(정보 밀도)를 1~10으로 조절합니다.</li><li data-list-item-id="e2788dada2a3a91a07c1f5a932a437080">금지 규칙 : em-dash 남발, 뻔한 세리프 폰트, 베이지+골드 "프리미엄" 팔레트, 동일 크기 카드 3개 나열 등 전형적인 LLM 티를 금지합니다.</li><li data-list-item-id="e8941269781ddb17e471b30dfd34e18a0">디자인 시스템 인지 : 적합하면 Material, Carbon, Fluent, Primer, GOV.UK 등 실제 디자인 시스템을 쓰고, 아니면 Tailwind + Motion/GSAP 커스텀으로 갑니다.</li><li data-list-item-id="eb74d9f5ed2f21793c804ffdc42cc719d">프리플라이트 : 출력 전 대비, 버튼 상태, 다크/라이트 대응 등 체크리스트를 강제합니다.</li><li data-list-item-id="ed466e1827f364d92bb26dfcc98c59e04">프레임워크 중립 : React, Vue, Svelte 어디서든 동작합니다. 대상은 랜딩 페이지·포트폴리오·리디자인이며 대시보드나 데이터 테이블은 주 대상이 아닙니다.</li></ul><h2>전역 설치</h2><pre><code class="language-shell">npx --yes skills@latest add https://github.com/Leonxlnx/taste-skill \
  --skill design-taste-frontend --agent claude-code --global --yes --copy</code></pre><blockquote><p>결과: ~/.claude/skills/design-taste-frontend/SKILL.md</p></blockquote><p>v1 동작이 필요하면 <code>--skill design-taste-frontend-v1</code>로 고정합니다.</p><h2>옵션</h2><figure class="table content-table"><table><thead><tr><th>옵션</th><th>의미</th></tr></thead><tbody><tr><td><code>--skill design-taste-frontend</code></td><td>저장소의 여러 변형 중 기본 스킬 선택</td></tr><tr><td><code>--agent claude-code</code></td><td>Claude Code 경로에 설치</td></tr><tr><td><code>--global</code></td><td>프로젝트가 아닌 사용자 전역에 설치</td></tr><tr><td><code>--yes</code></td><td>프롬프트 없이 진행</td></tr><tr><td><code>--copy</code></td><td>심볼릭 링크 대신 파일 복사</td></tr></tbody></table></figure><h2>확인</h2><pre><code class="language-shell">cat ~/.claude/skills/design-taste-frontend/SKILL.md | head -30</code></pre><p>Claude Code 재시작 후 "랜딩 페이지 만들어줘"라고 했을 때 브리프나 다이얼을 언급하면 정상입니다.</p><hr><h1>mcp-builder</h1><h2>특징</h2><ul><li data-list-item-id="e4dd6d40fde7ab27a6eb66c783f9cc8af">공식 스킬 : Anthropic 공식 저장소(<code>anthropics/skills</code>)에서 제공합니다.</li><li data-list-item-id="e60f3f3084d67af8ede9a82855c88ae1f">MCP 서버 제작 : 외부 API나 사내 시스템을 Claude의 툴로 노출시키는 MCP 서버의 구조를 잡아줍니다.</li><li data-list-item-id="ef8f934da44060fb93002e8badf8d2e67">스키마 설계 : 에이전트가 오해하지 않도록 툴 이름, 설명, 입력 스키마를 설계하는 기준을 제시합니다.</li><li data-list-item-id="e88f43d052d6677f8772598e8d0abdc53">응답 설계 : 에러 처리, 페이지네이션, 토큰 낭비를 줄이는 응답 형태 등 실무 패턴을 포함합니다.</li><li data-list-item-id="e2170ab4652c117549dfdbb75463660d8">검증 절차 : 만든 서버를 실제로 호출해보며 확인하는 흐름을 안내합니다.</li><li data-list-item-id="e19022438d6704cd0a6fec7392a89bd79">활용 : Spring Boot 백엔드를 MCP 서버로 감쌀 때 설계 기준으로 쓸 수 있습니다.</li></ul><h2>전역 설치</h2><pre><code class="language-shell">npx --yes skills@latest add anthropics/skills \
  --skill mcp-builder --agent claude-code --global --yes --copy</code></pre><blockquote><p>결과: ~/.claude/skills/mcp-builder/SKILL.md</p></blockquote><h2>확인</h2><pre><code class="language-shell">cat ~/.claude/skills/mcp-builder/SKILL.md | head -30</code></pre><p>"MCP 서버 만들고 싶어"라고 했을 때 스킬이 활성화되면 정상입니다.</p><hr><h1>GSD Core (@opengsd/gsd-core)</h1><h2>특징</h2><ul><li data-list-item-id="ed6c7f73638840d7e353df12cacd10077">스킬이 아닌 프레임워크 : 개별 스킬 하나가 아니라 스펙 주도 개발 프로세스 전체를 에이전트에 설치합니다.</li><li data-list-item-id="eaa585922baa23bfb56331f4d248e557d">컨텍스트 로트 해결 : 무거운 리서치·계획·실행을 새 컨텍스트의 서브에이전트에서 돌려 메인 세션을 가볍게 유지합니다.</li><li data-list-item-id="e2d2b59b6945d0fbadf34b34210df414d">지속 산출물 : <code>STATE.md</code>, <code>CONTEXT.md</code>, <code>VISION.md</code>, <code>ROADMAP.md</code> 등으로 세션이 끊겨도 맥락이 남습니다.</li><li data-list-item-id="ec5e9c74c13df22907b8c088d907cebca">반복 루프 : 마일스톤마다 Discuss → Plan → Execute → Verify → Ship을 한 단계씩 반복합니다.</li><li data-list-item-id="eca24c0b90a72a15802306e7b6d0fab17">검증 강제 : verify 단계에서 실제 동작을 확인하고, 문제가 있으면 수정 계획을 만든 뒤에야 phase를 완료 처리합니다.</li><li data-list-item-id="e340e364db8f3ef1bd593089d346fb02e">멀티 런타임 : Claude Code, Codex, Cursor, Windsurf, Copilot 등을 지원합니다.</li></ul><h2>전역 설치</h2><pre><code class="language-shell">npx --yes @opengsd/gsd-core@latest --claude --global</code></pre><blockquote><p>결과: ~/.claude/commands/ 아래에 GSD 슬래시 명령 설치</p></blockquote><p><code>--claude</code>는 대화형 프롬프트 없이 Claude Code 런타임을 지정, <code>--global</code>은 사용자 전역 설치입니다.</p><h2>주요 명령</h2><pre><code class="language-plaintext">/gsd-new-project    # 신규 프로젝트 시작
/gsd-onboard       # 기존 코드베이스 온보딩
/gsd discuss       # 구현 결정 사항 정리
/gsd verify        # 출하 전 검증</code></pre><h2>확인</h2><pre><code class="language-shell">npx --yes @opengsd/gsd-core@latest --help
npm ls -g --depth=0 @opengsd/gsd-core
ls -al ~/.claude/commands/</code></pre><p><code>--help</code> 출력은 패키지 실행 가능 여부만 증명합니다. 실제 적용 여부는 Claude Code 재시작 후 <code>/gsd-new-project</code>가 자동완성에 뜨는지로 확인하세요.</p><blockquote><p>예전 패키지 <code>@opengsd/get-shit-done-redux</code>는 deprecated 되어 <code>@opengsd/gsd-core</code>로 이름이 바뀌었습니다.</p></blockquote><hr><h1>modern-web-guidance</h1><h2>특징</h2><ul><li data-list-item-id="ef67174782cb10f7e7c5bd1f0408edf4d">구글 크롬 팀 스킬 : Chrome 팀과 Edge 팀이 함께 관리하는 저장소(<code>GoogleChrome/modern-web-guidance</code>)에서 제공합니다.</li><li data-list-item-id="e69f0ba058bbdc8d0dea58e272b452116">레거시 패턴 차단 : 학습 데이터에 오래된 코드가 많아 에이전트가 습관적으로 쓰는 구식 구현 대신, 브라우저가 기본 제공하는 방식으로 유도합니다.</li><li data-list-item-id="ef318622004551deca0eb60ac4dfc472d">온디맨드 조회 : 문서를 통째로 컨텍스트에 올리지 않고, 필요할 때 CLI로 해당 가이드만 검색해서 가져옵니다.</li><li data-list-item-id="e91332ff1468860e8bf0a2db7b9ec2c7b">커버 범위 : CSS/레이아웃 51종, HTML/DOM 20종, JS/API 32종에 실무 유스케이스 131개가 들어 있습니다. Popover, <code>&lt;dialog&gt;</code>, Anchor Positioning, 컨테이너 쿼리, View Transitions 등이 포함됩니다.</li><li data-list-item-id="ea0a5bdb0a1ee700d070cdd73441bdaa2">폴백 기준 : 무거운 폴리필 대신 50줄 이내의 경량 폴백을 우선하고, Baseline 데이터로 브라우저 지원 현황을 판단합니다.</li><li data-list-item-id="e9c8de947c5ebe847ae292fd26de9e3b0">활용 : 프레임워크 비의존 웹 표준 위주라 Thymeleaf 서버 렌더링이든 React SPA든 그대로 적용됩니다.</li></ul><h2>전역 설치</h2><pre><code class="language-shell">npx --yes skills@latest add GoogleChrome/modern-web-guidance \
  --skill modern-web-guidance --agent claude-code --global --yes --copy</code></pre><blockquote><p>결과: ~/.claude/skills/modern-web-guidance/SKILL.md</p></blockquote><p>공식 설치 마법사를 쓰려면 아래를 실행하고 에이전트와 설치 범위(global)를 고릅니다.</p><pre><code class="language-shell">npx modern-web-guidance@latest install</code></pre><h2>확인</h2><pre><code class="language-shell">cat ~/.claude/skills/modern-web-guidance/SKILL.md | head -30</code></pre><p>"모달 다이얼로그 백드롭에 애니메이션 넣어줘"라고 했을 때 스킬이 활성화되면 정상입니다.</p><p>설치 없이 동작만 먼저 보려면 아래로 검색/조회를 시험해볼 수 있습니다.</p><pre><code class="language-shell">npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"</code></pre><h2>주의</h2><ul><li data-list-item-id="e53ecd5138a8fa1b8c233da07d5b5b7bc">런타임에 <code>npx</code>가 동작해야 합니다. SKILL.md는 진입점일 뿐이고 실제 가이드는 CLI가 가져옵니다. 검색은 로컬 모델로 처리되어 네트워크나 API 키가 필요 없습니다.</li><li data-list-item-id="efca908272fd15a04b810c909cb9c459c">텔레메트리를 끄려면 셸 프로필에 <code>export DISABLE_TELEMETRY=1</code> 을 추가합니다.</li><li data-list-item-id="eadb5e6d507b229e9357d19fdceb7d2b6">크롬 익스텐션을 만든다면 같은 저장소의 <code>chrome-extensions</code> 스킬을 함께 설치하면 됩니다.</li></ul>

[skills] ai 에서 사용하는 스킬