Habilidades frontend-design

📦

frontend-design

Name: frontend-design
Author: davila7

Revisão do conteúdo r2 Seguro

Criar Interfaces Frontend de Nível de Produção

As equipes frequentemente precisam de trabalho frontend que seja funcional, mas também visualmente distinto. Esta skill orienta Claude, Codex e Claude Code a criar interfaces polidas com uma direção estética clara.

Suporta: Claude Codex Code(CC)

🥉 79 Bronze

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do agente

Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/davila7-frontend-design.md and its manifest at https://skillstore.io/api/skills/davila7-frontend-design/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.

Detalhe em Markdown GET /skills/davila7-frontend-design.md manifest assinado GET /api/skills/davila7-frontend-design/manifest lockfile assinado GET /api/skills/davila7-frontend-design/lockfile

Testar

Usando "frontend-design". Uma landing page para um produto boutique de analytics.

Resultado esperado:

Um conceito de página responsiva com direção visual marcante, seções estruturadas, escolhas de tipografia, sistema de cores e notas de implementação.

Usando "frontend-design". Um dashboard existente parece genérico.

Resultado esperado:

Um plano de redesign com hierarquia mais forte, layout de informação mais denso, espaçamento melhorado, estados refinados e uma abordagem de implementação correspondente.

Usando "frontend-design". Um componente React precisa de estilo com qualidade de produto.

Resultado esperado:

Uma direção de componente polida com orientação de layout, detalhes de interação, comportamento responsivo e estrutura CSS para implementar.

Auditoria de segurança

Seguro

v9 • 23/07/2026 Abrir o relatório versionado

All three static findings are false positives. Their cited lines contain frontend design guidance and do not request system reconnaissance or unsafe actions.

Arquivos analisados

221

Linhas analisadas

Itens de revisão

Falsos positivos ignorados

A auditoria estática e semântica concluída mais recente não detectou achados de segurança confirmados. Isso não comprova que a skill não tenha efeitos colaterais.

Auditado por: codex Ver histórico de auditoria →

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.

Abrir o relatório versionado

Copiar link do relatório

https://skillstore.io/skills/davila7-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/davila7-frontend-design/security.svg)](https://skillstore.io/skills/davila7-frontend-design?utm_source=security_passport_badge)

Badge HTML

<a href="https://skillstore.io/skills/davila7-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/davila7-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Cartão incorporável

<iframe src="https://skillstore.io/embed/skills/davila7-frontend-design.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

davila7. (2026). frontend-design security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/davila7-frontend-design/audits/9

Citação BibTeX

