What is skill.md?
A machine-readable capability file following the agentskills.io specification. It tells AI agents:- What better-styled can do
- When to use it
- How to generate correct code
Why skill.md?
AI agents process skill.md to understand your product’s capabilities before taking actions.
What’s Inside
The skill.md includes:Metadata
Metadata
When to Use
When to Use
- Variant-based components
- Context propagation (parent → child variants)
- Compound components with slots
- React Native with NativeWind/Uniwind
Core API Examples
Core API Examples
Complete code examples for:
styled()- creating componentscreateStyledContext()- variant propagationwithSlots()- compound components- Utility functions
Code Patterns
Code Patterns
Rules for generating correct code:
- Use arrow functions (not React.FC)
- Let TypeScript infer types
- Context patterns for design systems
Using skill.md
With AI Assistants
Reference it in your prompts:With Cursor / Copilot
Add to.cursorrules or .github/copilot-instructions.md:
With Context7
better-styled is indexed by Context7, allowing AI tools to fetch up-to-date documentation automatically.Tips for AI Assistants
Always use context for parent-child relationships
Always use context for parent-child relationships
When components have children that should inherit variants (like Button with Icon), use
createStyledContext().Prefer slots over separate exports
Prefer slots over separate exports
Instead of exporting
CardRoot, CardHeader, CardBody separately, use withSlots() to create Card.Header, Card.Body.Don't add unnecessary types
Don't add unnecessary types
TypeScript infers variant types automatically. Don’t add manual type annotations unless needed.
Use arrow functions for components
Use arrow functions for components
Next: MCP Server
Real-time documentation access