creating-styled-wrappers
CommunityStyle wrappers that compose base components.
Software Engineering#react#composition#design-systems#component-refactor#headless-components#styled-wrappers#base-primitives
AuthorSri-Krishna-V
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Styled wrappers enable composing base, headless primitives into opinionated, design-system-enabled components, reducing duplication during refactors and accelerating UI polish.
Core Features & Use Cases
- Compose base primitives with wrappers to apply styling and behavior without reimplementing logic.
- Guide refactors from headless components to styled layers in React projects, ensuring consistency across modules.
- Use case: refactor a MessageInput-like component to wrap a base input with styling and a controlled API while preserving behavior.
Quick Start
Wrap a headless base component with a styled wrapper to apply your design-system styling and behavior in one pass.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: creating-styled-wrappers Download link: https://github.com/Sri-Krishna-V/Derived-WMD/archive/main.zip#creating-styled-wrappers Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.