AI Skill
Give your AI coding agent full knowledge of the SolanaUI component library
The SolanaUI skill gives AI coding agents (Claude Code, Cursor, Windsurf, Codex, and 37+ others) complete knowledge of the component library -- all 30 components with full TypeScript prop interfaces, composition patterns for common Solana app layouts, and token image CDN URLs.
Once installed, your agent can generate production-quality Solana app UIs using the SolanaUI component library without any additional context or prompting.
Install
npx skills add chambaz/solanauiThis auto-detects your installed agents (Claude Code, Cursor, Codex, etc.) and installs the skill into the correct location for each one. For Claude Code, it goes into .claude/skills/.
Copy the SKILL.md file from the SolanaUI repository root into your project's .claude/skills/solanaui/SKILL.md directory.
The skill file should be committed to your repository so all team members and CI environments have access to it.
What's Included
The skill provides your agent with:
- 30 component definitions with full TypeScript prop interfaces
- Composition patterns for building common Solana app layouts (swap interfaces, perps trading pages, lending dashboards, liquidity pools, NFT marketplaces, token portfolios, DeFi stats dashboards, staking pages)
- Available shadcn/ui primitives so the agent knows which base components are installed
- Token image CDN URLs for SOL, USDC, BONK, JitoSOL, mSOL, ETH, and NFT placeholders
- Styling guidelines for theme-compatible colors and responsive layouts
Spec Compliance
The skill follows the Agent Skills specification (originally developed by Anthropic):
- YAML frontmatter with
nameanddescriptionfields - Under 500 lines for optimal context efficiency
- Third-person description with trigger keywords
- Progressive disclosure structure
Try It Live
Head to the AI Builder on the home page to test the skill in action. Describe any Solana app UI and watch it generate a complete, working interface using SolanaUI components.