cag-skills

A curated collection of AI coding skills — reusable instruction sets that give AI coding assistants deep context for specific tasks, patterns, and design systems.

Skills

| Skill | Description | | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | agent-browser | Browser automation via the agent-browser CLI — navigating pages, filling forms, scraping, testing web apps, and automating Electron desktop apps | | changi-design-language-system | Build and modify UI using the Changi Design System (components/ui, design tokens, cn(), changi-dls CLI) | | coding-style | Aron's personal React / Next.js TypeScript conventions — component structure, state management, file placement, DRY-first philosophy | | frontend-design | Distinctive, production-grade frontend interfaces — avoids generic AI aesthetics, covers all interactive and edge-case states | | skill-creator | Create, iterate, and benchmark new skills — draft → test → eval loop with quantitative benchmarks and description optimization | | ui-ux-pro-max | UI/UX design intelligence across 10 stacks — 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, 25 chart types | | vercel-composition-patterns | React composition patterns that scale — compound components, context interfaces, render props, React 19 changes | | vercel-react-best-practices | React and Next.js performance optimization from Vercel Engineering — async patterns, bundle splitting, re-render prevention | | web-design-guidelines | Review UI code for Web Interface Guidelines compliance — accessibility, layout, typography, interaction states |

Tool Support

Skills are mirrored across multiple AI coding tools so they work wherever you code:

| Folder | Tool | | ----------------- | ------------------------------------- | | .claude/skills/ | Claude Code | | .cursor/skills/ | Cursor |

Note: .claude/skills/ is the source of truth. When you add or update a skill, copy the changes to .cursor/skills/ to keep them in sync.

Installing into a Project

# Copy both .claude and .cursor
npx changi-skills add all

# Copy only .claude (Claude Code)
npx changi-skills add claude

# Copy only .cursor (Cursor)
npx changi-skills add cursor

Adding a New Skill

1. Create a folder under .claude/skills/<skill-name>/ with a SKILL.md file.
2. Use the skill-creator skill to draft, test, and iterate on the content.
3. Mirror the folder to .cursor/skills/.
4. Add a row to the Skills table in this README.