8808c672dc
웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포. 스킬 (packages/skill) - SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로 본문은 절차와 인덱스만, 지식은 references/ 로 분리 - 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기 - 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외 - 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙, SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침 설치 CLI (packages/cli, packages/core) - npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md - 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다 - 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성 - AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입 - Windsurf 는 12,000자 상한 초과 시 설치를 차단 배포 (build/ci, .forgejo/workflows) - 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러 → draft 릴리스 → Cloudflare Pages. 재실행 멱등 근거 (research/) - 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다 테스트 22개 통과 (core 16 · cli 6)
4.2 KiB
Awesome HTML-in-Canvas
This is a collection of resources to help developers build with HTML-in-Canvas.
Check out the HTML-in-canvas deployed at chrome.dev or view the source code here.
HTML-in-Canvas demos by the ecosystem
This is a curated list of links to awesome HTML-in-canvas demos created by the ecosystem. Note that the demos featured here are contributed by third-party developers and are not created or maintained by Google. Read the contribution guidelines to suggest another demo.
| Demo | Description | Author | Source code |
|---|---|---|---|
| Duck Hunt TODO | A form that's also a shooting game | Wes Bos | Source |
| Wobble Buttons | Interactive ripple-effect buttons | Wes Bos | Source |
| Compiz Web | Shader-driven web page transitions demo | Max Leiter | Source |
| HTML cloth | Customize a form on a hanging cloth inside a game | Thomas Richter-Trummer | Source |
| PixiJS HTML Laser | Interactive landing page that shatters and heals over time | Zyie | Source |
| Quest Signal | A playable Godot scene with accessible, interactive DOM panels rendered as world-space WebGL textures | Vav Labs | Source |
| More | demos | coming | soon... |
Framework Support
This is a list of frameworks that have added support for HTML-in-Canvas along with the documentation
| Framework | Description | Documentation | Sample Code |
|---|---|---|---|
| Three.js | JavaScript library used to create and display animated 3D computer graphics with WebGL & WebGPU | HTMLTexture | Sample |
| PlayCanvas | Open source engine and tools for building amazing 3D experiences | html-texture | Sample |
| PixiJS | Fast, lightweight 2D rendering library for WebGL & WebGPU | HTMLSource | Sample |
| Babylon.js | Babylon.js: Powerful, Beautiful, Simple, Open 3D engine for the web | HTML Texture | Sample |
| CanvasUI | An open source library of tasteful html-in-canvas & WebGL components. | Introduction | Sample |
Disclaimer
Important note on external content: The demos linked in the HTML-in-Canvas demos by the ecosystem section are created by third-party developers and are not created, maintained, or supported by Google. Please be aware of the following:
- No endorsement: Inclusion of these links does not constitute an endorsement or recommendation by Google.
- Subject to change: Content, functionality, and availability are at the sole discretion of the third-party owners and may change or be removed without notice.
- No liability: Google assumes no responsibility or liability for the accuracy, legality, or performance of these demos.