Crie frontends Next.js com padrões modernos
Projetos Next.js modernos precisam de padrões consistentes para componentes, roteamento, busca de dados e estilização. Esta habilidade oferece a Claude, Codex e Claude Code orientações práticas de frontend para React 19 e Next.js 15.
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-dev-guidelines" from https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/0chan-smc-frontend-dev-guidelines/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-dev-guidelines". Crie uma rota de lista de produtos com estados de carregamento e erro.
Resultado esperado:
A habilidade recomendaria uma página do App Router, um arquivo de carregamento, um limite de erro, componentes de funcionalidade e busca de dados em Server Component.
Usando "frontend-dev-guidelines". Revise este plano de componente de formulário interativo.
Resultado esperado:
A habilidade verificaria requisitos de Client Component, props tipadas, validação, Server Actions, uso de Shadcn/ui e organização de classes Tailwind.
Usando "frontend-dev-guidelines". Melhore a performance de uma página de dashboard.
Resultado esperado:
A habilidade sugeriria Server Components, limites de Suspense, imagens otimizadas, gerenciamento de fontes e uso cuidadoso de hooks do cliente.
All static findings are false positives caused by Markdown formatting, placeholder example code, or JSX snippets. No prompt injection, malicious intent, credential access, command execution, or real network behavior was found in SKILL.md.
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/0chan-smc-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/0chan-smc-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/0chan-smc-frontend-dev-guidelines.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>0Chan-smc. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8@techreport{0chan-smc-0chan-smc-frontend-dev-guidelines-2026,
author = {0Chan-smc},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/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-dev-guidelines security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "0Chan-smc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:0chan-smc-frontend-dev-guidelines:audit:8"
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
briandai22-frontend-dev-guidelines
2026-09-09
0chan-smc-frontend-dev-guidelines
2026-10-11
bom-98-frontend-dev-guidelines
2026-09-09
sickn33-frontend-dev-guidelines
2026-09-09
dojocodinglabs-frontend-dev-guidelines
2026-09-09
dimon94-frontend-dev-guidelines
2026-09-09
diet103-frontend-dev-guidelines
2026-09-09
Planeje uma nova página do App Router com componentes, UI de carregamento, tratamento de erros e padrões de busca de dados.
Aplique convenções consistentes de Server Components, Client Components, TypeScript, Shadcn/ui e Tailwind CSS.
Verifique se uma funcionalidade Next.js segue práticas modernas de organização de arquivos, performance e tipagem.
Use a habilidade frontend-dev-guidelines para planejar uma página Next.js 15 para uma lista de posts com estados de carregamento e erro.
Use a habilidade frontend-dev-guidelines para decidir quais partes desta funcionalidade devem ser Server Components ou Client Components.
Use a habilidade frontend-dev-guidelines para projetar um fluxo de formulário com validação, Server Actions e componentes de formulário Shadcn/ui.
Use a habilidade frontend-dev-guidelines para revisar meu plano de funcionalidade Next.js quanto a roteamento, organização de arquivos, performance e problemas de TypeScript.
Autor
0Chan-smcLicença
MIT
Revisão da Skillstore
r1
Aviso de versão
O autor não declarou uma versão.
Repositório
https://github.com/0Chan-smc/claude-code-workflow-lab/tree/main/.claude/skills/frontend-dev-guidelinesReferência
2e36836131679643f7a49e4cfff588d67adc404b
Atualidade da manutenção
18/07/2026
Uso
191 downloads · 636 visualizações
Estrutura de arquivos
📄 SKILL.md
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.