Rodrigos-dev Angular UI Implementation
Descrição
Skill para implementar interfaces Angular (HTML/SCSS).
Quando Usar
- Criar templates
- Implementar estilos
- Garantir responsividade
Fluxo Obrigatório
- Ler ANGULAR_CONVENTIONS.MD (se existir)
- Analisar padrão visual existente
- Implementar HTML semântico
- Implementar SCSS Mobile First
- Garantir acessibilidade
- Ler regras na pasta rules(global e ou local) e seguir com muita seriedade,
HTML Semântico
Preferir
- header, main, footer
- section, article, aside
- nav, figure, figcaption
- form, fieldset, legend
- button, label, dialog
Evitar
- Excesso de divs
- Elementos não semânticos
- span clicável
- div como botão
Acessibilidade
Obrigatório
- aria-label quando necessário
- Labels em campos
- alt em imagens
- Navegação por teclado
- Focus visível
Proibido
- Interfaces inacessíveis
- Remover outline sem substituir
- Contraste insuficiente
SCSS
⚠️ REgra CRÍTICA: SEMPRE usar SCSS regular
NÃO usar: CSS modules, CSS-in-JS, styled-components, Tailwind, ou qualquer outro método de estilização.
SEMPRE usar: Arquivos .scss normais com seletores globais e BEM.
Organização
- Variáveis locais
- Host
- Layout
- Componentes
- Estados
- Media Queries
Preferir
- Flexbox / Grid
- Gap ao invés de margin
- clamp() para responsivo
- variáveis CSS
Evitar
- !important
- Float
- Nesting profundo (>3)
- Seletores específicos
Responsividade
- Mobile First (sempre)
- Breakpoints: mobile → tablet → desktop → wide
- Usar rem/em/% ao invés de px
Angular Templates
- @if / @for / @switch
- track obrigatório em @for
- Sem lógica complexa no HTML
- Preferir computed/signals
Saída
Arquivos .html e .scss seguindo padrão do projeto.