Instructions file
Claude Code instructions for annondeveloper/ui-kit, covering ui kit — claude code project guide, project overview, development philosophy, key architecture decisions (v2) and branch strategy.
Plugin Claude Code
Native Claude Code integration for @annondeveloper/ui-kit — 147 zero-dependency React components with Aurora Fluid design, physics animations, OKLCH colors, and 3 weight tiers. Gives Claude deep awareness of components, design patterns, and conventions.
Agent
Reviews code for accessibility compliance with UI Kit conventions. Checks ARIA patterns, keyboard navigation, contrast ratios, touch targets, motion respect, and screen reader compatibility.
Agent
Designs component compositions and page layouts using UI Kit. Use when the user needs to architect a dashboard, form, settings page, or multi-component layout. Considers tier selection, responsive behavior, and Aurora Fluid design patterns.
Hook
Runs when a session starts on startup, running echo '🎨 UI Kit plugin loaded. Skills: /ui-kit:component-fin. From annondeveloper/ui-kit.
Skill Claude CodeCodex
Audit React components for accessibility compliance with UI Kit conventions. Use when the user asks to "check accessibility", "audit a11y", "review for screen readers", or "test keyboard navigation". Checks ARIA, contrast, touch targets, motion, and keyboard patterns.
Skill Claude CodeCodex
Find UI Kit components by name, feature, or use case. Use when the user asks "what component for...", "is there a...", "show me components", "find a widget", or describes UI they want to build. Covers all 147 components across Lite/Standard/Premium tiers.
Skill Claude CodeCodex
Explains the Aurora Fluid design system — OKLCH colors, physics animations, motion levels, weight tiers, CSS architecture, and theming. Use when the user asks about design tokens, colors, animations, theming, or how the design system works.
Skill Claude CodeCodex
Generate production-ready React code using UI Kit components. Use when the user asks to "build", "create", "make", "generate" a UI, page, form, dashboard, or component composition. Produces working TSX with correct imports, props, and Aurora Fluid styling.
Skill Claude CodeCodex
Helps choose the right weight tier (Lite/Standard/Premium) based on project requirements. Use when the user asks about bundle size, performance optimization, which tier to use, or import paths.