← 보드로 돌아가기

ConardLi/garden-skills큐레이터 픽

ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.

GitHub에서 열기 ↗ agentclaudegpt-image-2ragskillsweb-design
9,344
GitHub 스타
1,247
포크
CSS
언어
MIT
라이선스
2026.06.10
최근 푸시
2026.05.24
별표한 날

AI 분석

설치 난이도: 보통
큐레이터 노트
이 저장소는 AI 코딩 에이전트의 역량을 확장하려는 개발자에게 매우 유용합니다. 특히 웹 디자인 및 프레젠테이션 제작에 특화된 Skill은 생산성을 크게 향상시킬 수 있습니다. 다만, 사용하려는 에이전트와의 호환성 및 의존성 확인이 필요합니다.

강점

  • 프로덕션 준비가 완료된 Agent Skills 컬렉션으로, Claude Code, Cursor, Codex 등 다양한 AI 코딩 에이전트와 호환됩니다.
  • 웹 비디오 프레젠테이션, 웹 디자인 엔지니어링, 이미지 생성 등 구체적인 사용 사례에 맞춰진 고품질 Skill을 제공합니다.
  • 각 Skill은 상세한 문서, 테마 갤러리, 다운로드 가능한 zip 파일을 포함하여 즉시 사용 가능합니다.

약점

  • README가 일부 Skill(gpt-image-2, beautiful-article)에 대한 설명을 생략하여 전체 내용을 파악하기 어렵습니다.
  • 설치 방법이 다양하지만(npx, 플러그인 마켓플레이스, zip, 수동 복사, 서브모듈) 초보자에게는 혼란스러울 수 있습니다.
  • 의존성이나 환경 설정에 대한 구체적인 정보가 부족하여 특정 에이전트에서의 호환성 문제가 발생할 수 있습니다.

주의사항

  • 각 Skill은 특정 AI 에이전트(Claude Code, Cursor 등)에 최적화되어 있으므로, 사용하려는 에이전트와의 호환성을 먼저 확인해야 합니다.
  • 다운로드한 zip 파일이나 수동 복사한 Skill은 정기적인 업데이트가 필요할 수 있으며, 최신 버전을 유지해야 합니다.
  • 일부 Skill은 외부 TTS 서비스(MiniMax, OpenAI 등)나 추가 도구에 의존하므로, 사용 전에 해당 서비스의 설정 및 비용을 확인해야 합니다.

시작 가이드

  • 저장소를 클론하거나 npx를 통해 skills CLI를 설치하여 사용을 시작합니다.
  • 관심 있는 Skill(예: web-design-engineer)의 README와 SKILL.md를 읽고 상세 사용법을 숙지합니다.
  • 해당 Skill을 AI 에이전트(예: Claude Code)에 적용하여 실제 프로젝트에서 테스트해 봅니다.

README 한국어 번역

이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.

<div align="center">

Garden Skills

Claude Code, Cursor, Codex 및 기타 AI 코딩 에이전트를 위한 프로덕션 준비 완료 Agent Skills의 엄선된 컬렉션입니다.

<a id="skills-gallery"></a>

<table> <tr> <td width="50%" valign="top"> <a href="#web-video-presentation"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video-presentation-skill.webp" alt="Web Video Presentation Skill" width="100%"></a> <br/><a href="#web-video-presentation"><strong>web-video-presentation</strong></a> <br/><sub>웹 비디오 / 프레젠테이션</sub> </td> <td width="50%" valign="top"> <a href="#web-design-engineer"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design-skill.webp" alt="Web Design Skill" width="100%"></a> <br/><a href="#web-design-engineer"><strong>web-design-engineer</strong></a> <br/><sub>디자인 / 프론트엔드</sub> </td> </tr> <tr> <td width="50%" valign="top"> <a href="#gpt-image-2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/gpt-image-2-skill.webp" alt="GPT Image 2 Skill" width="100%"></a> <br/><a href="#gpt-image-2"><strong>gpt-image-2</strong></a> <br/><sub>이미지 생성 / 프롬프팅</sub> </td> <td width="50%" valign="top"> <a href="#beautiful-article"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/article/banner.webp" alt="Beautiful Article Skill" width="100%"></a> <br/><a href="#beautiful-article"><strong>beautiful-article</strong></a> <br/><sub>모든 소스 → 아름다운 글</sub> </td> </tr> </table>

