// Write and review jalco ui component documentation with consistent structure, concise descriptions, realistic examples, and registry-aligned metadata. Use when creating new component docs, updating existing docs, reviewing doc quality, or syncing registry-backed component copy.
| name | jalco-writing-component-docs |
| description | Write and review jalco ui component documentation with consistent structure, concise descriptions, realistic examples, and registry-aligned metadata. Use when creating new component docs, updating existing docs, reviewing doc quality, or syncing registry-backed component copy. |
Use this skill when creating, editing, or reviewing component documentation in jalco ui.
The single source of truth for docs page structure, section order, and formatting rules is:
.pi/references/docs-component-format-spec.md
The agent MUST read it before writing or updating any component docs. This skill provides workflow guidance and review steps, not a parallel format definition.
.pi/references/docs-component-format-spec.md — page anatomy, section order, writing rulesAGENTS.md — project conventions, quality bar, comment style.pi/skills/jalco-shadcn-registry/SKILL.md — for registry-backed itemsThe agent MUST also inspect:
.pi/references/docs-component-format-spec.md and this skill.app/docs/components/.ComponentDocsPage from components/docs/component-docs-page.tsx.title, description, registryName, sourceFiles, preview, usage.registry.json and lib/docs.ts.components/docs/previews/<registry-name>.tsx with key variants.lib/docs.ts with badge: "New" and badgeAdded set for new components.pnpm previews:generate if the card preview file was created or renamed.public/previews/<name>-dark.png and <name>-light.png..pi/references/docs-component-format-spec.md.These are the rules most frequently needed during docs work. For full details, see the format spec.
CodeLineVariantGrid with labeled itemsinstallNote to explain the relationshipbundledIn on the nav item in lib/docs.tsUse the checklist in .pi/references/docs-component-format-spec.md before shipping any docs page.
Key things to verify:
ComponentDocsPagecomponents/docs/previews/<registry-name>.tsxCreate, review, and document jalco ui registry items with shadcn-style ergonomics, strong variants, and docs-to-registry alignment. Use for adding jalco ui components or blocks, updating registry.json, writing component docs, reviewing API and composition quality, or navigating the jalco-ui docs and registry structure. Use proactively when working in /Users/justin/Documents/Github/jalco-ui or when the user asks to create a component, improve variants, write docs, or audit registry readiness.
The canonical standard for building React components. Covers composition, accessibility, typing, styling, state, polymorphism, asChild, data attributes, design tokens, and artifact taxonomy from the components.build specification by Hayden Bleasel and shadcn. Use for building any React component, reviewing component architecture, auditing accessibility and keyboard navigation, choosing between as/asChild, designing variant APIs with CVA, applying data-attribute-driven styling, classifying artifacts (primitive/component/block/pattern/template/utility), extending HTML types, and managing controlled/uncontrolled state. Use proactively when creating or reviewing React components, designing component APIs, building design systems, implementing keyboard navigation, adding ARIA support, structuring compound components, choosing element flexibility patterns, or applying Tailwind styling systems. Examples: - user: "Build an accessible dialog" → semantic HTML, focus trap, keyboard map, ARIA, asChild trigger - user: "Re
Build jalco ui components through a deliberate workflow: clarify requirements, judge scope and file boundaries, prefer strong default states and restrained variants, implement with shadcn-style ergonomics, and ship aligned docs. Use when the user asks to create a component, build a component, make a new UI component, add a registry component, create a docs component, add variants, refactor a component, or review public components, demos, or docs-facing UI.
Build and maintain the jalco ui shadcn-compatible registry. Use when creating or reviewing registry items, editing registry.json, choosing registry item types, configuring namespaced registries, planning authentication, adding docs metadata, or ensuring MCP/open-in-v0 compatibility.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.