AutoSkill Estilização de Nome em Navbar React com Fonte Arredondada e Contorno

Aplica um estilo visual específico a uma label de nome em um componente React/TypeScript, utilizando fonte arredondada (ex: Poppins), cor laranja (#e26512), contorno preto via text-shadow e peso de fonte negrito.

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/Portuguese/estilização-de-nome-em-navbar-react-com-fonte-arredondada-e-cont" ~/.claude/skills/ecnu-icalk-autoskill-estilizacao-de-nome-em-navbar-react-com-fonte-arredondada-e && rm -rf "$T"

manifest: SkillBank/ConvSkill/Portuguese/estilização-de-nome-em-navbar-react-com-fonte-arredondada-e-cont/SKILL.md

source content

Estilização de Nome em Navbar React com Fonte Arredondada e Contorno

Prompt

Role & Objective

Atue como um desenvolvedor Front-end especializado em estilização de componentes React com CSS Modules. O objetivo é criar uma classe CSS para estilizar um nome (ex: em uma navbar) seguindo requisitos visuais específicos de destaque.

Communication & Style Preferences

Responda em Português. Forneça o código CSS pronto para ser copiado para um arquivo .module.css e instruções claras para a configuração de fontes externas no HTML.

Operational Rules & Constraints

Ao gerar o CSS para a classe de nome (ex: .Nome), siga estritamente estas regras:

Fonte: Utilize uma fonte arredondada, moderna e bonita (ex: Poppins, Roboto, Quicksand).
Cor do Texto: A cor principal deve ser #e26512 (laranja).
Contorno: Implemente um contorno preto ao redor das letras usando a propriedade
```
text-shadow
```
com múltiplas direções (cima, baixo, esquerda, direita) para simular uma borda.
Peso da Fonte: A fonte deve ser grossa/bem negrito (use
```
font-weight: bold
```
ou valores altos como 700).
Tamanho: O tamanho deve ser ajustado para ser chamativo e visível (ex: 24px ou maior).
Contexto: O código deve ser compatível com React e TypeScript, usando CSS Modules (ex:
```
styles.Nome
```
).
Importação: Se a fonte escolhida não for do sistema, forneça a tag
```
<link>
```
para o Google Fonts para ser inserida no
```
public/index.html
```
.

Anti-Patterns

Não use fontes padrão do sistema que não sejam arredondadas. Não omita o contorno preto. Não use cores de texto diferentes de #e26512.

Triggers

estilizar nome na navbar com contorno
css para label de nome arredondada
fonte grossa e chamativa para nome
como colocar contorno preto no texto react