React, Vue, Angular, design systems, accessibility and performance in the browser.
Frontend work rarely fails in the first week. The trouble shows up when the project already has dozens of components, three different ways of defining a button, stylesheets nobody dares to delete and a screen that stopped working with the keyboard. That is when every small change costs hours and nobody can quite explain why.
The components on this page give Claude Code interface-specific context: each framework's conventions, design token rules, WCAG criteria and rendering patterns. In practice, instead of generating yet another isolated component, the model starts following the system that already exists in the repository, justifying its state choices and flagging contrast or keyboard navigation problems before the merge.
Start with the project's framework and install just one main agent. Then add a design system skill, if the team maintains a component library, and an accessibility review, which pays off on any public site. The performance pieces are mostly worth it when there is already a concrete complaint about slowness, not as an early precaution.
21 hand-picked components, from 4 different angles.
Agents and skills that know each framework's conventions. Choose the one that matches the project's stack, not all of them.
Serves as an entry point when the team maintains applications in React, Vue and Angular at the same time and needs consistency across them, including the backend integration.
Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integrat
Covers the full path in React, Next.js, TypeScript and Tailwind, from component scaffolding to bundle analysis, useful when the project grows without written rules.
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes co
For anyone already working in React 19: modern hooks, Server Components and Actions, with attention to typing and to the performance impact of each choice.
Expert React 19.2 frontend engineer specializing in modern hooks, Server Components, Actions, TypeScript, and performance optimization
A good fit when the Vue 3 application depends on the Composition API and reactivity starts to weigh it down, or when the project is built on Nuxt 3 with scaling concerns.
Use this agent when building Vue 3 applications that require Composition API mastery, reactivity optimization, or Nuxt 3 development with enterprise-s
Designed for large Angular codebases, with complex state, RxJS patterns waiting to be optimized and micro-frontend decisions that no longer fit in a single module.
Use when architecting enterprise Angular 15+ applications with complex state management, optimizing RxJS patterns, designing micro-frontend systems, o
Handles Svelte idiomatically, with a focus on reactive programming, component design and client-side optimization.
Master Svelte.js development with a focus on building performant, maintainable, and idiomatic Svelte applications. Specializes in reactive programming
Brings together the patterns of the Next.js 14+ App Router and Server Components, useful when the question is where to draw the line between server and client.
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
Pieces for keeping the interface consistent: tokens, styles and the API of the components the team will reuse for years.
Helps produce interfaces with their own identity instead of the usual generic result, whether on a landing page, a dashboard or a single component.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, a
Brings together styles, palettes, font pairings and patterns for several stacks, which saves you deciding color, spacing and typography all over again on every new screen.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter,
Generates design tokens, component documentation and responsive layout calculations, with handoff material for whoever picks up the work on the code side.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and develo
Covers Tailwind CSS v4, configuration from the CSS itself, container queries and token architecture, especially relevant for anyone coming from earlier versions.
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
A good choice when the problem really is CSS: tricky layouts, responsive behavior, animations and stylesheets that need cleaning up.
Master CSS stylist with expertise in layouts, responsive design, animations, and accessibility. Handles complex layouts, and optimizes for performance
Compares component patterns in React, Vue and Svelte, including CSS-in-JS and composition strategies, useful when designing the public API of an internal library.
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building U
Two different things that often get confused: WCAG compliance and the perceived quality of the interface. Here you have tools for both.
Critiques the interface from screenshots or mockups, pointing out usability problems, accessibility failures and questionable aesthetic choices.
Use proactively when reviewing UI/UX design, evaluating visual interfaces, auditing web components for usability issues, checking accessibility compli
A specialist in WCAG compliance, accessibility testing and screen reader compatibility, for the audit that usually gets left until the end.
Web accessibility compliance specialist. Use PROACTIVELY for WCAG compliance audits, accessibility testing, screen reader compatibility, and inclusive
Goes beyond the report: it analyzes, fixes and verifies WCAG 2.2 levels A and AA in React, Next.js, Vue, Angular, Svelte or plain HTML, with CI/CD integration.
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plai
Reviews the interface code against a set of web guidelines, which works well as a last step before the merge when no human reviewer is available.
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "chec
For when the interface already exists and the problem has become slowness, inherited complexity or poorly tuned motion.
Brings together more than forty performance rules for React and Next.js, from data waterfalls to bundle size, which apply while you write and not just when fixing.
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.
Comes in when the application is already slow: it identifies bottlenecks, optimizes bundles and renders and hunts down memory leaks in code nobody wants to rewrite.
React performance optimization specialist. Use PROACTIVELY for identifying and fixing performance bottlenecks, bundle optimization, rendering optimiza
A connector that analyzes component hierarchies, state flows and dependencies, useful for understanding the architecture of a React application inherited from another team.
Analyze React component hierarchies, state flows, and dependencies. Visualize your React application architecture.
For pages where the scroll tells a story: scroll-linked animations, parallax and interactive storytelling, without losing sight of the performance cost.
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experienc
Each page in the Doutor AI technical library shows the category (agent, skill, command, connector) and the original file path. The rule of thumb is simple: what is specific to the project lives in the repository's .claude/ folder, so the whole team inherits the same conventions when they clone the repository; what you use in every project lives in your account's .claude/ folder. MCP connectors are the exception, because they need a configuration entry with the command that starts the server. Start by copying a single component, confirm that Claude Code invokes it in the right context and only then add the next one.
The order that usually works: a framework agent to write the code, a design system skill to keep tokens and variants consistent, an accessibility review before the merge and only then the performance pieces. Installing two React agents with different opinions about state or styling produces contradictory reviews and wastes context, so it is worth picking one and removing the other. If the interface has its own component library, say explicitly where it lives; without that reference, any of these pieces tends to create new components instead of reusing the ones that already exist in the repository.
Automated accessibility checks catch contrast, missing attributes and heading order, but they do not replace a real test with a screen reader and keyboard-only navigation. The performance skills reason about the code, they do not measure what happens on your users' devices: you still need field data. And note the versions each description assumes, whether React 19, Tailwind v4 or Angular v20, because on an older project some of the recommendations will not apply. Treat these pieces as an attentive, well-informed reviewer, not as a quality guarantee.
No. Install the one that matches the stack you work in every day. If you maintain applications in different frameworks, a multi-framework agent such as frontend-developer saves you keeping three specialists in memory; if you live inside a single framework, the dedicated specialist gives more precise answers about reactivity, state and rendering.
Components to write, run and evaluate tests with Claude Code.
READMEs, API docs, ADRs, diagrams and changelogs that do not go stale
Review diffs, catch bugs before the merge and reduce technical debt.
Prompts and resources curated from international sources, normalized and categorized: over 11 thousand. A Doutor AI bot checks the sources every day and brings in what is new.
Need a tailor-made solution?
Not sure where to start with AI in your business? Get a free assessment and a tailored plan - no commitment.
Doutor AI gives you 1,859 ready-to-copy AI prompts, by industry and in plain English - plus a complete technical library for those who want to go further.