English · 中文文档 · 日本語

</div>

목차

설치 사용 기여
설치<br>skills CLI (npx)<br>Claude Code 플러그인 마켓플레이스<br>릴리스에서 고정된 .zip<br>수동 복사<br>Git 서브모듈 호환성<br>Skill이란 무엇인가요? 기여하기<br>감사의 말<br>라이선스

web-video-presentation

!Web Video Presentation Skill

카테고리: 웹 비디오 / 프레젠테이션 엔지니어링 최적 대상: 스크립트, 기사, 강의, 제품 데모, 강연을 클릭 기반 16:9 웹 프레젠테이션으로 변환하여 시네마틱 비디오로 화면 녹화할 수 있습니다.

web-video-presentation은 비디오 제작 표면처럼 동작하는 녹화 준비 완료 Vite + React + TypeScript 프레젠테이션을 구축합니다. 워크플로는 원시 기사를 내레이션 스크립트로 변환하고, 스크립트 비트를 전체 화면 장면에 매핑하며, 필요한 체크포인트에서 일시 중지하고, 시각적 개요가 승인된 후 선택적으로 내레이션 오디오를 합성합니다.

주요 특징:

  • 안정적인 화면 녹화를 위해 뷰포트에 맞게 크기가 조정되는 고정 1920×1080 스테이지
  • 클릭 / 키보드 기반 (chapter, step) 커서, 각 시각적 단계당 하나의 내레이션 비트
  • 스크립트, 테마, 개요, 구현 모드 및 선택적 오디오에 대한 하드 협업 체크포인트
  • 녹화 중 스테이지를 깔끔하게 유지하기 위한 숨겨진 호버 전용 진행 컨트롤
  • 23개의 내장 테마를 갖춘 테마 토큰 아키텍처, 각각 고유한 디자인 시그니처(에디토리얼, 터미널, 엔지니어링, 스위스 인터내셔널 등)
  • 플러그형 TTS — 공급자에 구애받지 않는 오디오 러너; 두 개의 내장 공급자(MiniMax mmx-cli + curl을 통한 OpenAI TTS)와 ElevenLabs / edge-tts / Azure / Google Cloud / macOS say를 위한 계약 및 붙여넣기 준비 코드 조각 제공
  • 재사용 가능한 스테이지 프리미티브 및 녹화 가이드가 포함된 스캐폴딩된 Vite + React + TypeScript 프로젝트

<table> <tr> <td align="center" width="25%"><a href="./skills/web-video-presentation/README.md#theme-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="creative-voltage preview" /></a><br /><sub><code>creative-voltage</code><br />크리에이티브 강연</sub></td> <td align="center" width="25%"><a href="./skills/web-video-presentation/README.md#theme-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/blueprint.webp" alt="blueprint preview" /></a><br /><sub><code>blueprint</code><br />기술 아키텍처</sub></td> <td align="center" width="25%"><a href="./skills/web-video-presentation/README.md#theme-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/swiss-ikb.webp" alt="swiss-ikb preview" /></a><br /><sub><code>swiss-ikb</code><br />데이터 보고서</sub></td> <td align="center" width="25%"><a href="./skills/web-video-presentation/README.md#theme-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/chalk-garden.webp" alt="chalk-garden preview" /></a><br /><sub><code>chalk-garden</code><br />대중 과학</sub></td> </tr> </table>

<a href="./skills/web-video-presentation/README.md#theme-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/gallery.webp" alt="Theme gallery — 23 built-in themes for web-video-presentation" /></a>

<sub>↑ 23개 테마 한눈에 보기 — 라이브 16:9 미리보기, 디자인 시그니처 및 최적 대상 태그를 보려면 <a href="./skills/web-video-presentation/README.md#theme-gallery"><b>전체 갤러리 열기</b></a>.</sub>

링크: README · SKILL.md · <!-- DOWNLOAD:web-video-presentation:start -->v1.2.2.zip 다운로드<!-- DOWNLOAD:web-video-presentation:end -->

web-design-engineer

