메뉴
Google Labs stitch-skills integration for design systems, React components, multi-page websites, prompt enhancement, walkthrough videos, and shadcn/ui. "stitch", "stitch-skills", "design system", "react components", "stitch-loop", "enhance-prompt", "shadcn" 키워드에 반응.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Bidirectional Notion sync for project management data via Notion MCP. Sync tasks, documents, sprints, gates, and activity logs. "notion", "노션", "동기화", "sync", "notion push", "notion pull", "notion status" 키워드에 반응.
Office document automation -- PPTX presentations, DOCX documents, XLSX spreadsheets, PDF reports. "office", "pptx", "docx", "xlsx", "pdf", "프레젠테이션", "presentation", "보고서", "report", "엑셀", "워드" 키워드에 반응.
Programmatic video generation with React using Remotion. JSX/CSS compositions rendered to MP4. "remotion", "video", "비디오", "MP4", "animation", "워크스루", "demo video", "영상" 키워드에 반응.
Synchronize all agile development artifacts in one command. Updates CHANGELOG, README stats, progress tracking, and validates documentation completeness.
Claude Code와 Codex CLI의 토큰 사용량 및 비용 리포트를 조회하는 스킬. "ccusage", "토큰 사용량", "usage report", "codex usage", "claude usage", "비용 리포트", "token usage", "cost report" 키워드에 반응.
AI가 만든 모든 코드 변경사항을 reviews 폴더에 기록하고 간단한 HTML 뷰어로 웹 브라우저에서 실시간 확인할 수 있습니다. 매 수정마다 문서가 생성되고 Python 서버로 즉시 확인 가능합니다.
| name | stitch-skills |
| description | Google Labs stitch-skills integration for design systems, React components, multi-page websites, prompt enhancement, walkthrough videos, and shadcn/ui. "stitch", "stitch-skills", "design system", "react components", "stitch-loop", "enhance-prompt", "shadcn" 키워드에 반응. |
Google Labs의 stitch-skills 패키지를 통한 디자인 시스템 생성, React 컴포넌트 변환, 멀티페이지 사이트 빌드.
# List available skills
npx skills add google-labs-code/stitch-skills --list
# Install individual sub-skills
npx skills add google-labs-code/stitch-skills --skill design-md --global
npx skills add google-labs-code/stitch-skills --skill react-components --global
npx skills add google-labs-code/stitch-skills --skill stitch-loop --global
npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global
npx skills add google-labs-code/stitch-skills --skill remotion --global
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global
npx skills list | grep stitch
If not installed, inform the user and provide installation commands above.
| Sub-skill | Purpose | Pipeline Phase |
|---|---|---|
design-md | 프로젝트 분석 → DESIGN.md 디자인 시스템 문서 생성 | Phase 2 (design) |
react-components | 디자인 스크린 → React 컴포넌트 시스템 변환 + 검증 | Phase 3 (build) |
stitch-loop | 단일 프롬프트 → 멀티페이지 웹사이트 빌드 | Phase 3 (build) |
enhance-prompt | UI 아이디어 → 프레임워크 최적화 프롬프트로 변환 | Phase 2 입력, Phase 4 |
remotion | 디자인 프로젝트 → 워크스루 비디오 생성 | Phase 3-4 (visuals) |
shadcn-ui | shadcn/ui 컴포넌트 통합 가이드 | Phase 3 (build) |
enhance-prompt: 디자인 프롬프트 최적화
enhance-prompt로 디자인 생성 프롬프트 정제design-md: 디자인 시스템 문서화
design-md로 DESIGN.md 생성 (디자인 토큰, 컴포넌트 스펙)react-components: React 기반 템플릿 사용 시
stitch-loop: 멀티페이지 사이트 빠른 빌드
shadcn-ui: shadcn/ui 컴포넌트 사용 시
remotion (sub-skill): 사이트 워크스루 비디오
stitch-skills 미설치 시:
| Skill | Relationship |
|---|---|
remotion (standalone) | 고급 커스텀 비디오 — stitch/remotion은 간단 워크스루용 |
gemini | 디자인 생성 — stitch enhance-prompt로 프롬프트 정제 가능 |
codex | 코드 검증 — stitch 생성 컴포넌트를 codex로 검증 |
.claude/settings.json > external_skills.stitch_skills