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

o8-ui

GitHub

指导前端UI开发，涵盖TSX、样式、Hooks及图标规范。要求遵循内联样式、主题变量及原始SVG模式，并严格参照品牌与设计文档执行视觉和交互逻辑实现。

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

修改或审查UI组件代码调整样式或交互行为涉及TSX文件的重构或新增

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

More Options

Non-standard path

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

Use without installing

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.