Claude skillsfor frontend
The 7 skills and connectors we'd install first, in order. Hand-picked from developers tools reviewed on SkillHub.
Frontend
7 picks · install in this orderBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility…
- React Best PracticesSkill
React and Next.js performance optimization guidelines from Vercel Engineering.
React composition patterns that scale and avoid boolean prop proliferation.
- next-devtools-mcpConnects to Next devtools
Next.js development tools MCP server with stdio transport
- Magic MCP (21st.dev)Connects to Magic
AI-driven UI component generation with a modern React/Tailwind component library.
- Figma Dev Mode MCPConnects to Figma Dev Mode
Figma's official MCP server exposing design structure, auto-layout, and styles to AI coding agents.
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements).
Run the whole chain in Claude
Bug report to merged PR in one chain
Turn a Linear bug ticket into a tested fix on main without hunting through dashboards.
- Linear MCP Server
- GitHub MCP Server
- Debugging And Error Recovery
- Playwright MCP Server
- Sentry MCP Server
Ship a feature end-to-end with Claude Code
From an empty repo branch to a deployed preview link with passing tests and a clean PR description.
- Context7
- Test Driven Development
- Supabase MCP Server
- Vercel Deploy
- GitHub MCP Server
Harden a feature before release
Review a change for security issues, check dependencies and test it in a real browser before it ships.
- Security And Hardening
- Differential Security Review
- Cve MCP Server
- Web App Testing
- Shipping And Launch
Built something for developers?
We're actively curating this list. If your skill or MCP server belongs here, submit it and we'll review within a few days.
Submit yours