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

jac-shadcn-blocks

Provides design system constants and JSX composition patterns for jac-shadcn pages.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent jac-shadcn pages requires remembering dozens of spacing, typography, and layout rules, and small mistakes like shorthand padding or wrong card padding break visual consistency. This Skill supplies the design system constants, anti-patterns checklist, and ready-made structural skeletons so every page follows the same conventions. ## Core Features & Use Cases - Design System Constants: Section padding tables, type scale, container wrappers, and 4-unit spacing rhythm rules for all page types. - Anti-Patterns Checklist: A wrong-vs-correct table covering Jac-specific pitfalls like JSX comment syntax, Python-style booleans, cn() usage, and Sidebar className bugs. - Composition Patterns: Structural JSX skeletons for auth cards, sidebar app shells, data tables, stats rows, pricing grids, CTA banners, empty states, and marketing sections. - Use Case: When building a new dashboard page with a sidebar and KPI cards, load this Skill to get the exact SidebarProvider/SidebarInset structure and stats card markup with correct padding and tabular-nums styling. ## Quick Start Build a jac-shadcn pricing page with three tiers using the design system constants and composition patterns from this Skill.

Frequently Asked Questions about jac-shadcn-blocks

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

FAQPage Schema
How do I build a sidebar app shell in jac-shadcn?▼

Wrap SidebarProvider around a Sidebar with collapsible="offcanvas" and a SidebarInset containing a header with SidebarTrigger, vertical Separator, and Breadcrumb. The main element uses pt-6 pb-6 pl-6 pr-6 with no max-w constraint, and never pass className to Sidebar sub-components.

What padding classes should jac-shadcn sections use?▼

Hero and CTA sections use pt-24 pb-24 sm:pt-32 sm:pb-32, mid-page sections use pt-16 pb-16 sm:pt-24 sm:pb-24, and compact sections use pt-12 pb-12. Shorthand py- and px- classes are forbidden; always use physical padding classes.

Why does className break on jac-shadcn Sidebar components?▼

A known jac-shadcn className spread bug wipes base styles when className is passed to any Sidebar sub-component. Wrap the Sidebar component in a plain div and apply classes to the wrapper instead.

How do I render lists in Jac JSX without map errors?▼

Use a statement slot with a for loop, such as {for row in rows { <TableRow/> }}, instead of rows.map(...), which fails with error E1030. This applies to table rows, pricing tiers, and any repeated JSX content.

Can I use standard JSX comments and booleans in Jac?▼

No. Use {#* comment text *#} for comments inside JSX because {/* */} parses as Jac operators, and use Python-style True, False, and None instead of true, false, and null.

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-styling

Implements Tailwind v4 setup, conditional classes, cn() utility, and scoped CSS for Jac client components.

Community
Intermediate
nthplusionthplusio

shadcn-dev

Configures and scaffolds shadcn/ui in React projects with Tailwind CSS v4.

Official
Intermediate