Agent Skills › InsForge/InsForge › ui

ui

GitHub

指导 InsForge monorepo 中 packages/ui 包的开发规范，涵盖可复用 UI 原语、样式及导出管理。规定组件归属逻辑、代码风格（如 Radix、类型安全）及下游影响验证流程。

.claude/skills/insforge-dev/ui/SKILL.md InsForge/InsForge

触发场景

修改 packages/ui 下的组件或样式维护 InsForge 设计系统基础库添加新的 UI 公共导出

安装

npx skills add InsForge/InsForge --skill ui -g -y

更多选项

非标准路径

npx skills add https://github.com/InsForge/InsForge/tree/main/.claude/skills/insforge-dev/ui -g -y

不安装直接使用

npx skills use InsForge/InsForge@ui

指定 Agent (Claude Code)

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

安装 repo 全部 skill

npx skills add InsForge/InsForge --all -g -y

预览 repo 内 skill

npx skills add InsForge/InsForge --list

SKILL.md

Frontmatter

{
    "name": "ui",
    "description": "Use this skill when contributing to InsForge's reusable UI package. This is for maintainers editing design-system primitives, exports, styles, and package-level component behavior in the InsForge monorepo."
}

InsForge Dev UI

Use this skill for packages/ui/ work in the InsForge repository.

Scope

packages/ui/src/components/**
packages/ui/src/lib/**
packages/ui/src/index.ts
packages/ui/src/styles.css

Working Rules

Put only reusable primitives here.
- If the component is generic across dashboard features or other InsForge apps, it belongs in packages/ui/.
- If it is tightly coupled to one dashboard workflow but should ship to both OSS and cloud hosts, keep it in packages/dashboard/.
- If it is only for the self-hosting host app, keep it in frontend/.
Preserve the package's implementation style.
- Use class-variance-authority for variants when appropriate.
- Use the shared cn() helper for class merging.
- Follow the existing Radix-wrapper and typed-export patterns.
Keep the public surface in sync.
- Export new public components from packages/ui/src/index.ts.
- Avoid adding internal-only abstractions to the package surface unless they are meant to be consumed.
- Never use the TypeScript any type. Keep component props and exported helpers strictly typed.
Validate downstream impact.
- The shared dashboard package consumes this package directly, so UI changes can break packages/dashboard/ even if packages/ui/ itself builds cleanly.

Validation

cd packages/ui && npm run build
cd packages/ui && npm run typecheck

Also validate packages/dashboard/ when the changed component is used in the dashboard, and validate frontend/ if the host app integration or CSS entrypoints changed.