1. Components
  2. skills

AI Skills

AI-assisted development skills for JK-UI

An AI skill is a packaged set of instructions and reference files that helps AI assistants generate accurate, idiomatic JK-UI code. Instead of guessing component names, props, or install commands, the AI reads from curated source files.

jk-ui Skill

The jk-ui skill is a comprehensive guide for AI assistants and developers. It includes:
  • Per-component documentation and APIs
  • Install commands for every component
  • Theming system and CSS variables
  • Verified best practices and common mistakes
  • Accessibility patterns (React Aria)
  • Composition examples
  • Performance guidance

Setup: 7 Simple Steps

JK-UI setup is straightforward — no CLI overhead, just shadcn basics:
Step 1: Initialize shadcn
bunx --bun shadcn@latest init --base aria
Step 2: Register the @jk-ui namespace
bunx shadcn@latest registry add @jk-ui=https://jk-ui.unoforge.com/r/{name}.json
Step 3: Install an icon library (choose one)
# Phosphor (default)
bun add -D @iconify-json/ph

# Or: Heroicons, Lucide, HugeIcons, Solar
# bun add -D @iconify-json/heroicons
Step 4: Install the base
bunx shadcn add @jk-ui/base
Step 5: Configure your main CSS
Add to src/styles/globals.css (or your main CSS file):
@import "tailwindcss";
@import "tw-animate-css";

@reference "./jk-ui/base.css";
@reference "./jk-ui/form.css";
@reference "./jk-ui/button.css";
@reference "./jk-ui/ui.css";
@reference "./jk-ui/intents.css";
@reference "./jk-ui/utils.css";

@plugin "@iconify/tailwind4" {
  prefixes: ph;
  scale: 1.0;
}
Step 6: Update components.json (if needed)
{
  "iconLibrary": "ph"
}
Step 7: Install components
bunx shadcn add @jk-ui/button
bunx shadcn add @jk-ui/card
bunx shadcn add @jk-ui/input
Done! See Installation for full details.

Tech Stack

LayerTechnology
FrameworkReact 19 (Next.js, TanStack Start, React Router, etc.)
Primitivesreact-aria-components
StylingTailwind CSS 4
Variantstailwind-variants + tailwind-merge
IconsIconify (Phosphor, Heroicons, Lucide, etc.)
Animationmotion + tw-animate-css
ChartsRecharts 3.7
OTPinput-otp 1.4

Reference

Skill files: ./skills/jk-ui/
Key files:
  • SKILL.md — Main skill guide
  • INDEX.md — Navigation guide
  • references/ — Technical references
  • components/ — Per-component docs
Prev
Dark Mode

Implementing and toggling dark mode support.

Next
On this page