메뉴
Anybox 桌面端前端 UI 规范与实现流程。当 Codex 需要设计、实现、评审或重构 Anybox React/Electron/Vite 渲染层界面时使用，包括 workbench pane、侧边栏、ThreadView、composer、设置页、插件/MCP/skills 页面、菜单、表单、CSS token、响应式行为、视觉一致性和前端 UI 文档维护。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Control approved Windows app windows through the plugin-owned sky API in Anybox Node REPL.
Control the user's Chrome browser through a persistent Node REPL when tasks depend on existing tabs, signed-in sessions, extensions, visible page state, or UI interaction. Prefer purpose-built connectors, APIs, or CLIs for semantic resource operations.
构建、说明、迁移、评审或验证 Anybox 插件包及其 .anybox-plugin/plugin.json 清单。适用于 Codex 需要创建或更新插件目录、MCP Server、内置 Skill、插件自有 API Key 或 OAuth Connector、平台 Connector 依赖、外部组件 JSON、Registry 条目、ZIP 或 GitHub Tree 分发、生成 ID，或诊断 Anybox 插件目录与安装问题。
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.
Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Build Web Apps or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Chrome plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.
Build, explain, review, or validate current Anybox/Fanfande-derived plugin packages. Use when the user asks how to structure a plugin folder, write the canonical .anybox-plugin/plugin.json manifest, add plugin MCP servers, bundle plugin skills, define app connectors or connector requirements, create plugin registry manifests, migrate away from plugin.meta.json or zip artifacts, or check whether a plugin package matches the current plugin system.
| name | anybox-frontend-guidelines |
| description | Anybox 桌面端前端 UI 规范与实现流程。当 Codex 需要设计、实现、评审或重构 Anybox React/Electron/Vite 渲染层界面时使用，包括 workbench pane、侧边栏、ThreadView、composer、设置页、插件/MCP/skills 页面、菜单、表单、CSS token、响应式行为、视觉一致性和前端 UI 文档维护。 |
references/principles.mdreferences/tokens-and-css.mdreferences/layout-and-surfaces.mdreferences/controls-and-menus.mdreferences/slot-card-list.mdreferences/thread-view.mdreferences/settings-and-management.mdreferences/implementation-checklist.mdC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/tokens.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/primitives.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/shell.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/sidebar.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/workbench.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/thread.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/composer.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/settings.cssC:/Projects/Anybox/packages/desktop/src/renderer/src/styles/responsive.css新增或改写本 skill 的 UI 组件/交互 reference 时，必须让规范自包含这些主题与 token 约束，不要只依赖通用 token 文档：
-light / -dark 后缀的运行时 token。tokens.css 补充成对 light/dark semantic token，再暴露运行时 token 给组件使用。#fff、#000、固定灰色、固定品牌色或 rgba(...)。任务涉及对应区域时读取这些项目文档：
C:/Projects/Anybox/docs/thread-view-frontend-design.mdC:/Projects/Anybox/docs/thread-view-render-flow.htmlC:/Projects/Anybox/packages/desktop/anybox-mobile-client-design-plan.mdC:/Projects/Anybox/docs/todo-calendar-design.md如果 UI 行为变更导致这些文档过期，需要在同一次改动里同步更新。