SKILL DIRECTORY
설치 수와 최근 흐름을 기준으로 필요한 Agent Skill을 찾아보세요.
skills.sh API 기준방금 확인
Higgsfield를 통해 마켓플레이스 제품 이미지 카드를 생성합니다: 규정을 준수하는 메인 이미지, 보조 제품 이미지 및 A+ 스타일 콘텐츠 모듈. 사용자가 마켓플레이스 리스팅 이미지, 제품 상세 정보 카드, 보조 제품 이미지, 제품 인포그래픽, 라이프스타일 리스팅 사진, A+ 스타일 콘텐츠, 마켓플레이스 이미지 세트 또는 판매용 제품 시각 자료를 요청할 때 사용합니다. 백엔드에서 마켓플레이스 규정 준수 기준 및 프롬프트 템플릿을 관리하며, 이 스킬은 사용자의 의도를 CLI로 전달하는 역할만 수행합니다. 마켓플레이스/리스트 관련 맥락이 없는 일반 브랜드 제품 사진 촬영 (higgsfield-product-photoshoot 사용), 동영상 생성 또는 UGC 광고( higgsfield-generate 사용), Soul Character 훈련(higgsfield-soul-id 사용)에는 사용하지 마십시오.
정렬된 10초 단위 블록(블록당 내레이터 1명, 범용 스타일 키 1개, 시드 오디오 테이크 1개, 제미니 옴니 클립 1개)을 사용하여 사진처럼 사실적이지 않은 완전한 해설형 설명 영상이나 스토리 영상을 제작한 후, explainer_video를 통해 서버 측에서 조립합니다. 다음과 같은 경우에 사용하세요: "설명 영상 만들기", "이 내용을 영상으로 설명해 주세요", "이 주제나 문서를 내레이션이 포함된 영상으로 변환해 주세요", "이 이야기를 애니메이션 영상으로 만들어 주세요", "얼굴이 나오지 않는 내레이션 영상을 만들어 주세요" 또는 "설명 영상 스타일을 보여주세요". 라이브 CMS 프리셋, 사용자 지정 스타일 참조, 마스코트/얼굴 없는 모드, 두 가지 화면 비율, 선택적 고정 자막을 지원합니다. 다음 용도로는 사용하지 마십시오: 포토리얼리스틱 영화, 광고/UGC, 토킹 헤드, 팟캐스트, 모션 타이포그래피 릴, 나레이션이 없는 일회성 클립, 또는 완성된 동영상 편집.
Higgsfield CLI(`higgsfield website …`)를 통해 풀스택 웹사이트, 앱 및 게임을 구축, 편집 및 배포할 수 있습니다. 각각은 하나의 Cloudflare Worker(D1/R2/KV/DO/Containers) 내에서 실행되는 React 19 + TanStack Start SSR 앱입니다. 생성 시 `--type` 옵션을 통해 선택할 수 있는 세 가지 제품 유형: `website` (독립형, Higgsfield 미통합 — references/website-flow.md), `app` (Higgsfield + fnf SDK, Quanta를 통한 로그인 — references/app-flow.md), `game` (실시간 멀티플레이어 룸 — references/game-flow.md). 각 유형은 적절한 워크플로로 연결되며, 각각 고유한 규칙과 배포/게시 게이트를 따릅니다. 사용 시나리오: “웹사이트를 만들어 주세요”, “랜딩 페이지를 만들어 주세요”, “웹 앱을 만들어 주세요”, “SaaS 대시보드/포트폴리오를 구축해 주세요”, “게임을 만들어 주세요”, “이 사이트를 배포해 주세요”, “게시해 주세요”. 또한 게임 아트(GAME ART)도 포함: “스프라이트 시트 만들기”, “타일링 가능한 텍스처”, “3D 캐릭터 애니메이션”, 게임 음악/SFX — game-* 참조 문서를 참조하세요. 다음 용도로는 사용하지 마세요: 단일 이미지/동영상/오디오 생성 (higgsfield-generate), 제품 사진 (higgsfield-product-photoshoot), 마켓플레이스 카드 (higgsfield-marketplace-cards).
Higgsfield CLI를 통해 클릭률이 높은 YouTube 썸네일과 세로형 동영상 커버를 제작하세요. 사실에 기반한 정보 격차 콘셉트를 구축하고, 최대 3개의 참조 ID를 유지하며, 로고와 제어된 변형 버전을 지원하고, Nano Banana Pro로 메인 이미지를 렌더링하며, Seedream의 집중적인 편집 기능을 적용합니다. 사용 시점: "유튜브 썸네일 만들기", "이 동영상의 썸네일", "MrBeast 스타일 커버", "Shorts 커버" 또는 "인스타그램 동영상 커버". 동영상의 정확한 주제와 시각적 방향이 확정된 후, 어떤 동영상 워크플로우 뒤에도 연동하여 사용하세요. 동영상 자체 제작(higgsfield-generate 사용), 제품 카탈로그 사진(higgsfield-product-photoshoot 사용) 또는 마켓플레이스 카드(higgsfield-marketplace-cards 사용) 제작에는 사용하지 마세요.
기존의 토킹 헤드/인터뷰/팟캐스트 영상에, 대본과 동기화된 시간 설정이 적용된 디자인된 그래픽 오버레이 카드(키네틱 타이틀, 로어서드, 데이터 콜아웃, 인용문, 사이드 패널, PIP 등)를 16:9 / 9:16 / 4:5 비율의 캔버스 중 원하는 비율을 선택하여 편집해 주세요. 클립 본체는 수정 없이 배경에서 재생됩니다. 검색어: "그래픽 오버레이", "온스크린 그래픽", "동영상 꾸미기/편집". 단순한 자막(/임베디드 캡션)은 제외해 주세요. 불명확한 경우 → /하이퍼프레임.
에밀 코왈스키의 디자인 엔지니어링 철학에서 도출된 높은 수준의 기술적 기준에 따라 애니메이션 및 모션 코드를 검토합니다. 기본적으로 ‘기각’ 처리되며, ‘승인’은 이를 충족해야만 얻을 수 있습니다.
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
웹 애니메이션이나 모션 효과에 대한 모호한 설명을 정확한 용어로 바꿔주는 역조회 용어집입니다(“팝오버가 열릴 때 튀어 오르는 효과” → Pop in; “iOS의 고무줄 스크롤” → Rubber-banding). 사용자가 "~할 때 이걸 뭐라고 부르나요?"라고 묻거나, 모션 효과의 이름을 모르면서 이를 설명하며 AI나 디자이너에게 전달할 적절한 용어를 찾고자 할 때 사용합니다. 효과의 이름을 짓는 용도로만 사용되며, 효과를 디자인하거나 제작하는 용도는 아닙니다.
수석 모션 어드바이저로서 코드베이스의 애니메이션 및 모션 코드를 검토한 후, 우선순위가 지정된 감사 보고서와 다른 에이전트(또는 비용이 더 저렴한 모델)가 실행할 수 있는 독립적인 구현 계획을 작성합니다. 소스 코드에 대한 읽기 전용 권한 — 개선 사항을 계획할 뿐, 직접 적용하지는 않습니다. 사용자가 “애니메이션을 개선해 주세요”, “모션을 검토해 주세요”, “이 앱의 사용감을 더 좋게 만들어 주세요”라고 요청하거나, 단일 diff 검토보다는 애니메이션 수정 로드맵을 원할 때 사용하십시오.
애니메이션을 처음부터 직접 제작하며, ‘애니메이션을 적용해야 할지’, ‘어떤 목적으로’, ‘어떤 도구를 사용할지’, ‘어떤 속성을 적용할지’, ‘어떤 곡선과 지속 시간을 사용할지’, ‘어떻게 중단될지’, ‘어떻게 종료될지’ 등, 애니메이션이 자연스럽게 느껴지는지 여부를 결정하는 순서대로 판단을 내립니다. 구현 코드를 작성합니다. 무언가에 애니메이션을 적용하거나, 움직임을 더하거나, 컴포넌트에 생동감을 불어넣거나, 전환 효과를 구현해야 할 때 이 방법을 사용하세요. 기존 모션에 대한 비평을 하려면 review-animations를, 전체 코드베이스를 검토하려면 improve-animations를 사용하세요.
코드베이스나 UI를 검색하여 애니메이션이 적용되어야 하는데 적용되지 않은 부분을 찾아내고, 불필요한 애니메이션은 모두 제거하십시오. 읽기 전용; 정확한 값을 사용하여 동작을 제안할 뿐, 실제로 구현하지는 않습니다. 사용자가 “여기 어디를 애니메이션으로 만들 수 있을까?”라고 묻거나 “이 부분을 더 생동감 있게 만들고 싶다”고 할 때 사용하세요. 기존 애니메이션을 수정하려면 대신 improve-animations 또는 review-animations를 사용하세요.
Browser automation for AI agents via inference.sh. Navigate web pages, interact with elements using @e refs, take screenshots, record video. Capabilities: web scraping, form filling, clicking, typing, drag-drop, file upload, JavaScript execution. Use for: web automation, data extraction, testing, agent browsing, research. Triggers: browser, web automation, scrape, navigate, click, fill form, screenshot, browse web, playwright, headless browser, web agent, surf internet, record video
Supabase에서 관리하는 Postgres 모범 사례로, 어디서나 실행되는 Postgres에 적용됩니다. Postgres 데이터베이스에 저장될 내용을 작성하거나 변경하기 전에(테이블 및 열 생성 또는 수정(열 유형 선택 포함), 스키마 설계, 마이그레이션 및 선언적 스키마 파일, RLS 정책 및 이를 검증하는 테스트, 인덱스, 트리거, 데이터베이스 함수, 큐 및 예약된 작업(pg_cron, pgmq), 벡터/시맨틱 검색(pgvector), 덤프 복원(pg_restore) 또는 데이터 가져오기 등입니다. 또한 느린 쿼리, 높은 CPU 사용량, 타임아웃, EXPLAIN 계획, 연결 소진, 잠금, 데이터 부풀림, 또는 잘못된 사용자나 테넌트에게 노출된 행을 진단할 때도 이 스킬을 적용하십시오. 이 문서는 단순한 성능 가이드가 아닙니다. 스키마, 마이그레이션, 보안, SQL 작성 작업에도 이러한 규칙이 필요하며, 이는 단 한 개의 열을 변경하거나 단일 쿼리를 작성할 때조차 마찬가지입니다.
사용자가 프론트엔드 인터페이스를 디자인, 재설계, 구성, 비평, 검토, 다듬기, 명확화, 정제, 강화, 최적화, 적용, 애니메이션 적용, 색상 적용, 추출하거나 그 밖의 방식으로 개선하고자 할 때 사용합니다. 웹사이트, 랜딩 페이지, 대시보드, 제품 UI, 앱 셸, 컴포넌트, 양식, 설정, 온보딩 및 빈 상태를 다룹니다. UX 검토, 시각적 계층 구조, 정보 아키텍처, 인지 부하, 접근성, 성능, 반응형 동작, 테마, 안티패턴, 타이포그래피, 폰트, 간격, 레이아웃, 정렬, 색상, 모션, 마이크로 인터랙션, UX 카피, 오류 상태, 에지 케이스, i18n, 재사용 가능한 디자인 시스템 또는 토큰을 다룹니다. 또한, 더 대담하거나 매력적인 디자인으로 개선이 필요한 단조로운 디자인, 좀 더 차분해져야 하는 과한 디자인, UI 요소에 대한 실시간 브라우저 반복 작업, 또는 기술적으로 탁월한 느낌을 주어야 하는 야심 찬 시각 효과 작업에도 활용하세요. 백엔드 전용 작업이나 UI와 무관한 작업에는 적합하지 않습니다.
모든 Remotion 스킬용 라우터
기존 Remotion(React) 컴포지션의 소스 코드를 HyperFrames HTML로 이식합니다. Remotion 소스 코드의 이식/변환/마이그레이션/번역을 명시적으로 요청받은 경우에만 사용하십시오 — 단방향이며, Remotion 전용입니다. Remotion에 대한 단순한 언급, 참조용 코드, 또는 “제 Remotion 동영상과 비슷한 것을 만들어 주세요”와 같은 요청은 새 빌드(/general-video)에 해당합니다. 불분명한 경우 → /hyperframes.
음악 트랙(오디오 파일, 오디오를 추출할 동영상, 또는 무드 브리프에서 생성된 트랙)을 비트와 동기화된 동영상(가사 영상, 슬라이드쇼, 키네틱 프로모션 등)으로 변환하세요. 음악이 모든 진행 속도를 주도하며, 사용자가 제공하는 모든 이미지/동영상은 동일한 비트 그리드에 맞춰 편집되며, 완성된 영상을 제작하는 데 별도의 자료가 전혀 필요하지 않습니다. 나레이션이 포함된 영상 → 입력 자료에 맞춰진 워크플로우(/hyperframes 참조). 불분명한 경우 → /hyperframes.
shadcn 컴포넌트 및 프로젝트를 관리합니다. 채팅 인터페이스를 포함한 UI의 추가, 검색, 수정, 디버깅, 스타일링 및 조합을 수행합니다. 프로젝트 컨텍스트, 컴포넌트 문서 및 사용 예제를 제공합니다. shadcn/ui, 컴포넌트 레지스트리, 프리셋, --preset 코드 또는 components.json 파일이 포함된 모든 프로젝트를 다룰 때 적용됩니다. 또한 "shadcn init", "--preset을 사용하여 앱 생성" 또는 "--preset으로 전환" 시에도 트리거됩니다.
엄선되고 명확한 기준이 반영된 목록에서 주어진 프론트엔드 작업에 적합한 라이브러리를 선택하세요. 숫자, OTP 입력, 차트, 명령 메뉴, 가상화, 드래그 앤 드롭, 토스트, 상태 관리, 스타일링 등 다양한 항목이 포함되어 있습니다. 명시적으로 호출될 때만 실행되며, 스스로 트리거되지는 않습니다.
설명한 UI 요소에 대해 서로 확연히 다른 여러 버전을 제작하고, 이를 시각적 선택기 뒤에 표시하여 실시간으로 직접 확인하며 가장 적합하다고 느껴지는 버전을 선택하세요. 이 기능은 명시적으로 호출할 때만 실행되며, 자동으로 실행되지는 않습니다.