Agent Skills › o8-run/o8 › o8-ui

o8-ui

GitHub

用于前端 UI 开发、审查及视觉交互行为调整。指导在 TSX 中使用内联样式和主题变量，遵循品牌规范与设计指南，确保组件结构与 Hook 使用的规范性。

.agents/skills/o8-ui/SKILL.md o8-run/o8

修改或审查 UI 组件代码调整样式、图标或交互行为

npx skills add o8-run/o8 --skill o8-ui -g -y

更多选项

非标准路径

npx skills add https://github.com/o8-run/o8/tree/main/.agents/skills/o8-ui -g -y

不安装直接使用

npx skills use o8-run/o8@o8-ui

指定 Agent (Claude Code)

npx skills add o8-run/o8 --skill o8-ui -a claude-code -g -y

安装 repo 全部 skill

npx skills add o8-run/o8 --all -g -y

预览 repo 内 skill

npx skills add o8-run/o8 --list

Frontmatter

{
    "name": "o8-ui",
    "description": "Change or review UI, TSX, styles, hooks, icons, or visual and interaction behavior."
}

UI work

In TSX, add no new CSS classes. Use inline style objects, longhand spacing when values differ, theme variables for themeable surfaces, and the established raw-SVG icon pattern. Keep hooks unconditional and in stable order.
Brand (logo, colours, type, motion, the working indicator): docs/design/BRAND.md; the build steps are in docs/design/BRAND-IMPLEMENT.md.
UI work: read docs/design/hurttlocker.md, then docs/design/DESIGN.md and docs/design/STYLEGUIDE.md.