메뉴
Use when working on CDP Browser's renderer (src/). Triggers on tasks involving React components, src/lib domain modules, Tailwind v4 + shadcn UI, Vitest tests, or anything visible in the Electron window. Loads the frontend conventions before code is written so the work follows established standards.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Scaffolds the next-numbered docs/adr/ file from the ADR template, filling the title, Status (Proposed), and Date lines. Use when the user says "write an ADR", "record this decision", "/adr", or an architectural decision needs recording.
Captures a raw, unstructured idea as a timestamped top entry in docs/memories/ideas.md. Use when the user says "capture an idea", "/idea", or floats a future improvement worth recording before it's lost.
Records a hard-won lesson as a timestamped top entry in docs/memories/learnings.md. Use when the user says "we learned", "note that", "/learn", or a non-obvious lesson surfaces that's worth remembering.
Scaffolds the next-numbered docs/tasks/ file from the task template, filling only the title line. Use when the user says "create a task", "new task", "/new-task", or a piece of work needs its own task file before it can be picked up.
Monitor a GitHub PR until approved — poll CI, read review comments, address blocking/should-fix findings, push fixes, re-poll. Use when user says "monitor the PR", "watch the PR", "address reviews", or "push until approved".
Appends a new open risk entry (next R-NNN, 🔴) to docs/memories/risks.md with a mitigation/trigger scaffold to fill in. Use when the user says "log a risk", runs /risk, or a new project risk surfaces in conversation.
| name | frontend |
| description | Use when working on CDP Browser's renderer (src/). Triggers on tasks involving React components, src/lib domain modules, Tailwind v4 + shadcn UI, Vitest tests, or anything visible in the Electron window. Loads the frontend conventions before code is written so the work follows established standards. |
This skill is a pointer, not a duplicate. The conventions are the contract — read them before writing any renderer code, and re-read when scope expands.
If a relevant convention is missing, write it first in the appropriate
docs/conventions/ file, then implement.
Run from the repo root:
pnpm test
pnpm typecheck
pnpm check
Plus a visual check via Chrome MCP against vite dev (or the running app):
CDP Browser runs as an Electron desktop app and as a web/iPad PWA. For desktop
renderer changes, verify at ~1280×800+. For web-build or layout changes, also
check at iPad widths (≤1100px viewport) where the sidebar defaults to 180px and
safe-area insets apply. The web build adds breakpoint-aware defaults but no
separate mobile-only codebase — one renderer, capability-split via webCaps.
If the change is not browser-observable (config, types, tests only), say so explicitly — don't claim visual verification you didn't do.
If the task drifts beyond what was requested (touches new modules, adds unscoped abstractions, refactors adjacent code), STOP and surface the drift. Silent scope absorption breaks the one-session cap.