Browser Automation

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

nuxt4-patterns는 Nuxt 4에서 하이드레이션 안전성, route rules, 지연 로딩, SSR 안전 데이터 패칭을 다루는 스킬입니다. 이 nuxt4-patterns 스킬을 사용해 Frontend Development 의사결정을 더 잘 내리고, 불일치를 줄이며, 각 페이지나 컴포넌트에 맞는 패턴을 적용하세요.

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

benchmark 스킬을 사용하면 성능 기준선을 측정하고, PR 전후의 성능 회귀를 사전에 감지하며, 페이지·API·빌드 전반에서 스택 대안을 비교해 Performance Optimization에 활용할 수 있습니다.

benchmark 스킬은 웹 및 앱 워크플로에서 성능 저하를 감지하는 데 도움이 됩니다. 기준선을 설정하고, 변경 전후를 비교하며, PR로 인해 페이지가 더 느려졌는지, 더 무거워졌는지, 또는 안정성이 떨어졌는지 추적하는 데 활용하세요. 성능 최적화, Core Web Vitals, Lighthouse 점검, 번들 크기, 로드 시간 추세를 살펴보는 실용적인 벤치마크 가이드입니다.

canary는 배포 후 모니터링 스킬로, 실제 서비스 중인 앱에서 콘솔 오류, 페이지 실패, 성능 저하를 감시합니다. 배포 전 기준값과 현재 동작을 비교해 릴리스를 검증하고, 깨진 페이지를 빠르게 잡아내며, 일반적인 프롬프트보다 적은 추측으로 눈에 보이는 이상 징후를 포착할 수 있습니다.

qa 스킬은 웹 앱을 체계적으로 테스트하고, 버그를 찾아내며, 단계별 워크플로로 수정 사항을 검증합니다. 회귀 테스트, 출시 준비 점검, 또는 일반적인 버그 탐색 프롬프트 대신 증거, 심각도 등급, 그리고 수정-재검증의 원자적 루프가 필요한 구조화된 QA 가이드가 필요할 때 사용하세요.

browser-use Python 라이브러리 문서를 빠르게 찾아보는 스킬입니다. open-source 스킬은 설치와 설정, Agent 및 Browser 코드, 모델 환경 변수, 도구, MCP 연동, 모니터링, 그리고 레거시 Actor API 관련 안내까지 폭넓게 다룹니다.

gstack은 QA 테스트, dogfooding, 릴리스 점검, 버그 캡처를 위한 브라우저 기반 AI 스킬입니다. 실제 페이지를 열고 UI를 직접 클릭하며 상태를 검증하고, 전후 비교와 반응형 레이아웃 테스트를 수행하며, 스크린샷 증거까지 남깁니다. 특히 신뢰할 수 있는 브라우저 결과가 필요할 때 UI 디자인 검토와 배포 검증에 유용하며, gstack 스킬로 실측 가능한 확인이 필요할 때 잘 맞습니다.

diagnose는 잡기 어려운 버그, 불안정한 테스트, 성능 회귀를 위한 구조화된 디버깅 워크플로입니다. 문제를 재현하고, 실패하는 케이스를 최소화하고, 한 번에 하나씩 가설을 세우고, 계측을 추가하고, 근본 원인을 수정한 뒤, 회귀 테스트로 고정할 수 있도록 돕습니다. “디버그해줘”만으로는 부족할 때 diagnose 가이드를 사용하세요.

critique는 구조화된 점수화, 페르소나 기반 테스트, 휴리스틱 점검, 실행 가능한 피드백을 통해 UX 관점에서 인터페이스, 기능, 페이지, 컴포넌트를 검토하도록 돕습니다. UI/UX 디자인을 위해 반복해서 쓸 수 있는 critique 가이드가 필요할 때 사용하세요. 막연한 의견이 아니라, 특정 영역을 명확한 맥락과 함께 집중적으로 점검하는 데 가장 적합합니다.

figma-create-new-file는 drafts에 새 Figma Design 파일 또는 FigJam 보드를 빈 상태로 생성합니다. use_figma를 포함한 더 깊은 Figma 작업을 시작하기 전, 새 출발점이 필요할 때 사용하세요. design 또는 figjam을 지원하며, 선택적으로 파일 이름을 지정할 수 있고, 필요할 경우 whoami로 plan access를 확인해 해결할 수 있습니다.

baoyu-post-to-wechat는 WeChat Official Account에 글과 이미지-텍스트 게시물을 발행할 수 있는 스킬입니다. 브라우저 방식과 API 방식을 모두 지원하며, Markdown, HTML, 일반 텍스트 입력을 처리할 수 있습니다. 또한 frontmatter 기반 제목·요약 추출, Markdown-to-WeChat 변환, 이미지 처리, Chrome 프로필 자동화를 위한 환경 점검 기능도 제공합니다.