!Web Design Skill

카테고리: 디자인 / 프론트엔드 최적 대상: 웹 페이지, 랜딩 페이지, 대시보드, 인터랙티브 프로토타입, HTML 슬라이드 데크, 애니메이션, UI 목업, 데이터 시각화 및 디자인 시스템 탐색.

web-design-engineer는 AI 생성 웹 아티팩트를 단순히 기능적인 수준에서 세련되고 의도적이며 시각적으로 기억에 남는 프론트엔드 작업으로 전환합니다. 에이전트를 디자인 엔지니어로 취급합니다: 먼저 제품 컨텍스트를 이해한 다음, 디자인 시스템을 선언하고, 초기 v0을 보여주고, 전체 경험을 구축하고, 결과를 검증합니다.

주요 특징:

  • 6단계 디자인 워크플로 정의: 요구사항 → 컨텍스트 → 디자인 시스템 → v0 → 전체 빌드 → 검증
  • 반-클리셰 블록리스트와 더 강력한 시각적 판단력을 통해 일반적인 AI UI 패턴을 넘어섬
  • 디자인 방향 어드바이저(6개의 차별화된 스쿨) + 25개의 앵커 스타일 레시피(Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century 등) 제공 — 각 레시피는 구체적인 팔레트, 타이포그래피, 시그니처 무브 및 안티 패턴을 포함하여 디자인 시스템 선언에 붙여넣을 준비가 되어 있음
  • HTML / CSS / JavaScript / React 프로토타입을 다루며, 반응형 레이아웃, 모션 및 인터랙션 폴리싱에 대한 지침 포함
  • 인라인 React + Babel, CSS 토큰, oklch() 색상 작업, 컨테이너 쿼리 및 축소 모션 처리를 위한 실용적인 구현 규칙 포함
  • 장치 프레임, 슬라이드 엔진, 애니메이션 타임라인, 대시보드 및 기타 재사용 가능한 웹 아티팩트를 위한 고급 패턴 참조 제공

<table> <tr> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a><br /><sub><code>aesop</code><br />약국 페이지</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji-kenya-hara preview" /></a><br /><sub><code>muji-kenya-hara</code><br />오브제 카탈로그</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="monocle-magazine preview" /></a><br /><sub><code>monocle-magazine</code><br />매거진 콘텐츠</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-press preview" /></a><br /><sub><code>stripe-press</code><br />책 상세</sub></td> </tr> <tr> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt="bloomberg-terminal preview" /></a><br /><sub><code>bloomberg-terminal</code><br />트레이딩 대시보드</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a><br /><sub><code>linear</code><br />개발 도구 랜딩</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh preview" /></a><br /><sub><code>vercel-mesh</code><br />배포 히어로</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-dataink preview" /></a><br /><sub><code>tufte-dataink</code><br />데이터 내러티브</sub></td> </tr> <tr> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt="mid-century-modern preview" /></a><br /><sub><code>mid-century-modern</code><br />포스터 오마주</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y2k-retrofuturism preview" /></a><br /><sub><code>y2k-retrofuturism</code><br />Y2K 포털</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp" alt="bloomberg-businessweek-turley preview" /></a><br /><sub><code>businessweek-turley</code><br />에디토리얼 커버</sub></td> <td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-theory preview" /></a><br /><sub><code>active-theory</code><br />시네마틱 런칭</sub></td> </tr> </table>

<sub>↑ 25개 앵커 레시피 중 12개 — 시그니처 무브 및 최적 대상 태그와 함께 모든 25개 작업 아티팩트(약국 페이지, 트레이딩 워크스테이션, 매거진 커버, Y2K 포털, 미드센추리 포스터 …)를 보려면 <a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><b>전체 갤러리 열기</b></a>.</sub>

링크: README · SKILL.md · 웹사이트 · 데모 · <!-- DOWNLOAD:web-design-engineer:start -->v1.2.2.zip 다운로드<!-- DOWNLOAD:web-design-engineer:end -->

gpt-image-2

!GPT Image 2 Skill

*

[...truncated...]

원본 저장소: ConardLi/garden-skills

라이선스: MIT

게재 제외를 원하시면 삭제 요청을 보내주세요.