Domínio de UI Frontend

## Visão Geral

Frontend UI Mastery agrupa três habilidades frontend de nível profissional — **frontend-accessibility**, **frontend-components** e **frontend-responsive** — em um único plugin. Juntos, eles cobrem todo o ciclo de vida da UI: construa componentes navegáveis, torne-os acessíveis a todos os usuários e adapte-os perfeitamente em todos os dispositivos. Um autor, convenções consistentes em React, Vue e Svelte.

## Início Rápido

1. Instale o plugin no seu workspace OpenClaw.
2. Ao criar uma nova UI, invoque **frontend-components** para definir componentes reutilizáveis e de responsabilidade única com props limpos e estado local mínimo.
3. Aplique **frontend-accessibility** para HTML semântico, ARIA, navegação por teclado, gerenciamento de foco e contraste de cor — depois execute uma verificação com leitor de tela para confirmar a conformidade WCAG.
4. Finalize com **frontend-responsive** para aplicar breakpoints mobile-first, containers fluidos e dimensionamento amigável ao toque para que os mesmos componentes se adaptem de celular a desktop.

## Comandos Principais

- `frontend-components` — Projete componentes React/Vue/Svelte navegáveis com interfaces claras e encapsulamento adequado.
- `frontend-accessibility` — Audite e corrija HTML semântico, ARIA, navegação por teclado e compatibilidade com leitor de tela para conformidade WCAG.
- `frontend-responsive` — Crie layouts responsivos mobile-first com media queries, unidades relativas e breakpoints padrão.

## Dicas

- Construa a estrutura do componente primeiro (`frontend-components`), depois execute imediatamente uma verificação de acessibilidade (`frontend-accessibility`) antes de adicionar estilos responsivos — corrigir acessibilidade depois é muito mais caro do que incorporá-la desde o início.
- Combine `frontend-responsive` com um teste em dispositivo real (ou emulação de dispositivo DevTools em `375px`, `768px`, `1280px`) para identificar problemas de área de toque e reflow que layouts desktop-first não capturam.
- Combine com um plugin de backend ou DB para entregar uma fatia vertical completa: o plugin de UI cuida da camada voltada para o usuário de ponta a ponta.