skills.rest
nihalnihalani
nihalnihalaniCOMMUNITY
Explore all skills by this author →
GitHub

jac-shadcn-components

Compose Jac UI pages from shadcn primitives installed via jac install --shadcn.

Updated Jul 26, 2026
Search Tags:#theming#frontend#ui components#jsx#shadcn#import paths#jac
One-click install
npx skills add https://github.com/nihalnihalani/jachacks-sf-2026 --skill jac-shadcn-components-nihalnihalani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jac-shadcn-components
Source: https://github.com/nihalnihalani/jachacks-sf-2026/tree/main/plugins/jac-codex/skills/jac-shadcn-components
Command: npx skills add https://github.com/nihalnihalani/jachacks-sf-2026 --skill jac-shadcn-components-nihalnihalani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hugeicons/react, @hugeicons/core-free-icons, sonner.

What problem does it solve? Building UI in Jac projects often leads to hand-written primitives, broken import paths, and silent runtime failures. This Skill provides the exact rules for installing, importing, composing, styling, and theming jac-shadcn components so generated code compiles and renders correctly. ## Core Features & Use Cases - Component installation and imports: Use jac install --shadcn <name> to add primitives offline, with correct underscored module names and relative dot-path imports based on file location. - Composition and styling rules: Enforce required structures (Dialog titles, Card sections, SelectItem grouping), semantic color tokens, cn() from lib/utils, and verified Hugeicons icon names. - Theming with jac retheme: Regenerate global.css from the [jac-shadcn] section of jac.toml using style, baseColor, theme, font, radius, and menuAccent flags. - Use Case: When asked to build a dashboard page in a jac-shadcn project, scan components/ui/, install missing primitives like table and dialog, then compose an EventListPage with correct imports, icons, and semantic styling. ## Quick Start Use the jac-shadcn-components skill to build an events list page in my Jac project with a table, badge, and create-event dialog.

Frequently Asked Questions about jac-shadcn-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn components to a Jac project?▼

Run `jac install --shadcn <name>` with the kebab-case registry name, such as `jac install --shadcn dialog table`. It works offline, writes underscored files like dropdown_menu.jac into components/ui/, and auto-installs peer dependencies.

How do I import jac-shadcn components in Jac files?▼

Import the underscored file name with dot paths relative to your file, for example `import from .ui.dropdown_menu { DropdownMenu }` from components/. Never use hyphens in imports; unquoted hyphens are parse errors and quoted ones fail to resolve at build time.

Why does my Jac build fail with Could not resolve for a UI import?▼

The relative dot prefix is wrong for your file's location. From pages/ you need `..components.ui.button`, and route groups like (auth)/ add one more dot. Undercounting dots fails the client bundle silently, not jac check.

How do I change the theme or font in a jac-shadcn project?▼

Run `jac retheme` with flags like `--theme emerald --font outfit`, which regenerates global.css and updates the [jac-shadcn] section of jac.toml. Avoid hand-editing global.css because retheme overwrites it.

Why does my DialogTrigger with asChild never open the dialog?▼

A hand-written child component must declare a trailing `ref: Ref[...]` parameter so the anchor ref forwards correctly. Without it the trigger silently never opens, with no compile or console error. Prefer the installed Button primitive instead.

Can I edit files in components/ui/ directly?▼

No. Files in components/ui/ are managed by jac install --shadcn and jac remove --shadcn, and manual edits are silently overwritten on the next run. Build high-level composites in components/ instead.

Related Skills

Explore More Software Engineering Skills→
HumanAssistedHumanAssisted

moltyjacs

Sign and verify OpenClaw agent documents with JACS crypto.

Official
Advanced
ali-masterali-master
8

orpc-nextjs

Integrate oRPC into Next.js App Router and Pages Router applications.

Community
Intermediate
sebasmzgsebasmzg

tailwind-4

Enforce Tailwind CSS 4 semantic theme classes and cn-style merging in React components.

Community
Basic
darkmatterdarkmatter
1

shadcn-registry-first

Search shadcn registries and compare React UI component candidates.

Official
Advanced