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)
74 lines
2.8 KiB
HTML
74 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Pulsegate — hero (preflight target)</title>
|
|
<!-- Hero.jsx 와 동일한 CSS. 마크업만 감사용으로 복제했다. -->
|
|
<link rel="stylesheet" href="./src/styles/tokens.css" />
|
|
<link rel="stylesheet" href="./src/styles/hero.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<nav class="nav" aria-label="Primary">
|
|
<p class="nav__mark">Pulsegate</p>
|
|
<a class="nav__link" href="#pricing">Pricing</a>
|
|
<a class="nav__link" href="#docs">Docs</a>
|
|
<button type="button" class="theme-toggle" id="theme" aria-pressed="false">Light</button>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div>
|
|
<h1 class="hero__headline">Add every host you want. You pay for checks.</h1>
|
|
<p class="hero__sub">Pulsegate watches your endpoints from {{REGION_COUNT}} regions and pages you when latency drifts. No agents to install.</p>
|
|
<div class="hero__actions">
|
|
<a class="cta" href="#signup">Start the free trial</a>
|
|
<a class="link-quiet" href="#pricing">See how billing is calculated</a>
|
|
</div>
|
|
</div>
|
|
|
|
<figure style="margin:0">
|
|
<img class="shot" src="/product-checks.png" width="960" height="720"
|
|
alt="Pulsegate 체크 목록 화면. 엔드포인트 이름, 최근 응답 시간, 상태가 표 형태로 정렬되어 있다."
|
|
loading="eager" decoding="async" />
|
|
<figcaption class="shot-caption">checks/ — the only screen you need during an incident</figcaption>
|
|
</figure>
|
|
</header>
|
|
|
|
<div class="install">
|
|
<span class="install__prompt" aria-hidden="true">$</span>
|
|
<code class="install__cmd">npx pulsegate init</code>
|
|
<button type="button" class="install__copy" id="copy">Copy</button>
|
|
<span role="status" aria-live="polite" class="visually-hidden" id="copied"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const root = document.documentElement
|
|
const btn = document.getElementById('theme')
|
|
const resolved = () => root.getAttribute('data-theme')
|
|
?? (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
|
|
const sync = () => {
|
|
const t = resolved()
|
|
btn.textContent = t === 'dark' ? 'Light' : 'Dark'
|
|
btn.setAttribute('aria-pressed', String(t === 'light'))
|
|
}
|
|
btn.addEventListener('click', () => {
|
|
root.setAttribute('data-theme', resolved() === 'dark' ? 'light' : 'dark')
|
|
sync()
|
|
})
|
|
sync()
|
|
|
|
const copyBtn = document.getElementById('copy')
|
|
const status = document.getElementById('copied')
|
|
copyBtn.addEventListener('click', async () => {
|
|
try {
|
|
await navigator.clipboard.writeText('npx pulsegate init')
|
|
copyBtn.textContent = 'Copied'
|
|
status.textContent = 'Command copied to clipboard'
|
|
setTimeout(() => { copyBtn.textContent = 'Copy'; status.textContent = '' }, 1600)
|
|
} catch {}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|