Crie Interfaces Frontend Distintivas
Interfaces genéricas geradas muitas vezes parecem previsíveis e fracas. Esta skill orienta Claude, Codex e Claude Code para um design frontend distintivo e pronto para produção.
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/atman36-frontend-design.md and its manifest at https://skillstore.io/api/skills/atman36-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.
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Usando "frontend-design". Desenhe uma landing page para uma aplicação de agendamento.
Resultado esperado:
Um layout editorial distintivo com uma hierarquia tipográfica forte, um sistema de cores focado, movimento subtil, secções responsivas e verificações de acessibilidade.
Usando "frontend-design". Melhore um cartão de dashboard que parece genérico.
Resultado esperado:
Uma direção de componente refinada com espaçamento mais claro, maior ênfase nos dados, estados de hover intencionais e um estilo visual alinhado com o produto.
Usando "frontend-design". Crie uma secção hero memorável para um portefólio.
Resultado esperado:
Um conceito visual arrojado com tipografia personalizada, composição em camadas, detalhe de fundo atmosférico, dimensionamento responsivo e acabamento de produção.
All 25 static alerts are false positives caused by Markdown code fences, inline code formatting, and ordinary design terminology. The file contains frontend guidance and examples, with no shell execution, system reconnaissance, prompt injection, or other malicious intent. No security remediation is required.
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.
https://skillstore.io/skills/atman36-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/atman36-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/atman36-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>AI-Vibe-Prompts. (2026). frontend-design security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/atman36-frontend-design/audits/9@techreport{ai-vibe-prompts-atman36-frontend-design-2026,
author = {AI-Vibe-Prompts},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/atman36-frontend-design/audits/9},
note = {Author version 1.0.0}
}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: "1.0.0"
type: report
authors:
- name: "AI-Vibe-Prompts"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/atman36-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:atman36-frontend-design:audit:9"
description: "Skillstore immutable audit report identifier"
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
atman36-frontend-design
2026-09-09
frontend-design
2026-09-09
zhanlincui-frontend-design
2026-09-09
yyh211-frontend-design
2026-09-09
1bertogit-frontend-design
2026-10-13
92bilal26-frontend-design
2026-09-09
azeem-2-frontend-design
2026-09-09
am-will-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-09-09
cesaraugustusgrob-frontend-design
2026-09-09
davila7-frontend-design
2026-09-09
anthropics-frontend-design
2026-09-09
pbakaus-frontend-design
2026-09-09
7spade-frontend-design
2026-09-09
sickn33-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-09-09
ajv009-frontend-design
2026-09-09
dennisliuck-frontend-design
2026-09-09
Crie uma direção visual memorável para uma nova página de produto com tipografia, cor, layout e movimento mais fortes.
Transforme um componente frontend genérico numa interface polida que continua a cumprir requisitos de acessibilidade e responsividade.
Oriente um agente de codificação com IA para criar uma página web que pareça alinhada com um público e uma oferta específicos.
Use frontend-design to improve this page. Keep the current content, but make the visual direction clearer and more polished.
Use frontend-design to create a distinctive component for this feature. Include responsive behavior, accessible states, and refined visual details.
Use frontend-design to build a production-ready app view. Choose a bold aesthetic direction and implement layout, motion, typography, and quality checks.
Use frontend-design to audit this interface, identify generic choices, then rework it into a distinctive, accessible, and performant frontend experience.
Autor
AI-Vibe-PromptsLicença
MIT
Versão do autor
v1.0.0
Revisão da Skillstore
r2
Repositório
https://github.com/Atman36/AI-Vibe-Prompts/tree/main/.claude/skills/design/frontend-designReferência
89edfdc710d0846129dcee6a929477b04f08052c
Atualidade da manutenção
24/07/2026
Uso
11 downloads · 307 visualizações
Estrutura de arquivos
📄 SKILL.md
Otimizar o desempenho do Next.js
Aplicações Next.js podem ficar lentas devido a bundles grandes, cache fraco e mídia não otimizada. Esta habilidade orienta Claude, Codex e Claude Code em melhorias de desempenho focadas para apps em produção.
Analise Bases de Codigo com Relatorios Estruturados
Equipes precisam de uma forma rapida de entender repositorios desconhecidos antes de altera-los. Esta skill orienta Claude, Codex e Claude Code em verificacoes de estrutura, dependencias, arquitetura, qualidade e seguranca.
Crie uma Estratégia Prática de Testes
As equipes frequentemente adicionam testes sem escopo, ferramentas ou metas de cobertura claros. Esta skill fornece um plano prático para testes com Vitest, Playwright e CI.
Gerencie Fluxos de Trabalho Git com Padrões de Equipe
Equipes precisam de commits, branches e hábitos de revisão consistentes para manter o histórico legível. Esta skill oferece a Claude, Codex e Claude Code uma checklist prática de fluxo de trabalho Git.
Validar Código Antes do Lançamento
As equipes precisam de verificações repetíveis antes que o código seja commitado, enviado por push ou implantado. Esta skill orienta Claude, Codex e Claude Code por linting, verificações de tipo, testes, builds, auditorias e verificações de commit.
Projete Protótipos de UI Diferenciados
por tencentcloudbase
Interfaces genéricas de IA muitas vezes carecem de direção visual e detalhes atentos à plataforma. Esta skill orienta Claude, Codex e Claude Code a definir a intenção de design antes de criar protótipos.
Build and Refine Interfaces with Uizze
por uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
Extrair Padrões Reutilizáveis de Sistema de Design
por pbakaus
As equipes frequentemente duplicam componentes de UI, tokens e padrões de layout em uma aplicação. Esta skill ajuda Claude, Codex ou Claude Code a encontrar padrões reutilizáveis e consolidá-los em um sistema de design mantido.
Implementar React View Transitions
por vercel-labs
React view transitions são fáceis de posicionar incorretamente, resultando em animações que falham silenciosamente ou geram ruído visual. Esta skill orienta as escolhas de animação para rotas, Suspense, listas e elementos compartilhados.
Crie modelos de email em React com Resend
por resend
Criar modelos de email prontos para produção é difícil porque os clientes de email são diferentes. Esta skill orienta Claude, Codex e Claude Code no uso de componentes React Email, envio, estilização, localização e fluxos de trabalho do editor.
Melhorar práticas de Vue 3 com TypeScript
por hyf0
Projetos Vue com TypeScript frequentemente encontram erros confusos de templates, router e Volar. Esta habilidade fornece correções direcionadas de Vue 3 para Codex, Claude e Claude Code.