Criar Componentes Frontend em Next.js
Equipes que usam Next.js frequentemente misturam Server Components e Client Components incorretamente. Esta skill fornece padrões reutilizáveis para componentes acessíveis, tipados e compatíveis com App Router.
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-component" from https://skillstore.io/skills/asmayaseen-frontend-component.md and its manifest at https://skillstore.io/api/skills/asmayaseen-frontend-component/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-component". Planeje uma rota de dashboard protegida em um projeto Next.js App Router.
Resultado esperado:
A resposta a identifica como um Client Component porque usa hooks e navegação. Ela inclui estados de carregamento, redirecionamento e autorização.
Usando "frontend-component". Melhore um componente de formulário para cadastro.
Resultado esperado:
A resposta separa dados do formulário, erros de validação, erros de API e estado de carregamento. Também recomenda labels acessíveis e feedback claro de envio.
Usando "frontend-component". Adicione suporte offline a uma lista de tarefas.
Resultado esperado:
A resposta propõe armazenamento IndexedDB, rastreamento de status de sincronização, recuperação online e tratamento de erros. Ela observa a necessidade de revisão de privacidade para o contexto de logging.
Reviewed 107 static findings in SKILL.md. The dynamic imports, backticks, key matches, reconnaissance matches, and same-origin fetch are documentation examples, not executable malicious behavior. No prompt injection or data-exfiltration intent was found.
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/asmayaseen-frontend-component/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-frontend-component/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/asmayaseen-frontend-component.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Asmayaseen. (2026). frontend-component security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-frontend-component/audits/8@techreport{asmayaseen-asmayaseen-frontend-component-2026,
author = {Asmayaseen},
title = {frontend-component security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/asmayaseen-frontend-component/audits/8},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-component security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Asmayaseen"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/asmayaseen-frontend-component/audits/8"
identifiers:
- type: other
value: "skillstore:asmayaseen-frontend-component:audit:8"
description: "Skillstore immutable audit report identifier"
Gere planos de componentes tipados que sigam os limites entre Server Components e Client Components.
Crie formulários, rotas protegidas, toasts, edição inline e estados de carregamento com estrutura consistente.
Verifique propostas de componentes em relação a expectativas de acessibilidade, TypeScript, Tailwind e Next.js App Router.
Use the frontend-component skill to decide whether my new Next.js component should be a Server Component or Client Component. Explain the choice.
Use the frontend-component skill to outline a TypeScript component structure for a reusable dashboard widget with props, loading state, and Tailwind classes.
Use the frontend-component skill to review this interactive component plan for WCAG 2.1 AA accessibility gaps and suggest concrete improvements.
Use the frontend-component skill to plan an advanced task list component with drag and drop, offline sync, caching, error boundaries, and privacy-conscious logging.
Autor
AsmayaseenLicença
MIT
Revisão da Skillstore
r1
Aviso de versão
O autor não declarou uma versão.
Referência
6eec4a59f63ff83440a84c18d1aef79743bc714e
Atualidade da manutenção
28/07/2026
Uso
6 downloads · 331 visualizações
Estrutura de arquivos
📄 SKILL.md
Projete Ferramentas de Agente Confiáveis
Agentes falham quando nomes de ferramentas, entradas, saídas ou erros são ambíguos. Esta skill oferece padrões práticos para descrições de ferramentas, esquemas, formatos de resposta e testes.
Depure Problemas de Software de Forma Sistemática
A correção desestruturada de bugs desperdiça tempo e pode ocultar a falha real. Esta skill orienta Claude, Codex e Claude Code por meio de uma análise de causa raiz baseada em evidências.
Melhorar a Fiabilidade do Serviço em Produção
As equipas de produção precisam de objetivos de fiabilidade claros e práticas de incidentes repetíveis. Esta skill fornece modelos de SRE para SLOs, orçamentos de erro, alertas e postmortems.
Crie interfaces shadcn/ui em Next.js
Equipes React precisam de padrões de UI consistentes que funcionem com o Next.js moderno. Esta skill fornece orientação de configuração para shadcn/ui, exemplos de componentes, validação de formulários, tabelas, sidebars e padrões de modo escuro.
Crie interfaces de chat de IA com streaming
O chat de IA em tempo real parece quebrado quando os usuários não conseguem ver o progresso, o estado da resposta ou as mudanças na interface. Esta skill oferece a Claude, Codex e Claude Code padrões para ciclos de vida de streaming, eventos de progresso, efeitos de cliente e ferramentas de cliente.
Diagnosticar Degradação de Contexto
Sessões longas de IA podem perder precisão quando o contexto cresce, entra em conflito ou inclui material que causa distração. Esta skill ajuda Claude, Codex e Claude Code a identificar padrões de degradação e escolher etapas práticas de mitigação.
Crie Recursos de Frontend Prontos para Produção
por davila7
As equipes de frontend precisam de orientações consistentes sobre React e Next.js em diferentes projetos. Esta habilidade fornece fluxos de trabalho de referência, práticas de qualidade e scripts auxiliares para análise de frontend.
Crie Aplicações Fullstack com Orientação Sênior
por alirezarezvani
Projetos fullstack frequentemente precisam de configuração consistente, escolhas de arquitetura e verificações de qualidade. Esta skill fornece scripts e referências para trabalhos com React, Next.js, Node.js, GraphQL e PostgreSQL.
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 Componentes React com Segurança de Tipos
por softaworks
O trabalho com React TypeScript frequentemente precisa de tipos precisos para eventos, hooks e rotas. Esta skill fornece padrões focados para componentes tipados, APIs do React 19 e roteamento.
Otimize o Desempenho de React e Next.js
por vercel-labs
Aplicativos React e Next.js frequentemente perdem velocidade por causa de waterfalls, bundles grandes e re-renderizações evitáveis. Esta skill oferece aos agentes regras concretas para mudanças mais seguras com foco em desempenho.
Crie Aplicações Modernas com React e Next.js
por sickn33
Projetos React e Next.js frequentemente precisam de escolhas de configuração consistentes em roteamento, componentes, estilização, dados, formulários, testes e implantação. Esta habilidade oferece ao Claude, Codex e Claude Code um fluxo de trabalho baseado em fases para planejar e criar aplicações frontend modernas.