I want to build a web frontend
Skills for layout, components, and accessibility, with servers for frameworks and hosts. Your agent builds web pages to your design system specs.
MCP servers for this
- MCP server
Figma-Context-MCP
Figma
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
16kActive- Runs locally
- API key
Setup documented for Cursor- MCP server
- Official
Dembrandt
Dembrandt
Design tokens from any live site: colours, type, spacing, components, drift against a baseline.
3.9kActive- Runs locally
- API key
Setup documented for Claude Code, VS Code (GitHub Copilot), Cursor, Windsurf- MCP server
Agent-Native Slides
Agent-Native
Agent-Native Google Slides - generate and edit React presentations
7.5kActive- Remote
- MCP server
Front-End Checklist
Review frontend code and live pages against 386 quality-gated web development rules.
75kActive- Remote
- MCP server
- Official
ShipSwift
SignerLabs
40+ production-ready SwiftUI recipes for building full-stack iOS apps via MCP.
3.2kActive- Remote
- No auth
- Freemium
Setup documented for Claude Code, VS Code (GitHub Copilot), Cursor, Gemini CLI and 1 more- MCP server
TypeUI
TypeUI
Design systems, UI prompts, and layout variations for AI coding tools.
2.2kActive- Remote
- No auth
Setup documented for VS Code (GitHub Copilot), Codex, Cursor, Claude Desktop and 4 more- MCP server
Arc UI
React components and blocks with motion. Search docs, props and shadcn install commands.
1kActive- Remote
- API key
Setup documented for Claude Code- MCP server
webcomponents-react-mcp-server
MCP server for UI5 Web Components for React - Developer documentation and API assistance
543Active- Runs locally
Setup documented for Claude Code, VS Code (GitHub Copilot)- MCP server
storybook
Storybook
Storybook addon for MCP-powered UI development workflows.
91kActive- Runs locally
- No auth
Setup documented for Claude Code- MCP server
shadcn-ui-mcp-server
GitHub
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.
3.1kActive- Runs locally
- API key
- Free
Setup documented for Claude Code, VS Code (GitHub Copilot), Cursor, Claude Desktop and 1 more- MCP server
inspo
Real production websites for coding agents: palettes, fonts, fold autopsies and reference JSX.
941Active- Runs locally
- Remote
- API key
Setup documented for Claude Code- MCP server
Svelte MCP
The official Svelte MCP server providing docs and autofixing tools for Svelte development
335Active- Runs locally
- Remote
- MCP server
magic-mcp
21st
Or add it manually — it is a plain HTTP MCP server:
6.3kActive- API key
Setup documented for Claude Code, VS Code (GitHub Copilot), Codex, Cursor and 1 more- MCP server
Accessibility Agents
WCAG 2.2 scanners for web pages, Office, PDF, ePub and Markdown: contrast, axe, veraPDF and more.
429Active- Runs locally
Setup documented for Claude Code, VS Code (GitHub Copilot), Claude Desktop- MCP server
squirrelscan
Website QA for your coding agent: audit SEO, performance, security, accessibility over MCP.
298Active- Remote
Setup documented for Claude Code, Codex, Cursor, OpenCode- MCP server
color-space
Conversions across 221 color spaces, tested against cited sources: CSS strings, gamut, LUTs
391Active- Runs locally
Setup documented for Claude Code, VS Code (GitHub Copilot), Claude Desktop- MCP server
StyleKit
MCP server for StyleKit styles, tokens, recipes, lint and repair over stdio or HTTP.
687Active- Runs locally
- Remote
Setup documented for Claude Code, Cursor, Claude Desktop- MCP server
CloudBase-AI-ToolKit
Tencent Cloud
AI writes the code. CloudBase runs the backend.
1.2kActive- Runs locally
- Remote
- API key
- OAuth
Setup documented for Claude Code, Codex, Cursor, Gemini CLI and 1 more- MCP server
Keyline Icons
Search Keyline Icons by name and get any icon's SVG source or React import. No key, no network.
184Active- Runs locally
Setup documented for Claude Code- MCP server
melta UI
AI-Ready design system MCP: melta UI tokens, component contracts, 107 rules, check_html self-verify
202Active- Runs locally
Setup documented for Claude Code, Cursor- MCP server
affectUI
Search, read and install agent-ready React components, screens and blocks for AI products.
350Active- Remote
- API key
Setup documented for Claude Code- MCP server
microcharts
Find, wire, and render microcharts — word-sized React charts with generated alt text.
205Active- Runs locally
Setup documented for Cursor, Claude Desktop- MCP server
Cap Js MCP server
Model Context Protocol (MCP) server for AI-assisted development of CAP applications.
117Active- Runs locally
Setup documented for Claude Code, VS Code (GitHub Copilot), Codex, OpenCode- MCP server
HIG Doctor
Apple Human Interface Guidelines search, lookup, and project audits for AI coding agents.
148Active- Runs locally
Setup documented for Claude Desktop
Skills for this
- Skill
- Official
free-tools
Corey Haines
When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "free tool," "marketing tool," "calculator," "generator," "interactive tool," "lead gen tool," "build a…
57kActive- No scripts
- Works offline
- Skill
- Official
- Featured
frontend-design
Anthropic
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
184kActive- Plugin
- Works offline
- Skill
- Official
web-artifacts-builder
Anthropic
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
184kActive- Plugin
- Works offline
- Skill
ui-ux-pro-max-skill
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
142kActive- Bundles scripts
- Needs network
Setup documented for Claude Code, Cursor, Windsurf- Skill
taste-skill
· A design engineering magazine by
104kActive- No scripts
- Needs network
Setup documented for Claude Code, Codex- Skill
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than…
31kSlow- Bundles scripts
- Works offline
- Skill
markstream-install
Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, or markstream-svelte into an existing repository. Use when Codex needs to choose the right package, install the smallest framework-specific peer-dependency set, fix CSS/reset order, choose Vue 3 renderer mode…
3kActive- No scripts
- Works offline
Setup documented for Codex- Skill
threejs-skills
CloudAI-X
Skill files that give Claude Code current, verified knowledge of three.js, so the code it writes runs on the release you actually install.
3.8kActive- No scripts
- Works offline
Setup documented for Claude Code- Skill
oil-ui
Oil-ui
设计、改进和评审网站、App、后台与组件的界面：探索设计方向、生成多风格同屏对比页，并基于真实截图打磨视觉层级；按请求交付对比页、设计说明、设计稿或可运行界面。只负责设计判断，不用于纯业务逻辑、接口构建、无界面变化的代码整理，或改法已完全明确的日常修改（如改文案、调数量、删指定元素、复用现有样式，哪怕带有“优化”字样）。已安装 oil-ui-pro 时交给 oil-ui-pro。
2.4kActive- Bundles scripts
- Works offline
- Skill
- Official
cypress-skill
TestMu AI
Generates production-grade Cypress E2E and component tests in JavaScript or TypeScript. Supports local execution and TestMu AI cloud. Use when the user asks to write Cypress tests, set up Cypress, test with cy commands, or mentions "Cypress", "cy.visit", "cy.get", "cy.intercept". Triggers on…
381Active- Bundles scripts
- Skill
- Official
jest-skill
TestMu AI
Generates Jest unit and integration tests in JavaScript or TypeScript. Covers mocking, snapshots, async testing, and React component testing. Use when user mentions "Jest", "describe/it/expect", "jest.mock", "toMatchSnapshot". Triggers on: "Jest", "expect().toBe()", "jest.mock", "snapshot test"…
381Active- No scripts
- Skill
swiftui-expert-skill
Add expert SwiftUI Best Practices guidance to your AI coding tool (Agent Skills open format).
3.8kActive- Skill
ddd
NeoLabHQ
Code quality framework that embeds Clean Architecture, SOLID principles, and Domain-Driven Design patterns into your development workflow through persistent rules and contextual commands.
1.8kActive- No scripts
- Works offline
Setup documented for Claude Code- Skill
software-architecture
Hand-crafted Claude Code Skills focused on improving agent results quality. Compatible with OpenCode, Cursor, Antigravity, Gemini CLI, and others. Includes CodeRabbit open-source alternative.
1.8kActive- Skill
- Official
react-email
Resend
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters…
207Active- No scripts
- Skill
anydesign
Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar, card, illustration) into an element.md with a rebuild or image-generation prompt. Use when the user wants to document, replicate, audit or…
232Active- Bundles scripts
- Skill
reimagine-it
▶ 39-second walkthrough — silent screen capture of the playground: paste HTML → Auto draws three directions → pick one → download the standalone artifact.
212Active- Bundles scripts
Setup documented for Claude Code