Web

videodb는 로컬 파일, URL, RTSP/RTMP 라이브 피드, 데스크톱 캡처에서 비디오와 오디오를 수집하고, 타임스탬프가 있는 순간을 검색해 재생 가능한 증거로 확인하며, 클립, 오버레이, 전사, 알림, 타임라인 편집으로 바로 활용할 수 있도록 돕습니다. VideoDB for Video Editing과 라이브 스트림 분석을 위한 실용적인 videodb 가이드입니다.

ui-demo는 Playwright, 보이는 커서 이동, 자연스러운 템포를 활용해 세련된 웹 앱 데모 영상을 녹화하는 데 도움을 줍니다. 워크스루, 온보딩 클립, 기능 소개, 튜토리얼형 녹화에 ui-demo 스킬을 사용하세요. 안정적인 결과를 위해 discover, rehearse, record 순서의 워크플로를 따르세요. 특히 프로토타입이나 빠르게 변하는 UI에서 유용합니다.

seo 스킬은 기술 SEO, 온페이지 최적화, 구조화 데이터, Core Web Vitals, 키워드 매핑을 점검하고 계획하며 구현하는 데 도움이 됩니다. 크롤링 가능성, 인덱싱 가능성, 메타데이터, 스키마, 내부 링크, 사이트맵 및 robots 변경 사항이 필요할 때, 또는 Keyword Research용 seo가 필요할 때 사용하면 페이지별로 바로 실행할 수 있는 구체적인 가이드를 제공합니다.

search-first는 직접 코드를 작성하기 전에 기존 도구, 라이브러리, 패턴을 먼저 찾아보는 연구 우선 워크플로우입니다. 이 스킬을 사용해 선택지를 평가하고, 트레이드오프를 비교한 뒤, 추측을 줄이면서 도입, 확장, 커스텀 구현 중 무엇이 적합한지 결정할 수 있습니다.

perl-security는 더 안전한 입력 처리, taint mode, 셸 실행, DBI 플레이스홀더, 그리고 XSS, SQLi, CSRF 같은 웹 보안 이슈를 중심으로 Perl 코드를 검토하는 데 도움을 줍니다. 사용자 제어 데이터가 민감한 sink에 도달하는 Security Audit 작업, 개선 계획 수립, 보안 개발에 이 perl-security 스킬을 사용하세요.

nextjs-turbopack 스킬은 Next.js 16+에서 Turbopack을 활용해 로컬 개발 속도, HMR, 번들러 선택 기준을 더 잘 잡도록 돕습니다. Frontend Development 워크플로에서 설치, 사용법, 그리고 webpack으로 되돌아가야 하는 시점을 실전형 nextjs-turbopack 가이드로 확인하세요.

frontend-design을 사용해 뚜렷한 시각적 방향성을 가진, 프로덕션 수준의 프론트엔드 인터페이스를 만드세요. 이 frontend-design 스킬은 랜딩 페이지, 대시보드, 앱 셸, 컴포넌트처럼 구현만큼 계층, 타이포그래피, 모션, 완성도가 중요한 작업에 맞춰져 있습니다. 디자인 우선 UI 작업을 위한 설치 및 사용 가이드도 포함합니다.

exa-search는 최신 웹 기반 리서치, 코드 예시, 기업 정보, 인물 조회, 빠른 출처 탐색을 위한 Exa MCP 스킬입니다. 최신성과 근거가 중요한 경우, 그리고 실시간 검색, 도구 기반 답변, 웹 리서치 워크플로를 위한 실용적인 exa-search 가이드가 필요할 때 사용하세요.

deep-research 스킬은 폭넓은 질문을 firecrawl과 exa MCP 도구를 활용한 근거 기반 웹 리서치로 바꿔 줍니다. 출처를 비교하고, 결과를 종합하고, 인용이 포함된 보고서를 만들어 경쟁사 분석, 기술 평가, 실사, 그리고 증거가 필요한 다른 의사결정에 활용할 수 있습니다.

canary-watch는 릴리스, 병합, 의존성 업데이트 이후 스테이징 또는 프로덕션의 라이브 URL에서 회귀를 점검하는 배포 후 모니터링 스킬입니다.

accessibility 스킬은 Web, iOS, Android에서 WCAG 2.2 AA 수준에 맞는 접근 가능한 UI를 설계, 구현, 감사할 수 있도록 돕습니다. 컴포넌트의 역할, 레이블, 상태, 포커스 동작, 접근성 특성을 매핑하는 데 활용할 수 있으며, UX Audit 작업과 구현 검토에 바로 쓸 수 있는 실무형 접근성 가이드를 제공합니다.

qa-only는 웹 앱을 테스트하고, 버그를 문서화하며, 수정 없이 증거를 수집하는 보고 전용 QA 스킬입니다. 체계적인 버그 리포트, 상태 점수화, 스크린샷, 재현 단계를 필요로 하는 QA 리뷰어와 에이전트를 위해 설계되었습니다. 테스트-수정-검증 방식이 아니라 버그 리포트 워크플로가 필요할 때 qa-only를 사용하세요.

design-consultation은 대략적인 제품 아이디어를 완성도 있는 디자인 방향으로 정리하는 design-consultation 스킬입니다. DESIGN.md를 단일 기준 문서로 만들고, 미리보기와 함께 타이포그래피, 색상, 간격, 레이아웃, 모션에 대한 시스템 수준의 가이드를 제공합니다. 새 제품이나 일관된 출발점이 필요한 UI 영역에 특히 적합합니다.