@techreport{davila7-davila7-frontend-design-2026,
  author = {davila7},
  title = {frontend-design security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/davila7-frontend-design/audits/9},
  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: "frontend-design security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "davila7"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/davila7-frontend-design/audits/9"
identifiers:
  - type: other
    value: "skillstore:davila7-frontend-design:audit:9"
    description: "Skillstore immutable audit report identifier"

Comparar variantes

18 variantes instaláveis

Cada autor permanece como um skill instalável separado. A variante recomendada é classificada pelas evidências do Skillstore.

Por que esta variante está em primeiro

Maior pontuação do Skillstore

Autor / fonte Pontuação do Skillstore Confiança das evidências Uso no Skillstore Atualizado

AI-Vibe-Prompts Recomendado

atman36-frontend-design

Pontuação do Skillstore 81

Confiança das evidências Alto

Uso no Skillstore 43

Atualizado

2026-09-09

anthropics

frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 474

Atualizado

2026-09-09

ZhanlinCui

zhanlincui-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 372

Atualizado

2026-09-09

YYH211

yyh211-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 210

Atualizado

2026-09-09

1bertogit

1bertogit-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 193

Atualizado

2026-10-13

92Bilal26

92bilal26-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 27

Atualizado

2026-09-09

Azeem-2

azeem-2-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 21

Atualizado

2026-09-09

am-will

am-will-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 21

Atualizado

2026-09-09

AdamAugustinsky

adamaugustinsky-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 21

Atualizado

2026-09-09

CesarAugustusGroB

cesaraugustusgrob-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 17

Atualizado

2026-09-09

davila7 Atual

davila7-frontend-design

Pontuação do Skillstore 79

Confiança das evidências Alto

Uso no Skillstore 12

Atualizado

2026-09-09

anthropics

anthropics-frontend-design

Pontuação do Skillstore 78

Confiança das evidências Alto

Uso no Skillstore 133

Atualizado

2026-09-09

pbakaus

pbakaus-frontend-design

Pontuação do Skillstore 78

Confiança das evidências Alto

Uso no Skillstore 89

Atualizado

2026-09-09

7Spade

7spade-frontend-design

Pontuação do Skillstore 78

Confiança das evidências Alto

Uso no Skillstore 47

Atualizado

2026-09-09

sickn33

sickn33-frontend-design

Pontuação do Skillstore 78

Confiança das evidências Alto

Uso no Skillstore 28

Atualizado

2026-09-09

AgentWorkforce

agentworkforce-frontend-design

Pontuação do Skillstore 78

Confiança das evidências Alto

Uso no Skillstore 20

Atualizado

2026-09-09

AJV009

ajv009-frontend-design

Pontuação do Skillstore 78

Confiança das evidências Alto

Uso no Skillstore 14

Atualizado

2026-09-09

DennisLiuCk

dennisliuck-frontend-design

Pontuação do Skillstore 76

Confiança das evidências Alto

Uso no Skillstore 8

Atualizado

2026-09-09

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Alto

Arquitetura

Manutenibilidade

Conteúdo

Comunidade

Conformidade com a especificação

O que você pode criar

Lançar uma Página de Produto

Criar uma landing page distintiva com layout, tipografia, cor e movimento polidos para um novo produto.

Refinar um Dashboard de Aplicativo

Melhorar um dashboard existente com hierarquia mais forte, espaçamento, estados de interação e consistência visual.

Criar um Componente Frontend

Gerar um componente React ou HTML/CSS polido que corresponda a uma direção estética clara.

Teste estes prompts

Criar uma Página Simples

Crie o design de um site de página única para [product]. Use HTML, CSS e JavaScript. Torne-o responsivo, polido e fácil de percorrer visualmente.

Estilizar um Componente Existente

Melhore o design visual deste [component]. Mantenha o comportamento atual, mas refine layout, tipografia, cor, espaçamento e estados.

Criar um Dashboard Temático

Crie um dashboard para [audience] que acompanhe [metrics]. Escolha uma direção estética distinta e implemente componentes de UI responsivos.

Criar um Sistema Frontend Completo

Crie o design e implemente uma interface com várias seções para [app]. Inclua navegação, estados, movimento, notas de acessibilidade e um sistema visual coeso.

Boas práticas

Forneça público, objetivo do produto, restrições de marca e framework necessário antes de pedir a implementação.
Peça estados responsivos, estados vazios, estados de carregamento e considerações de acessibilidade quando forem relevantes.
Revise a UI gerada em um navegador e itere em espaçamento, contraste e movimento.

Evitar

Não peça um design moderno genérico sem contexto ou detalhes sobre o público.
Não aceite efeitos decorativos que prejudiquem legibilidade, acessibilidade ou desempenho.
Não ignore a verificação em viewports de desktop e mobile.

Perguntas frequentes

O que esta skill ajuda a criar?

Ela ajuda a criar páginas web, dashboards, componentes, landing pages e refinamentos de interface com forte direção visual.

Quais ferramentas podem usá-la?

Ela é compatível com Claude, Codex e Claude Code.

Ela inclui assets prontos?

Não. Ela fornece orientação de design e implementação, mas o agente deve criar ou obter assets durante a tarefa.

Ela funciona com React?

Sim. Ela oferece suporte a componentes React e também pode orientar trabalho frontend com HTML, CSS, JavaScript, Vue ou similares.

Ela substitui a revisão de design?

Não. A revisão humana ainda é necessária para adequação à marca, acessibilidade, comportamento no navegador e requisitos do produto.

Ela executa comandos ou acessa segredos?

Não. O texto da skill contém apenas orientação e não inclui scripts, chamadas de rede nem comandos externos.

Detalhes do desenvolvedor

Autor

davila7

Licença

Complete terms in LICENSE.txt

Revisão da Skillstore

Aviso de versão

O autor não declarou uma versão.

Repositório

https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/frontend-design

Referência

c43861a65bb95efcae259cd161c9d6f4dc7eec6f

Atualidade da manutenção

26/07/2026

Uso

8 downloads · 258 visualizações

Estrutura de arquivos

📄 LICENSE.txt

📄 SKILL.md