Agent Skills
› fanfan-de/anybox
› anybox-frontend-guidelines
anybox-frontend-guidelines
GitHubAnybox桌面端前端UI规范，指导React/Electron渲染层的界面设计、实现与重构。涵盖组件复用、Token管理、双主题适配及代码收敛原则，确保视觉一致性与可维护性。
Trigger Scenarios
设计或实现Anybox前端界面
重构Electron/Vite渲染层UI
审查前端CSS Token与主题规则
更新前端UI文档
Install
npx skills add fanfan-de/anybox --skill anybox-frontend-guidelines -g -y
SKILL.md
Frontmatter
{
"name": "anybox-frontend-guidelines",
"description": "Anybox 桌面端前端 UI 规范与实现流程。当 Codex 需要设计、实现、评审或重构 Anybox React\/Electron\/Vite 渲染层界面时使用，包括 workbench pane、侧边栏、ThreadView、composer、设置页、插件\/MCP\/skills 页面、菜单、表单、CSS token、响应式行为、视觉一致性和前端 UI 文档维护。"
}
Anybox 前端规范
核心流程
- 修改前先阅读目标 UI 代码。优先沿用已有组件结构、class 命名、CSS 归属和 token 用法，不要先发明新抽象。
- 只读取当前任务需要的 reference：
- 产品整体风格：
references/principles.md - token、CSS 归属、主题规则：
references/tokens-and-css.md - shell、pane、sidebar、surface：
references/layout-and-surfaces.md - 按钮、菜单、控件、列表行：
references/controls-and-menus.md - 槽位式卡片列表交互：
references/slot-card-list.md - ThreadView、trace、side chat、composer 嵌套：
references/thread-view.md - 设置、插件、MCP、global skills 页面：
references/settings-and-management.md - UI 修改完成前检查：
references/implementation-checklist.md
- 产品整体风格：
- 以本地项目文件为事实来源。常用入口：
C:/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
- 保持改动范围收敛。优先改 token 或局部语义 class，不要追加文件末尾的大范围覆盖规则。
- 最终回复前检查亮色/暗色主题、窄窗口、键盘焦点、溢出和相关测试。
撰写 UI 规范的元规则
新增或改写本 skill 的 UI 组件/交互 reference 时，必须让规范自包含这些主题与 token 约束，不要只依赖通用 token 文档：
- 明确 light 和 dark 双主题都必须支持。
- 明确组件 CSS 只消费不带
-light/-dark后缀的运行时 token。 - 明确 semantic token 的命名、fallback 与 light/dark 映射规则。
- 明确缺少合适 token 时，先在
tokens.css补充成对 light/dark semantic token，再暴露运行时 token 给组件使用。 - 明确 default、hover、focus、active、disabled、selected/current、error/invalid 等状态都要在明暗主题下可读。
- 明确禁止硬编码颜色和硬编码 fallback，例如
#fff、#000、固定灰色、固定品牌色或rgba(...)。 - 明确 focus 使用组件自身的背景、边框、文字、指示器等 token 化状态表达，不使用 outline 或 inset ring。
项目文档来源
任务涉及对应区域时读取这些项目文档：
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 行为变更导致这些文档过期，需要在同一次改动里同步更新。
Version History
- 08dc189 Current 2026-07-05 18:53
