Frontend Development
The essential frontend stack. React patterns and intentional design — both skills activate simultaneously so every component is architecturally sound, performant, and visually distinctive. Next.js conventions come from the framework itself on 16.3+, which generates version-matched agent rules from its bundled docs. No MCP servers needed.
Skills
React Best Practices
Modern React patterns, hooks, composition strategies, and performance optimization.
npx skills add vercel-labs/agent-skills@vercel-react-best-practicesFrontend Design
Bold, intentional UI design — solves the 'AI slop' problem with unique palettes and layouts.
npx skills add anthropics/skills@frontend-designSetup
Run these commands in your project directory. Each skill adds a SKILL.md file that your AI agent reads automatically.
npx skills add vercel-labs/agent-skills@vercel-react-best-practices
npx skills add anthropics/skills@frontend-designAsk your AI agent to build a component or page. Both skills activate simultaneously — React patterns shape the structure and frontend design drives the visual decisions; on Next.js 16.3+ the framework's own generated rules cover App Router conventions.
Use Cases
- React component libraries
- Marketing and landing pages
- Next.js web applications
- Design system implementation
Get new workflows in your inbox. Skills and MCP servers combined for a whole job, one a week. See a past issue.