skills.sh 활용하기

https://skills.sh/

vercel이 npm 다음으로 히트칠 것 같은 ai agent skill 저장소

> npx skills add vercel-labs/agent-skills

위 네 가지 모두 선택하고 설치

원하는 AI 툴/에이전트를 선택 후 설치 계속

처음이라면 global과 symlink 선택 후 설치 진행

설치가 끝났다면 가장 첫 번째로 설치해야할 스킬은 find-skills. 에이전트에서 스킬을 자동으로 찾고 설치하라고 시킬 수 있음.

> npx skills add https://github.com/vercel-labs/skills --skill find-skills

역시 global로 설치해두고 symlink 로 선택해두면 편하게 사용 가능.

하지만 아무거나 설치하면 큰일 날 수 있음. 보안 이슈도 문제고 저품질도 문제고. 항상 공신 벤터 스킬 위주로 설치해라. 아니면 github 코드 들어가서  AI로 코드 검수하고 설치하던가. 설치 수 많다고 아무거나 설치하다가 PC와 함께 인생 망할 수 있다.

프로젝트에는 다음과 같이 적용할 수 있음. 

> npx skills add vercel-labs/skills
    ◇  39 agents
    ◇  Which agents do you want to install to?
    │  Amp, Codex, Gemini CLI, GitHub Copilot, Kimi Code CLI, OpenCode, Antigravity, Claude Code, OpenClaw, Continue   
    │
    ◇  Installation scope
    │  Project
    │
    ◇  Installation method
    │  Symlink (Recommended)

    │
    ◇  Installation Summary ───────────────────────────────────────────────────────╮
    │                                                                              │
    │  .\.agents\skills\find-skills                                                │
    │    universal: Amp, Codex, Gemini CLI, GitHub Copilot, Kimi Code CLI +1 more  │
    │    symlink → Antigravity, Claude Code, OpenClaw, Continue                    │
    │                                                                              │
    ├──────────────────────────────────────────────────────────────────────────────╯
    │
    ◆  Proceed with installation?
    │  ● Yes / ○ No
    └
> npx skills add anthropics/skills
    Select skills to install (space to toggle)
    │  template-skill, algorithmic-art, canvas-design, frontend-design
    │
    ◇  39 agents
    ◇  Which agents do you want to install to?
    │  Amp, Codex, Gemini CLI, GitHub Copilot, Kimi Code CLI, OpenCode, Antigravity, Claude Code, OpenClaw, Continue   
    │
    ◇  Installation scope
    │  Project
    │
    ◇  Installation method
    │  Symlink (Recommended)

그리고 아래 두 가지 스킬을 추가.

> npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
> npx skills add nextlevelbuilder/ui-ux-pro-max-skill

필요한 스킬은 모두 추가되었어. 이제 실제 개선 작업을 해보자.

우선 현재 UI에 대해 진단을 실행해. 난 지금 모바일 디바이스의 전체 화면모드에서 UI가 가리거나 너무 좁은 곳에 배치되어 조작이 힘든 문제가 있는 상태야. 그래서 다음과 같은 프롬프트를 실행하는거지.

> 전체 코드에 대해 모바일 상태의 전체 화면에서 web-design_guidelines 스킬을 기준으로 분석하고 문제점들을 정리해.

개선해야 할 사항들이 정리되었으니 frontend-design  스킬을 이용해 개선해.

> 정리된 내용을 기준으로 frontend-design 스킬의 모범 사례를 따르고, 
특히 모바일 반응형 부분에 신경써서 개선해. 전체 화면 시 UI의 레이아웃을 
상단 부분과 하단 부분으로 구분해서 배치해.

fcs-game.com 이라는 미니 게임을 플레이 할 수 있는 사이트를 개발중인데 각 디바이스 별로 소소한 문제들이 있어 한방에 해결하라고 시켜봤어.

원래는 아래와 같았고..

개선된 버전은 다음과 같다. 

(* 게임은 여기에서 확인하실 수 있습니다. https://fcs-game.com ) 

skills.sh의 스킬들이 만능은 아니고 그래도 세세하게 지시를 해야 원하는 결과를 얻을 수 있다.

이 외에도 ui/ux pro max 도 꽤 도움이 된다.

> npx skills add nextlevelbuilder/ui-ux-pro-max-skill

설치하다보면 너무 많은 파일들이 같이 설치되기 때문에 세세하게 관리하기는 좀 어렵고 좀 내려놔야 해.