source-driven-development 스킬은 공식 문서를 기준점으로 삼아 프레임워크별 코드를 작성하도록 도와주며, 구현 전에 패턴을 먼저 검증할 수 있게 해줍니다. 정확성, 출처 근거, 버전별 판단이 중요한 React, Vue, Next.js, Svelte, Angular 같은 스택에서 source-driven-development 활용에 특히 적합합니다.

performance-optimization 스킬은 먼저 측정하고, 실제 병목을 찾아 수정한 뒤, 결과를 검증하도록 돕습니다. 성능 요구사항이 있거나 회귀가 의심될 때, 또는 Core Web Vitals, 로딩 시간, 상호작용 지연 개선이 필요할 때 사용하세요.

aspnet-core 스킬은 최신 프레임워크 가이드를 바탕으로 ASP.NET Core 앱을 빌드, 검토, 리팩터링, 업그레이드할 수 있게 도와줍니다. 백엔드 개발, API, 서버 렌더링 앱, Blazor, SignalR, gRPC, 호스티드 서비스에 맞춰 설계되었으며, 앱 모델 선택, Program.cs 설정, DI, 구성, 보안, 테스트, 배포에 대해 먼저 판단할 수 있는 가이드를 제공합니다.

shader-dev는 ShaderToy 스타일의 실시간 비주얼을 위한 실용적인 GLSL 셰이더 스킬입니다. 이 shader-dev 스킬을 사용하면 레이 마칭, SDF 장면, 조명, 파티클, 유체 모션, 후처리, UI 디자인용 shader-dev까지 일반적인 프롬프트보다 훨씬 적은 시행착오로 만들거나 디버깅할 수 있습니다.

transformers-js를 사용해 브라우저와 서버 런타임 전반에서 JavaScript와 TypeScript로 ML 모델을 실행하세요. transformers-js 스킬은 설치, 모델 로딩, 캐싱, 설정, 그리고 텍스트·비전·오디오·멀티모달 작업에서의 실용적인 transformers-js 활용법을 다루며, 지원되는 텍스트 생성 모델로 Code Generation에 사용하는 방법도 포함합니다.

huggingface-gradio는 Python에서 Gradio 웹 UI를 만들고 수정할 수 있게 도와주며, 데모, 챗봇, 프런트엔드 개발 워크플로에 특히 유용합니다. huggingface-gradio 스킬을 사용하면 컴포넌트를 고르고, 이벤트를 연결하고, 레이아웃을 잡는 과정을 덜 막연하게 진행할 수 있습니다.

seo-drift는 SEO에 중요한 페이지 요소를 시간에 따라 추적하고, 기준값과 비교하며, 배포 후나 CMS 편집, 템플릿 변경 뒤에 발생한 회귀를 잡아내는 GitHub 스킬입니다. SEO 콘텐츠 점검, 기술적 온페이지 확인, 그리고 무엇이 깨졌는지 명확한 답이 필요할 때 실용적인 seo-drift 활용을 위해 사용하세요.

seo-cluster는 SEO 콘텐츠 기획을 위한 SERP 중복 기반 키워드 클러스터링 skill입니다. Google의 실제 순위를 기준으로 키워드를 묶어 피라미드형 피지컬 페이지, 허브-스포크 클러스터, 내부 링크 맵을 구성합니다. 토픽 아키텍처를 위한 실용적인 seo-cluster 가이드가 필요할 때 사용하세요. 단순한 키워드 브레인스토밍용은 아닙니다.

read 스킬은 URL과 PDF를 읽기, 인용, 출처 표기, 후속 작업에 바로 쓸 수 있는 깔끔한 Markdown으로 가져옵니다. 유료 구독 벽이 있는 페이지, JS 의존도가 높은 사이트, X/Twitter, GitHub 파일, 중국계 플랫폼, 그리고 분석 전에 신뢰할 수 있는 원문이 필요한 Workflow Automation 흐름에 맞게 설계되었습니다. 해설이 아니라 원문 수집이 필요할 때 read 가이드를 사용하세요.

enhance-prompt 스킬은 모호한 UI 아이디어를 더 명확하고 Stitch에 바로 쓸 수 있는 프롬프트로 바꿔 줍니다. 구조를 더 탄탄하게 다듬고, UI/UX 용어를 보강하며, 디자인 시스템 맥락까지 반영할 수 있게 해 줍니다. 이 enhance-prompt 가이드를 활용하면 프롬프트의 구체성을 높이고, 추측에 의존하는 부분을 줄이며, 프롬프트 작성과 UI 생성 결과를 더 일관되게 만들 수 있습니다.

guizang-ppt-skill은 에디토리얼 매거진 × e-ink 스타일의 단일 HTML 슬라이드 덱을 만드는 프레젠테이션 스킬입니다. 출시, 발표, 데모용으로 강한 타이포그래피, WebGL 배경, 재사용 가능한 레이아웃을 갖춘 가로 스와이프 덱을 손쉽게 만들 수 있습니다. guizang-ppt-skill 가이드를 활용하면 더 빠르고 반복 가능한 덱 생성이 가능합니다.