baoyu-post-to-weibo는 실제 Chrome 세션을 통해 에이전트가 Weibo 게시물과 헤드라인 아티클을 발행할 수 있게 해주는 스킬입니다. 텍스트, 이미지, 비디오, Markdown-to-HTML 변환, 클립보드 붙여넣기 헬퍼를 지원하며, bun 또는 npx 기반 실행으로 보다 안정적인 게시 워크플로를 제공합니다.

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

seo-dataforseo는 DataForSEO MCP 서버를 통해 Claude를 실시간 SEO 데이터와 연결합니다. SERP 확인, 키워드 리서치, 백링크, 온페이지 분석, 경쟁사 조사, 비즈니스 등록정보, AI 가시성 추적까지 지원합니다. 실제 검색 근거가 필요하고, 명확한 설치 안내와 실용적인 seo-dataforseo 사용법이 중요한 데이터 기반 워크플로에 가장 적합합니다.

seo-audit는 병렬 서브에이전트 위임을 활용해 최대 500페이지까지 크롤링하고 비즈니스 유형까지 감지하는 전체 웹사이트 SEO 감사 스킬입니다. 기술, 콘텐츠, 스키마, 성능, 시각, 로컬, 지역 신호를 모두 점검한 뒤, 사이트 전체 검토와 SEO 콘텐츠 분석에 바로 쓸 수 있는 건강 점수와 우선순위가 매겨진 수정 항목을 반환합니다.

analyzing-browser-forensics-with-hindsight는 Hindsight를 사용해 Digital Forensics 팀이 Chromium 브라우저 아티팩트를 분석하도록 돕습니다. 기록, 다운로드, 쿠키, 자동 완성, 북마크, 저장된 자격 증명 메타데이터, 캐시, 확장 프로그램까지 함께 살펴볼 수 있습니다. 웹 활동을 복원하고, 타임라인을 검토하고, Chrome, Edge, Brave, Opera 프로필을 조사할 때 유용합니다.

website-to-hyperframes는 기존 웹사이트를 HyperFrames 영상으로 전환하는 워크플로 스킬입니다. URL만 있으면 사이트의 실제 디자인, 카피, 에셋을 바탕으로 제품 투어, 프로모션, 소셜 광고, 설명 영상을 만들 때 사용하세요. 이 repo는 Design Implementation 작업을 위해 캡처, 디자인, 스크립트, 스토리보드, VO, 빌드, 검증까지 지원합니다.

wp-playground 스킬은 플러그인과 테마 테스트, 버전 전환, blueprint, snapshot, 그리고 분리된 디버깅을 위해 일회용이고 재현 가능한 WordPress Playground 환경을 만드는 데 도움을 줍니다. `@wp-playground/cli`를 통해 브라우저 또는 CLI 워크플로를 지원하며, 백엔드 개발, QA, 통제된 이슈 재현에 특히 유용합니다.

web-perf는 Chrome DevTools MCP로 웹 성능을 분석합니다. Core Web Vitals, trace 기반 로드 문제, 렌더링 차단 리소스, 레이아웃 시프트, 캐싱 문제, 접근성 격차를 측정합니다. 최신 문서와 실시간 trace에 기반한 성능 최적화, 느린 페이지 디버깅, web-perf 가이드 워크플로에 이 스킬을 사용하세요.

agents-sdk는 상태를 유지하는 대화, 내구성 있는 실행, WebSocket 또는 스트리밍 채팅, MCP 통합, 예약 작업, 브라우저 자동화를 갖춘 Cloudflare Workers 에이전트를 만드는 데 도움이 됩니다. 이 agents-sdk 스킬은 기존 Workers 앱이든 새 앱이든 설치 여부 판단, 설정, 실전 활용에 초점을 맞추며, Cloudflare 런타임 제약에 맞을 때만 멀티 에이전트 시스템을 다룹니다.

network skill을 사용해 mxGraph 장치 아이콘, 자동 레이아웃, 존 그룹화, 명확한 링크 의미를 갖춘 PlantUML 네트워크 토폴로지 다이어그램을 만들 수 있습니다. LAN, WAN, 엔터프라이즈, 데이터센터, 무선, 보안, 벤더별 다이어그램에 적합하며, network 사용 예시와 함께 network를 uml 또는 cloud 대신 언제 써야 하는지도 안내합니다.

slack-messaging skill를 사용해 Slack 메시지를 보내거나 읽고, 채널을 확인하고, Slack 통합을 테스트하며, `slackcli`로 명령줄에서 Slack 워크스페이스와 상호작용해 워크플로 자동화를 수행할 수 있습니다.