Docs/AI-Native

New in 0.1

AI-NATIVE

nosible-ux ships Claude skills and agents alongside its React components. Install the npm package and your AI assistant instantly knows how to build, audit, and migrate brand-compliant UIs — zero extra setup.

Overview

When you install nosible-ux, the package includes a .claude/ directory with four auto-fired skills and two invocable agents. Claude Code loads them automatically from any project that has nosible-ux in its dependency tree.

4 SkillsAuto-fired by context

2 AgentsInvocable subagents

12-Point ChecklistBaked into every scaffold

0 SetupShips inside the npm package

Skills

Skills fire automatically when Claude detects a matching intent. Each skill embeds the full brand-bible constraints, 12-point checklist, and real file paths so the model never guesses.

nosible-ux-component

Bootstrap a new brand-compliant nosible-ux component end-to-end.

SKILL

Fires on"create a new component", "scaffold a component", "/nosible-ux-component <Name>"

Example

UserCreate a StatusBadge component with success, warning, and critical variants.

ClaudeScaffolding StatusBadge.tsx, StatusBadge.stories.tsx, StatusBadge.test.tsx and adding the barrel export — 12-point checklist applied, 0 brand violations.

nosible-ux/library/.claude/skills/nosible-ux-component/SKILL.md

nosible-ux-ad-unit

Scaffold a new AdUnit preset — wire AD_PRESETS, gallery story, and export pipeline.

SKILL

Fires on"add an ad preset", "new AdUnit preset", "/nosible-ux-ad-unit <platform> <WxH>"

Example

UserAdd a LinkedIn Carousel preset at 1080×1080.

ClaudeAdding linkedinCarousel to AD_PRESETS in AdUnit.tsx, a gallery story in AdUnit.stories.tsx, and registering the key in export-ads.mjs.

nosible-ux/library/.claude/skills/nosible-ux-ad-unit/SKILL.md

nosible-ux-audit

Run brand-lint and suggest precise fixes — target 0 critical violations.

SKILL

Fires on"run brand-lint", "audit brand compliance", "/nosible-ux-audit [path]"

Example

UserRun brand-lint and fix everything critical.

ClaudeFound 3 critical violations: rounded-sm → rounded-none (Tooltip.tsx:42), raw #26D07C → text-accent (Badge.tsx:18), shadow-md → shadow-none (Card.tsx:31). Fixes applied — 0 critical remaining.

nosible-ux/library/.claude/skills/nosible-ux-audit/SKILL.md

nosible-ux-migrate

Migrate Mantine, shadcn/ui, or Radix UI components to nosible-ux primitives.

SKILL

Fires on"migrate from Mantine", "replace shadcn components", "/nosible-ux-migrate [path]"

Example

UserMigrate this Mantine Button: <Button variant="filled" color="green" size="md">Save</Button>

Claude<Button intent="primary" size="md">SAVE</Button> — variant mapped, colour removed, label uppercased.

nosible-ux/library/.claude/skills/nosible-ux-migrate/SKILL.md

Agents

Agents are specialised subprocesses with their own system prompts and tool allow-lists. Invoke them explicitly or let skills delegate to them for deeper analysis.

nosible-ux-reviewer

Read-only agent. Reviews component code against the 12-point checklist and brand bible. Produces a structured violation report — never edits files.

AGENT

ToolsReadGrepGlobBash

nosible-ux/library/.claude/agents/nosible-ux-reviewer.md

nosible-ux-brand-enforcer

Scans source for non-brand hex values, non-zero border-radius, banned fonts, and wrong motion. Proposes and optionally applies precise in-place fixes.

AGENT

ToolsReadGrepGlobBashEdit

nosible-ux/library/.claude/agents/nosible-ux-brand-enforcer.md

Shipping in the package

The .claude/ directory is listed in package.json#files so it publishes with every npm release. Verify with:

Terminal

npm pack --dry-run -w nosible-ux/library | grep .claude

Expected output — all six files:

Output

npm notice 4.3kB .claude/agents/nosible-ux-brand-enforcer.md
npm notice 3.5kB .claude/agents/nosible-ux-reviewer.md
npm notice 4.3kB .claude/skills/nosible-ux-ad-unit/SKILL.md
npm notice 3.8kB .claude/skills/nosible-ux-audit/SKILL.md
npm notice 5.3kB .claude/skills/nosible-ux-component/SKILL.md
npm notice 4.8kB .claude/skills/nosible-ux-migrate/SKILL.md