Feature Request: Add llm.txt and skill.md for AI Agent Integration

[coolRoger]

Description

I would like to propose that Panda CSS adds two specific files to the repository/documentation site:

1. llm.txt - A concise, structured text file optimized for LLM consumption
2. skill.md - A comprehensive skill documentation file for AI agent frameworks

Problem Statement/Justification

Motivation

As AI coding agents (like GitHub Copilot, Claude, Cursor, etc.) become increasingly prevalent in developers' workflows, having machine-optimized documentation is becoming essential for framework adoption. Currently, Panda CSS has excellent human-readable documentation at panda-css.com, but lacks structured formats that AI agents can efficiently parse and learn from.

Why This Matters for Panda CSS

Panda CSS is a sophisticated build-time CSS-in-JS framework with several unique concepts that differ significantly from alternatives:

• Static extraction via ts-morph AST analysis
• Type-safe styling with codegen-based autocomplete
• Design tokens with W3C-compliant token spec
• Recipes & Patterns for reusable component styles
• Multi-framework support (React, Vue, Solid, Svelte, Astro)
• PostCSS-based architecture with atomic CSS generation

These concepts require precise understanding for effective usage. Without structured guidance, AI agents often generate suboptimal or incorrect Panda CSS code—such as using runtime values that can't be statically extracted , or misunderstanding the relationship between styled-system and user code .

Benefits

1. Improved Developer Experience: AI-assisted coding becomes significantly more accurate
2. Reduced Support Burden: Fewer "why isn't my style working" issues caused by AI-generated incorrect code
3. Competitive Advantage: Other modern frameworks (Tailwind, shadcn/ui) are increasingly AI-optimized
4. Community Growth: Lower barrier to entry for new users relying on AI coding tools

Proposed Solution or API

llm.txt (Repository Root)

A condensed, facts-dense file (500-1000 tokens) covering:

PANDA CSS - QUICK REFERENCE FOR LLMs

Core Philosophy:
- Build-time CSS-in-JS with zero runtime overhead
- Static analysis via ts-morph; no dynamic/runtime style values allowed
- Generates atomic CSS using PostCSS

Key Constraints (CRITICAL):
- Styles must be statically analyzable
- ❌ No runtime values: `css({ color: state })` 
- ❌ No referenced values from other files or function calls
- ✅ Only static objects: `css({ color: 'red.300' })`

Essential APIs:
- `css()` - Style objects to atomic classes
- `styled` - JSX element factory (requires jsxFramework config)
- `cva` / `sva` - Component variant APIs (recipes)
- `defineConfig` - Configuration in panda.config.ts

Configuration:
- panda.config.ts is required
- include: glob patterns for file scanning
- outdir: where styled-system is generated
- jsxFramework: 'react' | 'vue' | 'solid' | 'svelte'

Design Tokens:
- tokens: base values (colors, fonts, spacing)
- semanticTokens: theme-aware values with _dark/_light conditions
- Referenced as `{colors.red.500}` in values

Patterns:
- `stack`, `hstack`, `vstack`, `circle`, `square`, `center`
- Import from styled-system/patterns

File Structure:
- styled-system/css → css()
- styled-system/jsx → styled
- styled-system/patterns → layout patterns
- styled-system/recipes → cva/sva

skill.md (Documentation Site or .github/)

A comprehensive markdown file for AI agent frameworks, structured like:

# Panda CSS Skill

## Overview
Panda CSS is a build-time, type-safe CSS-in-JS framework that generates atomic CSS via static analysis.

## Installation & Setup
1. `npm install -D @pandacss/dev`
2. Create `panda.config.ts`
3. Add `postcss.config.js` with `@pandacss/dev/postcss`
4. Run `panda codegen` to generate styled-system

## Core Concepts

### Static Extraction Requirements
Panda uses ts-morph to parse TypeScript/JSX at build time. All styles must be:
- Literal objects
- Statically resolvable values
- In files matching the `include` glob

### Design Tokens System
- Define in `panda.config.ts` under `theme.tokens` and `theme.semanticTokens`
- Access in styles as `token(path.to.token)` or shorthand `path.to.token`
- Semantic tokens support conditional values: `{ base: '...', _dark: '...' }`

### Recipes (CVA)
For component variants with compound variants:

import { cva } from 'styled-system/css'
const button = cva({
    base: { px: '4', py: '2' },
    variants: { size: { sm: { fontSize: 'sm' }, lg: { fontSize: 'lg' } } }
})

Alternatives

No response

Additional Information

No response