메뉴
SolidJS + single-responsibility conventions for the side-panel UI — one component per file with co-located SCSS, thin stores, no logic in components. Use when creating or editing anything under src/entrypoints/sidepanel, Solid components, signals/stores, or SCSS.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Implement or modify the in-browser live-edit engine — DOM mutation primitives, the element picker, stable-selector heuristics, and the changeset recorder. Use when touching src/dom, src/entrypoints/content.ts, or src/shared/changeset.ts, or when the task mentions live editing, DOM tools, selectors, or recording changes.
Manifest V3 extension gotchas — the three execution worlds, key custody, CSP / no-remote-code, the ephemeral service worker, and the typed message bus. Use when touching the manifest, wxt.config.ts, entrypoints, cross-world messaging, or when something behaves differently in the extension than in tests.
Assemble an accepted changeset and dispatch the implementation handoff over MCP to ai-dev / developerz.ai. Use when touching src/mcp, the ship flow in src/entrypoints/background.ts, or when the task mentions handoff, shipping a design, MCP task creation, or turning edits into a PR.
Testing patterns for the extension — Vitest unit + integration projects and Playwright E2E on a loaded extension. Use when writing or fixing tests, setting up mocks for the agent loop / DOM tools / MCP, or when CI test jobs fail.
| name | solid-srp |
| description | SolidJS + single-responsibility conventions for the side-panel UI — one component per file with co-located SCSS, thin stores, no logic in components. Use when creating or editing anything under src/entrypoints/sidepanel, Solid components, signals/stores, or SCSS. |
UI is SolidJS in the side panel. See root CLAUDE.md and docs/idea/ui.md.
.tsx + one co-located .scss, same basename (ChatPanel.tsx + ChatPanel.scss).src/agent/, src/dom/, src/mcp/, src/changeset/.createSignal, createStore. NEVER prop-drill more than one level — lift to a store.createMemo. Side effects in createEffect. No manual DOM in components..chat-panel { ... }), BEM-ish for children.src/styles/_tokens.scss. NEVER hardcode a hex/px that's a token..scss and is scoped.bun run lint + bun run typecheck clean.