bem-scss
BEM SCSS (Nested + Toolbox)
Quando usar
- Criar ou atualizar estilos SCSS de componentes.
- Refatorar estilos para padronizar em BEM com nesting estrito.
- Garantir acesso a tokens e variáveis via toolbox.
- Aplicar regras somente em estilos de componentes Angular (.scss +.html).
- Usar junto com a skill
angular-standardsquando a tarefa Angular envolver SCSS de componente ou classes no template.
Objetivo
- Aplicar BEM com nesting estrito para blocos, elementos e modificadores.
- Manter o escopo previsível e consistente entre HTML e SCSS.
- Garantir que todo arquivo SCSS comece com o import do toolbox.
- Limitar nesting a no máximo 4 níveis encadeados.
- Usar tokens, variáveis e CSS variables do sistema, evitando valores fixos.
- Manter a estrutura ITCSS (triângulo invertido de especificidade).
- Criar estilos sob demanda do HTML e remover estilos não usados.
More from hebertpaziam/skills
typescript-standards
Apply TypeScript design standards when creating or refactoring functions, methods, classes, modules, or shared contracts (interfaces, types, enums). Trigger for: typing decisions, domain modeling, architecture design (boundaries, DI, composition, API design), and design principles (SOLID, GoF, KISS, YAGNI, LIFT). Do NOT trigger for routine component edits already covered by framework-specific skills (angular-standards, vue-standards).
11git-commit
Execute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping
9angular-standards
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling. Enforces project conventions including LIFT principle, OnPush, inject(), signal-first state, BEM/SCSS standards, and opinionated testing rules.
7openspec-propose
Proponha uma nova change do OpenSpec e gere todos os artifacts em uma etapa. Use quando o usuário quiser descrever rapidamente o que quer construir e sair com proposal, design, specs e tasks prontas para implementação.
4openspec-explore
Entre em explore mode do OpenSpec para explorar ideias, investigar problemas e esclarecer requisitos. Use quando o usuário quiser pensar antes ou durante uma change.
4react-standards
Boas práticas de performance para React e Next.js, baseadas no guia da Vercel e adaptadas ao projeto. Use em criação, revisão e refatoração de código React/Next.js.
4