Core Idea
The author's design philosophy, what sets this apart from peer projects, and quick notes on the key workflows. Skill names mentioned in the text auto-link to their detail pages.
This skillset extends AI coding agents with Vercel-centric and frontend best-practice skills following the Agent Skills format. It is modular (each skill handles one domain) and model-triggered (agent auto-loads on relevant tasks).
react-best-practices / web-design-guidelines / writing-guidelines: review code, UI, docsreact-view-transitions, composition-patterns, react-native-skills: React/RNA patternsInstall via npx skills add, then agent uses skills automatically when tasks like "deploy my app" or "review UI" are detected. No manual invocation required.
Skill Relationships
Skill → Skill usage relationships, with cross-layer references. Same color blocks indicate the same skill form.
Skill Composition
Each skill is designed for a specific kind of caller — some only fire when you name them, others load automatically when the model judges them relevant. The split below summarises both modes at a glance.
These skills only fire when you call them by name. The agent will not load them on its own — they stay inert until invoked.
These skills are loaded automatically by the agent when it judges the context relevant. You usually don't need to call them yourself.
Skill List
Deploy apps/websites to Vercel via CLI or no-auth scripts. Checks project state, picks method (git push, vercel deploy, link, fallback), always previews unless asked. Outputs live URL and links project to git-push deploys for long-term ease.
Deploy and manage Vercel projects via CLI using token auth without interactive login. Locates tokens from env/.env, links projects, deploys as preview by default, and manages env vars/domains. Value: secure, non-interactive CI-friendly Vercel workflows.
A style guide skill providing React composition patterns to avoid boolean prop proliferation via compound components, lifted state, and explicit variants. It helps build flexible, maintainable components, easing scaling for humans and AI agents through prioritized rules with code examples.
Use for Vercel cost and performance optimization on deployed projects (Next.js, SvelteKit, Nuxt, limited Astro). Method: collect Vercel metrics/usage/config, run deterministic gates to pick metric-backed candidates, deep-dive and produce ranked recommendations. Value: reduces bills and improves Core Web Vitals with verified, citation-backed actions.
Vercel-maintained React/Next.js performance guide with 70 rules in 8 categories. Provides prioritized best-practice patterns for waterfalls, bundling, server/client rendering, and re-renders. Helps agents write, review, and refactor code to boost speed and reduce bundle size.
A style-guide skill providing prioritized best practices for React Native and Expo apps across performance, animation, UI, and config. It offers categorized rule files with code examples and a compiled AGENTS.md, helping developers write efficient, correct native code and avoid common pitfalls.
A guide for implementing smooth native animations in React using the View Transition API. It provides component usage, CSS recipes, transition types, and ordered implementation patterns. Output is animated UI with graceful degradation and no third-party libs.
Reviews UI code for compliance with Vercel's Web Interface Guidelines. Fetches latest rules, checks user files, and outputs terse `file:line` findings. Helps ensure accessibility, UX, and design best practices in web projects.
Reviews docs and prose for compliance with Vercel writing guidelines. Fetches latest rules from a URL, checks specified files, and outputs terse file:line findings. Ensures consistent voice, tone, and style across documentation with minimal effort.