How do I install the Insforge UI skill?

Run npx skillmds@latest add insforge/insforge-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Insforge UI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Insforge UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Insforge UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Insforge UI?

insforge (@insforge) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Insforge UI by insforge — Agent Skill

Name: Insforge UI
Author: insforge

Insforge UI

Use this skill when working in the InsForge/UI repository, which publishes @insforge/ui, the React primitives, design tokens, and Tailwind preset shared by InsForge apps. Covers package layout, working rules, validation, and where the release process lives.

insforge 42ad9c3 2.8 KB Updated Sep 17, 2026

File contents

InsForge UI

@insforge/ui is published to npm from this repository. Its main consumers are packages/dashboard in the InsForge monorepo (https://github.com/InsForge/InsForge) and the insforge-cloud app; both pin a version range and only see a change after a release.

Use the release child skill (release/SKILL.md) to publish a version or to diagnose a failed publish.

Layout

src/components/** — one file per primitive, Radix wrappers with typed exports
src/lib/** — helpers such as cn()
src/index.ts — the public surface; every public component is re-exported here
src/styles.css — token layers, copied verbatim to dist/styles.css on build
tailwind-preset.js — maps the tokens to Tailwind theme colors

Working Rules

Only reusable primitives belong here. Anything tied to one dashboard workflow stays in the monorepo's packages/dashboard.
Use class-variance-authority for variants and cn() for class merging. Follow the existing Radix-wrapper pattern.
Export new public components from src/index.ts. Do not widen the surface with internal-only abstractions.
Never use the TypeScript any type. Keep props and exported helpers strictly typed.
Tests live next to the code: *.test.ts run in node (unit), *.test.tsx run in jsdom (component).
Relative imports carry an explicit extension (./Button.js, ./components/index.js). tsc emits specifiers verbatim and Node ESM rejects extensionless or directory imports, so an extensionless import breaks every non-bundler consumer.
src/styles.css declares @source './' so a consumer's Tailwind scans this package's built files. Keep it: without it the utilities used inside the components are never generated in the consumer's CSS.

Landing Changes

main is protected the same way as the other InsForge repositories: no direct pushes, every change arrives through a pull request with one approval and a green CI run. Force pushes and branch deletion are blocked, admins included.

Validation

npm run lint
npm run typecheck
npm test
npm run build

Consumers only see published output, so after a behavior change also check the dashboard in the InsForge monorepo against the built package (npm pack here, install the tarball there) before releasing.

Skill Maintenance

.agents/skills/insforge-ui/ is the canonical copy. .claude/skills/ and .codex/skills/ are generated mirrors: edit the canonical tree, run scripts/sync-skills.sh, and commit all three. CI fails on drift.

---name: insforge-uidescription: Use this skill when working in the InsForge/UI repository, which publishes @insforge/ui, the React primitives, design tokens, and Tailwind preset shared by InsForge apps. Covers package layout, working rules, validation, and where the release process lives.---# InsForge UI`@insforge/ui` is published to npm from this repository. Its main consumers are `packages/dashboard` in the InsForge monorepo (https://github.com/InsForge/InsForge) and the insforge-cloud app; both pin a version range and only see a change after a release.Use the `release` child skill (`release/SKILL.md`) to publish a version or to diagnose a failed publish.## Layout- `src/components/**` — one file per primitive, Radix wrappers with typed exports- `src/lib/**` — helpers such as `cn()`- `src/index.ts` — the public surface; every public component is re-exported here- `src/styles.css` — token layers, copied verbatim to `dist/styles.css` on build- `tailwind-preset.js` — maps the tokens to Tailwind theme colors## Working Rules1. Only reusable primitives belong here. Anything tied to one dashboard workflow stays in the monorepo's `packages/dashboard`.2. Use `class-variance-authority` for variants and `cn()` for class merging. Follow the existing Radix-wrapper pattern.3. Export new public components from `src/index.ts`. Do not widen the surface with internal-only abstractions.4. Never use the TypeScript `any` type. Keep props and exported helpers strictly typed.5. Tests live next to the code: `*.test.ts` run in node (unit), `*.test.tsx` run in jsdom (component).6. Relative imports carry an explicit extension (`./Button.js`, `./components/index.js`). `tsc` emits specifiers verbatim and Node ESM rejects extensionless or directory imports, so an extensionless import breaks every non-bundler consumer.7. `src/styles.css` declares `@source './'` so a consumer's Tailwind scans this package's built files. Keep it: without it the utilities used inside the components are never generated in the consumer's CSS.## Landing Changes`main` is protected the same way as the other InsForge repositories: no direct pushes, every change arrives through a pull request with one approval and a green `CI` run. Force pushes and branch deletion are blocked, admins included.## Validation```bashnpm run lintnpm run typechecknpm testnpm run build```Consumers only see published output, so after a behavior change also check the dashboard in the InsForge monorepo against the built package (`npm pack` here, install the tarball there) before releasing.## Skill Maintenance`.agents/skills/insforge-ui/` is the canonical copy. `.claude/skills/` and `.codex/skills/` are generated mirrors: edit the canonical tree, run `scripts/sync-skills.sh`, and commit all three. CI fails on drift.

Frequently asked questions