
Manages Keystone UI components and projects — adding, searching, fixing, debugging, styling, and composing UI built on Tailwind CSS v4 + Base UI. Provides project context, component docs, and usage examples. Applies when working with Keystone UI, @keystoneui/react, components.json with @keystoneui/* registries, or any project with @keystoneui/react in its dependencies. Also triggers for "keystoneui add", "find a Keystone UI example", or "switch to Keystone UI".
Use this agent to run a systematic audit of the Keystone UI codebase against all project skills and rules. This covers component architecture, design tokens, documentation quality, React performance, and animation patterns. Use before releases, after large refactors, or periodically to catch drift. Triggers on keywords like audit codebase, check compliance, review practices, pre-release check, quality audit, scan for violations, check conventions.
Use this agent to create or update technical documentation for Keystone UI components, features, or guides. This includes Storybook stories in /apps/storybook/stories/ and (future) Fumadocs MDX documentation. The agent follows Keystone UI's documentation standards emphasizing brevity, accuracy, and practical code examples. Triggers on keywords like write documentation, create story, new component docs, write stories, document component, add storybook story, update docs, create guide.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Use this agent to review, improve, or curate documentation files for Keystone UI. This includes Storybook stories in /apps/storybook/stories/ and (future) MDX documentation. The agent verifies accuracy against component source, ensures completeness of variant/state coverage, improves code examples, and maintains consistency with Keystone UI patterns. Triggers on keywords like review stories, improve documentation, curate docs, audit stories, check documentation quality, story review, docs review.
--- name: web-animation-design description: Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, b