feat: Chumlab UI integration — React component library skill for Next.js/React projects

[tbitcs]

Summary

Add specsmith support for Chumlab — a React UI component library (@chumlab/ui) with 30+ accessible, SSR-safe, TypeScript-native primitives for Next.js 14+, React 18+, and Tailwind CSS v4. Currently in stealth mode (GitHub repo and npm package not yet public as of 2026-05-19).

What Chumlab is

• Package: npm i @chumlab/ui — zero runtime dependencies, tree-shakeable, ~2.1 KB gzipped per component
• Components: 30+ primitives — DatePicker, InternationalPhoneInput, Table, Toast, Modal, Drawer, Combobox, OTPInput, Tabs, Accordion, and more
• Accessibility: WCAG 2.1 AA on every primitive — keyboard navigation, focus management, ARIA announcements, prefers-reduced-motion
• SSR-safe: Works in Next.js 14+ App Router and Pages Router; "use client" applied automatically on interactive components
• Theming: CSS variables (--cl-radius, --cl-accent, --cl-text), className overrides, fully unstyled variants
• AI Playground: chumlab.ai/playground — describe a component or drop a screenshot, receive production React built on Chumlab primitives in seconds
• License: MIT, open source

Architecture decision: Skill only (initially)

Why skill, not CLI or AGENTS rule

• No CLI to wrap — pure npm package plus browser-based AI Playground
• Not mandatory governance — optional tooling choice, not a governance constraint
• Skill activation: auto-match when project type is nextjs-app, web-frontend, fullstack-js, remix-app (Chumlab is React-specific)

Skill — chumlab-ui (devops or new web-frameworks domain)

Document:

• npm i @chumlab/ui
• Import pattern: import { Button, Input } from "@chumlab/ui"
• Theming: CSS variables, className overrides, unstyled mode
• Next.js App Router: SSR safety, automatic "use client" handling
• Tailwind CSS v4 integration
• AI Playground: chumlab.ai/playground — use for rapid component generation from prompts/screenshots
• Accessibility guarantees and how to test them
• Decision guide: when to use Chumlab vs. shadcn/ui, Radix UI, Chakra UI

Future: CI adapter

Once the npm package and GitHub repo go public:

• specsmith integrate chumlab scaffolds @chumlab/ui in package.json, Tailwind config, and a component smoke test
• Same pattern as specsmith integrate codity

Implementation order

1. Skill (can be written now — API surface documented on chumlab.com)
2. specsmith integrate chumlab adapter (after public launch)
3. Consider adding chumlab-ui to the nextjs-app tool/skill recommendations

Status

• Stealth mode — not yet public (2026-05-19)
• Watch https://chumlab.com for public launch announcement
• Implement the skill as soon as the package is on npm

References

• Homepage: https://chumlab.com
• AI Playground: https://chumlab.ai/playground (live soon)