skills.rest
nihalnihalani
nihalnihalaniCOMMUNITY
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#page layout#jac
One-click install
npx skills add https://github.com/nihalnihalani/jachacks-sf-2026 --skill jac-shadcn-blocks-nihalnihalani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jac-shadcn-blocks
Source: https://github.com/nihalnihalani/jachacks-sf-2026/tree/main/plugins/jac-codex/skills/jac-shadcn-blocks
Command: npx skills add https://github.com/nihalnihalani/jachacks-sf-2026 --skill jac-shadcn-blocks-nihalnihalani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent jac-shadcn pages in Jac requires remembering dozens of spacing, typography, and structural rules, and small mistakes like shorthand padding or wrong comment syntax break the Jac parser or produce inconsistent layouts. ## Core Features & Use Cases - Design System Constants: Enforces section padding scales, type scales, container wrappers, and 4-unit spacing rhythm across all pages. - Anti-Patterns Checklist: Maps common mistakes (shorthand py-, JSX comments, className on Sidebar components) to their correct Jac-safe equivalents. - Composition Skeletons: Provides ready structural patterns for auth cards, sidebar app shells, data tables, stats rows, pricing grids, CTA banners, empty states, and marketing sections. - Use Case: When asked to build a pricing page in a Jac frontend, load this Skill to get the correct 3-tier grid skeleton with bottom-aligned CTAs, popular-tier ring styling, and compliant spacing tokens. ## 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 pricing page with jac-shadcn in Jac?▼

Use the 3-tier pricing grid skeleton: a grid of Card components with flex flex-col and flex-1 on CardContent to bottom-align CTAs. Highlight the popular tier with border-primary, shadow-lg, and ring-1 ring-primary instead of scaling.

How do I create a sidebar app shell layout in jac-shadcn?▼

Wrap SidebarProvider around Sidebar and SidebarInset, with a header containing SidebarTrigger, a vertical Separator, and Breadcrumb. The main content area uses pt-6 pb-6 pl-6 pr-6 padding and no max-width constraint since the sidebar constrains width.

Why do JSX comments break in Jac frontend code?▼

Standard JSX comments like {/* */} fail because / and * parse as Jac operators inside a slot. Use the Jac comment syntax {#* comment text *#} instead, since # outside an expression slot renders as literal HTML text.

Can I pass className to Sidebar components in jac-shadcn?▼

No, passing className to any Sidebar sub-component triggers a known className spread bug that wipes the base styles. Wrap the Sidebar component in a plain div and apply classes to the wrapper instead.

What spacing values are allowed in jac-shadcn page layouts?▼

Only 4-multiple gaps are allowed: gap-2, gap-4, gap-6, gap-8, gap-12, gap-16. Cards always use p-6, and padding must use physical properties like pt-16 pb-16 rather than shorthand py-16, per the Jac codebase styling rule.

Related Skills

Explore More Software Engineering Skills→
HumanAssistedHumanAssisted

moltyjacs

Sign and verify OpenClaw agent documents with JACS crypto.

Official
Advanced
TanStackTanStack
28.3k

vue/compose-with-tanstack-form

Compose TanStack Vue Table with TanStack Vue Form for editable datagrids.

Official
Advanced
UiPathUiPath
18

apollo-prototype

Build React 19 TypeScript Tailwind CSS 4 UI mockups with Apollo Wind semantic tokens and shadcn components.

Official
Intermediate
STier-AiSTier-Ai
5

web-artifacts-builder

Create and bundle HTML artifacts with React and Tailwind CSS.

Official
Intermediate