nolly-studio/components-build-skill
Overview
This skill helps you build modern, composable, and accessible React UI components following the components.build specification. I provide guidelines, patterns, and concrete recommendations for component APIs, composition, accessibility, styling, and TypeScript types. Use it when creating, reviewing, or refactoring reusable component libraries and design systems.
How this skill works
I inspect component design tasks and recommend concrete changes based on the specification: composition roots and subcomponents, accessibility semantics and keyboard behavior, controlled/uncontrolled state patterns, polymorphic APIs, and styling conventions (Tailwind, CVA, cn). I surface best practices, common pitfalls, and sample patterns you can apply directly to your code. When requested, I produce example code snippets, prop interfaces, and checklist items for testing and publishing.
When to use it
- Creating new React components or a component library
- Designing or reviewing component APIs and prop types
- Implementing accessibility (ARIA, keyboard, focus management)
- Refactoring components for composition and polymorphism
- Standardizing styling with Tailwind, CVA, and cn utilities
- Preparing components for distribution or documentation
Best practices
- Favor composition over heavy configuration; break complex UI into root, item, trigger, and content primitives
- Default to accessible semantics: use proper HTML elements, ARIA roles, focus management, and live regions where needed
- Support both controlled and uncontrolled usage via a controllable state hook pattern
- Make components polymorphic with an as prop and provide TypeScript-safe typings
- Use data-state and data-slot attributes for styling hooks instead of brittle class names
- Document props with JSDoc, export prop types, and include minimal examples for each variant
Example use cases
- Create an accessible dropdown with keyboard navigation, focus trapping, and aria roles
- Refactor a Button to a polymorphic component that supports as='a' and as='button' with consistent styles
- Build a compound Tabs API with composition-root, tab triggers, and content panels using context
- Establish a design-token system using CSS variables and theme-aware styles
- Standardize variant styling with CVA and cn to ensure predictable class merging
FAQ
No. I recommend Tailwind, CVA, and a cn utility as a proven stack, but patterns are adaptable to other CSS systems and CSS-in-JS.
How do I support both controlled and uncontrolled patterns?
Expose value and defaultValue props, emit onChange, and use a useControllableState helper internally so consumers can opt into either pattern.
