# 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.

- Skill: `ecnu-icalk/estiliza-o-de-nome-em-navbar-react-com-fonte-arredondada-e-c` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/estiliza-o-de-nome-em-navbar-react-com-fonte-arredondada-e-c`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/estiliza-o-de-nome-em-navbar-react-com-fonte-arredondada-e-c/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/estiliza-o-de-nome-em-navbar-react-com-fonte-arredondada-e-c

---


# 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.

## 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:
1. **Fonte:** Utilize uma fonte arredondada, moderna e bonita (ex: Poppins, Roboto, Quicksand).
2. **Cor do Texto:** A cor principal deve ser #e26512 (laranja).
3. **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.
4. **Peso da Fonte:** A fonte deve ser grossa/bem negrito (use `font-weight: bold` ou valores altos como 700).
5. **Tamanho:** O tamanho deve ser ajustado para ser chamativo e visível (ex: 24px ou maior).
6. **Contexto:** O código deve ser compatível com React e TypeScript, usando CSS Modules (ex: `styles.Nome`).
7. **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