Skip to main content

​
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
https://better-styled.com/skill.md

​
Why skill.md?

FilePurpose
llms.txtDirectory - where to find information
skill.mdCapability summary - what actions are possible
AI agents process skill.md to understand your product’s capabilities before taking actions.

​
What’s Inside

The skill.md includes: 
name: better-styled
description: Create type-safe styled components with variants...
license: MIT
compatibility: React, React Native, TypeScript, Tailwind CSS
  • Variant-based components
  • Context propagation (parent → child variants)
  • Compound components with slots
  • React Native with NativeWind/Uniwind
Complete code examples for:
  • styled() - creating components
  • createStyledContext() - variant propagation
  • withSlots() - compound components
  • Utility functions
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: 
Use the skill.md at https://better-styled.com/skill.md
to create a Button component with size variants.

​
With Cursor / Copilot

Add to .cursorrules or .github/copilot-instructions.md: 
When working with better-styled:

1. Import from "better-styled"
2. Use styled() for creating components
3. Use createStyledContext() for variant propagation
4. Use withSlots() for compound components
5. Never use React.FC - use arrow functions
6. Types are inferred automatically - don't add manual types

Reference: https://better-styled.com/skill.md

​
With Context7

better-styled is indexed by Context7, allowing AI tools to fetch up-to-date documentation automatically. 
@context7 how do I create a Button with better-styled?

​
Tips for AI Assistants

When components have children that should inherit variants (like Button with Icon), use createStyledContext().
Instead of exporting CardRoot, CardHeader, CardBody separately, use withSlots() to create Card.Header, Card.Body.
TypeScript infers variant types automatically. Don’t add manual type annotations unless needed.
// Correct
const Button = ({ children }: ButtonProps) => { ... }

// Incorrect
const Button: React.FC<ButtonProps> = ({ children }) => { ... }

Next: MCP Server

Real-time documentation access