# Agents and skills for frontend and interfaces

> React, Vue, Angular, design systems, accessibility and performance in the browser.

- Source: https://doutorai.pt/en/for/frontend-and-ui
- Site: Doutor AI (https://doutorai.pt/en) - AI tools for small businesses

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.

## Building the interface: frameworks and rendering

Agents and skills that know each framework's conventions. Choose the one that matches the project's stack, not all of them.

- **frontend-developer** (Agents): 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. [page](https://doutorai.pt/en/components/agents__frontend-developer)
- **senior-frontend** (Skills): 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. [page](https://doutorai.pt/en/components/skills__senior-frontend)
- **expert-react-frontend-engineer** (Agents): 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. [page](https://doutorai.pt/en/components/agents__expert-react-frontend-engineer)
- **vue-expert** (Agents): 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. [page](https://doutorai.pt/en/components/agents__vue-expert)
- **angular-architect** (Agents): 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. [page](https://doutorai.pt/en/components/agents__angular-architect)
- **svelte-expert** (Agents): Handles Svelte idiomatically, with a focus on reactive programming, component design and client-side optimization. [page](https://doutorai.pt/en/components/agents__0xfurai-subagents__agents-svelte-expert)
- **nextjs-app-router-patterns** (Skills): 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. [page](https://doutorai.pt/en/components/skills__nextjs-app-router-patterns)

## Design system, CSS and reusable components

Pieces for keeping the interface consistent: tokens, styles and the API of the components the team will reuse for years.

- **frontend-design** (Skills): Helps produce interfaces with their own identity instead of the usual generic result, whether on a landing page, a dashboard or a single component. [page](https://doutorai.pt/en/components/skills__frontend-design)
- **ui-ux-pro-max** (Skills): 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. [page](https://doutorai.pt/en/components/skills__ui-ux-pro-max)
- **ui-design-system** (Skills): Generates design tokens, component documentation and responsive layout calculations, with handoff material for whoever picks up the work on the code side. [page](https://doutorai.pt/en/components/skills__ui-design-system)
- **tailwind-patterns** (Skills): Covers Tailwind CSS v4, configuration from the CSS itself, container queries and token architecture, especially relevant for anyone coming from earlier versions. [page](https://doutorai.pt/en/components/skills__tailwind-patterns)
- **css-expert** (Agents): A good choice when the problem really is CSS: tricky layouts, responsive behavior, animations and stylesheets that need cleaning up. [page](https://doutorai.pt/en/components/agents__0xfurai-subagents__agents-css-expert)
- **web-component-design** (Skills): 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. [page](https://doutorai.pt/en/components/skills__wshobson-agents__web-component-design)

## Accessibility and interface review

Two different things that often get confused: WCAG compliance and the perceived quality of the interface. Here you have tools for both.

- **ui-ux-designer** (Agents): Critiques the interface from screenshots or mockups, pointing out usability problems, accessibility failures and questionable aesthetic choices. [page](https://doutorai.pt/en/components/agents__ui-ux-designer)
- **web-accessibility-checker** (Agents): A specialist in WCAG compliance, accessibility testing and screen reader compatibility, for the audit that usually gets left until the end. [page](https://doutorai.pt/en/components/agents__web-accessibility-checker)
- **a11y-audit** (Skills): 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. [page](https://doutorai.pt/en/components/skills__alirezarezvani-claude-skills__a11y-audit)
- **web-design-guidelines** (Skills): 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. [page](https://doutorai.pt/en/components/skills__web-design-guidelines)

## Performance, animation and reading existing code

For when the interface already exists and the problem has become slowness, inherited complexity or poorly tuned motion.

- **react-best-practices** (Skills): 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. [page](https://doutorai.pt/en/components/skills__react-best-practices)
- **react-performance-optimization** (Agents): 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. [page](https://doutorai.pt/en/components/agents__react-performance-optimization)
- **deepgraph-react** (Connectors): A connector that analyzes component hierarchies, state flows and dependencies, useful for understanding the architecture of a React application inherited from another team. [page](https://doutorai.pt/en/components/mcps__deepgraph-react)
- **scroll-experience** (Skills): For pages where the scroll tells a story: scroll-linked animations, parallax and interactive storytelling, without losing sight of the performance cost. [page](https://doutorai.pt/en/components/skills__scroll-experience)

## How to install and where to put each piece

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.

## Combining the pieces without making them compete

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.

## What these components do not solve

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.

## Frequently asked questions

### Do I need to install an agent for each framework?

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.

### What is the difference between an agent and a skill in this context?

An agent is a specialist that takes a task and works on it autonomously, with its own context, which suits audits and reviews. A skill is knowledge that Claude Code loads when the subject comes up, useful for applying style rules, tokens or patterns while you write code.

### Do these pieces impose a design on the project?

The design skills bring patterns, palettes and type scales as a starting point, not an obligation. If a design system already exists, point the model to the repository's token and component files before asking for new screens. Without that pointer, the result tends to follow the patterns the skill ships with.

### Is an accessibility audit enough to meet WCAG?

It is enough to clear the layer of most common problems and to prepare the ground. Formal compliance requires manual checks: going through the page with the keyboard only, testing with a screen reader, confirming meaningful alternative text and validating forms with real users. Automated tools show you where to look, they do not close the process.

### Does it make sense to use this on an old project with no design system?

Yes, and that is usually where there is most to gain. Start with a code analysis connector to map components and state flows, then use a design system skill to extract tokens from what already exists. The accessibility review also produces quick results on old codebases.

---
Content by Doutor AI (https://doutorai.pt/en). When quoting, please cite the source: https://doutorai.pt/en/for/frontend-and-ui