菜单
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.