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)
87 lines
2.7 KiB
HTML
87 lines
2.7 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8" />
|
|
<title>Pie chart</title>
|
|
|
|
<style>
|
|
.pie {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
.pie .label {
|
|
text-align: center;
|
|
max-width: 40%;
|
|
font-family: sans-serif;
|
|
}
|
|
.pie .label .val {
|
|
display: block;
|
|
font-size: xx-large;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
<canvas layoutsubtree class="pie" role="list" aria-label="Pie Chart">
|
|
<div class="label" role="listitem" tabindex="0" data-val="0.45" data-color="tomato">
|
|
<span class="val">45%</span>Apple
|
|
</div>
|
|
<div class="label" role="listitem" tabindex="0" data-val="0.35" data-color="cornflowerblue">
|
|
<span class="val">35%</span>Blackberry / Bramble
|
|
</div>
|
|
<div class="label" role="listitem" tabindex="0" data-val="0.20" data-color="gold">
|
|
<span class="val">20%</span>Durian
|
|
</div>
|
|
</canvas>
|
|
|
|
<script>
|
|
const canvas = document.querySelector('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
canvas.onpaint = () => {
|
|
ctx.reset();
|
|
|
|
// 1. Center the coordinate system.
|
|
const radius = 0.95 * Math.min(canvas.width, canvas.height) / 2;
|
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
|
|
let angle = 0;
|
|
let focusedPath = null;
|
|
for (const label of canvas.children) {
|
|
const slice = Number(label.dataset.val) * Math.PI * 2;
|
|
|
|
// 2. Draw the wedge.
|
|
const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
|
|
grad.addColorStop(0, `color-mix(${label.dataset.color}, white 40%)`);
|
|
grad.addColorStop(1, label.dataset.color);
|
|
ctx.fillStyle = grad;
|
|
const path = new Path2D();
|
|
path.moveTo(0, 0);
|
|
path.arc(0, 0, radius, angle, angle + slice);
|
|
path.closePath();
|
|
ctx.fill(path);
|
|
if (document.activeElement === label)
|
|
focusedPath = path;
|
|
|
|
// 3. Draw the label element, and update its transform.
|
|
const mid = angle + slice / 2;
|
|
const label_width = label.offsetWidth * devicePixelRatio;
|
|
const label_height = label.offsetHeight * devicePixelRatio;
|
|
const x = Math.cos(mid) * radius * 0.60 - label_width / 2;
|
|
const y = Math.sin(mid) * radius * 0.60 - label_height / 2;
|
|
const transform = ctx.drawElementImage(label, x, y);
|
|
label.style.transform = transform;
|
|
|
|
angle += slice;
|
|
}
|
|
|
|
// 4. Draw the focus ring on top of everything else.
|
|
if (focusedPath)
|
|
ctx.drawFocusIfNeeded(focusedPath, document.activeElement);
|
|
};
|
|
canvas.requestPaint(); // Request an initial paint event.
|
|
|
|
// Setup a resize observer to resize the canvas in response to dpr changes.
|
|
new ResizeObserver(([entry]) => {
|
|
const box = entry.devicePixelContentBoxSize[0];
|
|
canvas.width = box.inlineSize;
|
|
canvas.height = box.blockSize;
|
|
}).observe(canvas, {box: ['device-pixel-content-box']});
|
|
</script>
|