Agent Skills › oomol-lab/open-flow › frontend-ui

frontend-ui

GitHub

定义Open Flow前端开发规范，涵盖组件实现、样式布局、交互逻辑及无障碍访问。指导UI复用、Lab测试验证及特定模块如表单、画布的开发与审查，排除后端变更。

.agents/skills/frontend-ui/SKILL.md oomol-lab/open-flow

触发场景

实现或审查前端UI组件调整按钮间距或视觉平衡处理主题、表单或画布集成检查无障碍访问性

安装

npx skills add oomol-lab/open-flow --skill frontend-ui -g -y

更多选项

非标准路径

npx skills add https://github.com/oomol-lab/open-flow/tree/main/.agents/skills/frontend-ui -g -y

不安装直接使用

npx skills use oomol-lab/open-flow@frontend-ui

指定 Agent (Claude Code)

npx skills add oomol-lab/open-flow --skill frontend-ui -a claude-code -g -y

安装 repo 全部 skill

npx skills add oomol-lab/open-flow --all -g -y

预览 repo 内 skill

npx skills add oomol-lab/open-flow --list

SKILL.md

Frontmatter

{
    "name": "frontend-ui",
    "description": "Implement and review Open Flow frontend components, styling, layout, and interactions. Use for button spacing, visual balance, themes, forms, canvas and Workbench integration, accessibility, and related Lab stories in this repository. Excludes backend-only changes and unrelated frontend projects."
}

Open Flow Frontend Development

This skill defines frontend conventions for shared UI, forms, the canvas, Workbench, and host integration. Paths beginning with src/ are relative to packages/open-flow/; other repository paths are relative to the repository root. Use production code as the source for component usage.

Core workflow

Identify the component that owns the behavior and its affected consumers. Correct shared behavior at its owner and keep feature-specific requirements local.
Prefer existing components, tokens, and public interfaces. Preserve required state, language, theme, coordinate, clipping, stacking, and dismissal contexts when composing UI.
Components own interaction semantics. Preserve keyboard operation, accessible names, state communication, focus restoration, expected opening and closing behavior, real link semantics, and reduced-motion behavior.
When adding, replacing, or choosing icons, use the iconify-icons skill. Lucide icons use i-lucide-light:<name>, not i-lucide:<name>; existing lucide-react components use strokeWidth={1.5}.
Prefer Lab for appearance and interaction checks. Maintain related Stories and add missing states. Supplement Lab with the product when host layout or a complete flow matters. Consult the Lab documentation only when changing Lab infrastructure or deployment, or when an unfamiliar Story API requires it.
Reuse an existing Lab or dev service when available. Stop and confirm termination of any service you start; leave pre-existing services running.
For appearance or interaction changes, verify the affected states in Lab or the product. Static checks do not establish visual correctness. Report material verification gaps.

Task-specific references

Read only the references relevant to the task; read more than one when the change crosses domains.

For Value Node, Inputs, value editors, inspector navigation, field or node settings, and property-panel layout or interaction, start with Property panel contracts, then read only the routed detail relevant to the task.
For shared controls, themes, host-facing UI, spacing, visual styling, shared browser UI, or localization, read Shared UI and visual design.
For standalone forms, Schema-controlled values, validation drafts, or shared code editors, read Forms and editors.
For canvas, Workbench, sidebar composition, node menus, canvas popovers, or undo/redo behavior, read Canvas and Workbench.