skills.rest
PMN123
PMN123COMMUNITY
Explore all skills by this author →
GitHub

jac-shadcn-components

Installs, imports, and composes jac-shadcn UI primitives in Jac projects with correct paths and theming.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building UI in a Jac project with shadcn primitives fails in non-obvious ways: hyphenated component names break imports, relative dot paths silently fail the client bundle, hand-written primitives get overwritten, and wrong icon names only fail at page load. This Skill encodes the verified rules so generated components compile and render correctly the first time. ## Core Features & Use Cases - Component installation and import rules: Use jac install --shadcn <name> to add primitives offline, import the underscored file name, and compute correct relative dot prefixes based on where your file lives. - Selection, composition, and styling guidance: Pick the right primitive from a full component table, follow mandatory composition rules (Dialog titles, Card structure, TooltipProvider), and apply semantic color tokens instead of raw palette classes. - Theming via jac retheme: Switch style, baseColor, accent theme, font, and radius through CLI flags that regenerate global.css and update jac.toml. - Use Case: When asked to build an events dashboard page in a jac-shadcn project, scan components/ui/, install missing primitives like table and dialog, then compose a page component 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 using Card, Table, and Dialog primitives with correct imports and theming.

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 followed by the kebab-case component names, such as jac install --shadcn dialog table badge. The installer works offline, writes underscored files into components/ui/, auto-installs peer dependencies, and patches jac.toml.

Why does my Jac shadcn import fail with Could not resolve?▼

The installer converts hyphens to underscores, so dropdown-menu becomes dropdown_menu.jac. Importing the hyphenated form either causes a parse error or builds a path that never matches the file. Also verify your relative dot prefix matches your file's folder depth.

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

Use jac retheme with camelCase flags like --theme emerald, --font inter, or --baseColor zinc. It regenerates global.css and persists values to the [jac-shadcn] section of jac.toml, so hand edits to global.css are overwritten.

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

When asChild renders your own composite as the trigger, that component must declare a trailing ref parameter so the anchor ref forwards correctly. Without it the dialog silently never opens. Prefer the installed Button primitive, which already handles ref forwarding.

Can I edit files in components/ui/ to customize a primitive?▼

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/ that wrap and style the primitives instead.

Why does my Hugeicons icon fail only when the page loads?▼

Wrong icon names are not compile errors; jac check and the build pass, but the page fails at runtime with a missing export error. Use verified names like Search01Icon or Add01Icon, or list the real exports in the @hugeicons/core-free-icons dist folder.

Related Skills

Explore More Software Engineering Skills→
nihalnihalaninihalnihalani

jac-shadcn-components

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

Community
Advanced
nihalnihalaninihalnihalani

jac-fullstack-patterns

Wire main.jac entry modules, endpoints, and client-server imports for fullstack Jac applications.

Community
Advanced
nihalnihalaninihalnihalani

jac-cl-components

Write client-side Jac UI components with reactive state, JSX rendering, and typed event handlers.

Community
Advanced
basebase
104

connecting-to-base-network

Provide Base Mainnet and Sepolia RPC endpoints, chain IDs, and explorer URLs.

Official
Basic