Estilização de Nome em Navbar React com Fonte Arredondada e Contorno
GitHub为React/TypeScript Navbar中的名称标签生成特定CSS样式，使用圆体字、橙色文字、黑色轮廓及加粗效果，兼容CSS Modules。
Trigger Scenarios
Install
npx skills add ECNU-ICALK/AutoSkill --skill Estilização de Nome em Navbar React com Fonte Arredondada e Contorno -g -y
SKILL.md
Frontmatter
{
"id": "fe7f1863-962f-4506-b220-849f07999869",
"name": "Estilização de Nome em Navbar React com Fonte Arredondada e Contorno",
"tags": [
"react",
"css",
"estilização",
"navbar",
"fonte"
],
"version": "0.1.0",
"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"
],
"description": "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."
}
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:
- 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-shadowcom 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: boldou 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 nopublic/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
Version History
- 94c47ca Current 2026-07-24 12:38
