web-styling
Estilize interfaces React mais rapidamente
As equipas React repetem frequentemente decisões de estilização em vários componentes e layouts. Esta skill fornece padrões reutilizáveis de Tailwind, CSS Modules, CSS-in-JS, temas, animação e layout.
Instalar com meu Agente
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "web-styling" from https://skillstore.io/skills/cjharmath-web-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-styling/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Recursos legíveis por agentes
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Testar
Usando "web-styling". Estilize um cartão de produto responsivo com Tailwind CSS.
Resultado esperado:
Um plano de estilização mobile-first com espaçamento, tipografia, estados hover, cores de modo escuro e grupos de classes reutilizáveis.
Usando "web-styling". Crie variantes de botão principal, secundário, outline e danger.
Resultado esperado:
Uma matriz de variantes que abrange tamanhos, estados, comportamento desativado, fusão de classes e estilização de interação consistente.
Usando "web-styling". Planeie um sistema de temas para um dashboard React.
Resultado esperado:
Uma estratégia concisa de tokens para cores, espaçamento, variáveis CSS, mapeamento de modo escuro e organização de ficheiros de componentes.
Auditoria de segurança
SeguroAll static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.
Fatores de risco
⚙️ Comandos externos (42)
Compartilhar e citar este relatório
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
Copiar link do relatório
https://skillstore.io/skills/cjharmath-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportBadge Markdown
[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)Badge HTML
<a href="https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Cartão incorporável
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-styling.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citações acadêmicas (APA · BibTeX · CFF)
Citação APA
CJHarmath. (2026). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7Citação BibTeX
@techreport{cjharmath-cjharmath-web-styling-2026,
author = {CJHarmath},
title = {web-styling security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-styling/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "web-styling security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-styling/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-styling:audit:7"
description: "Skillstore immutable audit report identifier"
Pontuação do Skillstore
Por que esta pontuação Confiança das evidências: AltoO que você pode criar
Criar componentes React reutilizáveis
Crie botões, cartões, modais e primitivas de layout com variantes consistentes e classes responsivas.
Documentar um sistema de design
Padronize espaçamentos, tokens de cor, valores de modo escuro e convenções de estilização de componentes.
Entregar ecrãs de produto polidos
Aplique rapidamente padrões de estilização comprovados sem criar uma arquitetura de estilização personalizada do zero.
Teste estes prompts
Crie orientações de estilização para um componente React chamado [component]. Use Tailwind CSS, espaçamento responsivo, estados hover e suporte para modo escuro.
Reveja estes requisitos de estilização React e proponha um padrão de variantes reutilizável usando clsx, tailwind-merge ou cva. Explique quando cada opção é adequada.
Desenhe uma abordagem de temas React para [product]. Inclua tokens de cor, tokens de espaçamento, variáveis CSS, comportamento de modo escuro e organização de ficheiros.
Audite esta abordagem de estilização React quanto à facilidade de manutenção. Identifique padrões duplicados, lacunas nos tokens, problemas responsivos, preocupações de animação e passos de migração.
Boas práticas
- Use regras responsivas mobile-first e mantenha as restrições de layout explícitas.
- Centralize tokens de design, definições de variantes e valores de modo escuro.
- Use auxiliares de fusão de classes quando os componentes aceitarem substituições externas de classes.
Evitar
- Duplicar cadeias longas de classes de variantes em vários componentes.
- Misturar cores e espaçamentos arbitrários sem tokens de design partilhados.
- Adicionar animações sem regras de estado, limites de movimento ou comportamento de fallback.