Pular para o conteúdo
Skillpedia
EN
Sites e telas (frontend)48 mil · #3966

react-nextjs-development

Faz seu agente desenvolver aplicações web modernas com React e Next.js. Ele usa as últimas funcionalidades como App Router e Server Components para criar interfaces rápidas.

O que ela faz

Esta ferramenta ajuda a criar sites e aplicações web modernas usando as tecnologias React e Next.js. Ela guia você na configuração inicial, criação de componentes, estilização com Tailwind CSS e outras etapas importantes para construir um projeto completo.

Quando usar

  • ✓Ao iniciar um novo projeto web com React e Next.js.
  • ✓Quando você precisa configurar TypeScript e Tailwind CSS.
  • ✓Para construir aplicações completas, desde o início até a implantação.

Exemplo do que pedir para a IA

“Quero criar um novo projeto Next.js 14 com App Router e configurar o Tailwind CSS.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/react-nextjs-development/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/react-nextjs-development/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Ver no GitHub ↗Arquivo bruto
Como funciona

A ferramenta utiliza outras 'skills' especializadas para cada etapa do desenvolvimento, como configurar o projeto, criar componentes, estilizar e testar. Ela sugere comandos e configurações para você seguir.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add sickn33/agentic-awesome-skills --skill react-nextjs-development

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/react-nextjs-development/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Fluxo de Desenvolvimento React/Next.js

Visão Geral

Fluxo de trabalho especializado para construir aplicações React e Next.js 14+ com padrões modernos, incluindo App Router, Server Components, TypeScript e Tailwind CSS.

Quando Usar Este Fluxo de Trabalho

Use este fluxo de trabalho quando:

  • Estiver construindo novas aplicações React
  • Estiver criando projetos Next.js 14+ com App Router
  • Estiver implementando Server Components
  • Estiver configurando TypeScript com React
  • Estiver estilizando com Tailwind CSS
  • Estiver construindo aplicações Next.js full-stack

Fases do Fluxo de Trabalho

Fase 1: Configuração do Projeto

Habilidades a Invocar

  • app-builder - Estrutura de aplicação
  • senior-fullstack - Orientação full-stack
  • nextjs-app-router-patterns - Padrões Next.js 14+
  • typescript-pro - Configuração de TypeScript

Ações

  1. Escolher o tipo de projeto (SPA React, aplicação Next.js)
  2. Selecionar a ferramenta de build (Vite, Next.js, Create React App)
  3. Criar a estrutura do projeto
  4. Configurar o TypeScript
  5. Configurar ESLint e Prettier

Prompts Copiar e Colar

Use @app-builder to scaffold a new Next.js 14 project with App Router

Use @nextjs-app-router-patterns to set up Server Components

Fase 2: Arquitetura de Componentes

Habilidades a Invocar

  • frontend-developer - Desenvolvimento de componentes
  • react-patterns - Padrões React
  • react-state-management - Gerenciamento de estado
  • react-ui-patterns - Padrões de UI

Ações

  1. Projetar a hierarquia de componentes
  2. Criar componentes base
  3. Implementar componentes de layout
  4. Configurar o gerenciamento de estado
  5. Criar hooks customizados

Prompts Copiar e Colar

Use @frontend-developer to create reusable React components

Use @react-patterns to implement proper component composition

Use @react-state-management to set up Zustand store

Fase 3: Estilização e Design

Habilidades a Invocar

  • frontend-design - Design de UI
  • tailwind-patterns - Tailwind CSS
  • tailwind-design-system - Sistema de design
  • core-components - Biblioteca de componentes

Ações

  1. Configurar o Tailwind CSS
  2. Configurar tokens de design
  3. Criar classes utilitárias
  4. Construir estilos de componentes
  5. Implementar design responsivo

Prompts Copiar e Colar

Use @tailwind-patterns to style components with Tailwind CSS v4

Use @frontend-design to create a modern dashboard UI

Fase 4: Busca de Dados

Habilidades a Invocar

  • nextjs-app-router-patterns - Server Components
  • react-state-management - React Query
  • api-patterns - Integração de API

Ações

  1. Implementar Server Components
  2. Configurar React Query/SWR
  3. Criar cliente de API
  4. Lidar com estados de carregamento
  5. Implementar limites de erro

Prompts Copiar e Colar

Use @nextjs-app-router-patterns to implement Server Components data fetching

Fase 5: Roteamento e Navegação

Habilidades a Invocar

  • nextjs-app-router-patterns - App Router
  • nextjs-best-practices - Padrões Next.js

Ações

  1. Configurar roteamento baseado em arquivos
  2. Criar rotas dinâmicas
  3. Implementar rotas aninhadas
  4. Adicionar guardas de rota
  5. Configurar redirecionamentos

Prompts Copiar e Colar

Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes

Fase 6: Formulários e Validação

Habilidades a Invocar

  • frontend-developer - Desenvolvimento de formulários
  • typescript-advanced-types - Validação de tipos
  • react-ui-patterns - Padrões de formulário

Ações

  1. Escolher biblioteca de formulários (React Hook Form, Formik)
  2. Configurar validação (Zod, Yup)
  3. Criar componentes de formulário
  4. Lidar com envios
  5. Implementar tratamento de erros

Prompts Copiar e Colar

Use @frontend-developer to create forms with React Hook Form and Zod

Fase 7: Testes

Habilidades a Invocar

  • javascript-testing-patterns - Jest/Vitest
  • playwright-skill - Testes E2E
  • e2e-testing-patterns - Padrões E2E

Ações

  1. Configurar framework de testes
  2. Escrever testes unitários
  3. Criar testes de componentes
  4. Implementar testes E2E
  5. Configurar integração de CI

Prompts Copiar e Colar

Use @javascript-testing-patterns to write Vitest tests

Use @playwright-skill to create E2E tests for critical flows

Fase 8: Build e Implantação

Habilidades a Invocar

  • vercel-deployment - Implantação Vercel
  • vercel-deploy-claimable - Implantação Vercel
  • web-performance-optimization - Performance

Ações

  1. Configurar ajustes de build
  2. Otimizar tamanho do bundle
  3. Configurar variáveis de ambiente
  4. Implantar no Vercel
  5. Configurar implantações de preview

Prompts Copiar e Colar

Use @vercel-deployment to deploy Next.js app to production

Stack de Tecnologia

Categoria Tecnologia

…

Perguntas frequentes

O que são Server Components?

São componentes do Next.js que rodam no servidor, ajudando a melhorar o desempenho e a segurança da sua aplicação.

O que é Tailwind CSS?

É uma biblioteca de estilos (CSS) que permite criar o visual do seu site diretamente no código HTML, de forma rápida e flexível.

Preciso saber tudo de React para usar?

Não necessariamente. A ferramenta guia você pelas etapas, mas ter um conhecimento básico de React ajuda a entender melhor o processo.

Detalhes

Descrição original do autor

React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub
48 mil
Posição no ranking
#3966
Licença
MIT
Atualizada em
15/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Agentes48 mil

00-andruia-consultant

Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.

sickn33/agentic-awesome-skills

Diversos48 mil

007

Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.

sickn33/agentic-awesome-skills

Agentes48 mil

10-andruia-skill-smith

Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.

sickn33/agentic-awesome-skills

Diversos48 mil

20-andruia-niche-intelligence

Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.

sickn33/agentic-awesome-skills

Skills parecidas

Sites e telas (frontend)280 mil

angular-developer

Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.

affaan-m/ECC

Sites e telas (frontend)280 mil

frontend-a11y

Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.

affaan-m/ECC

Sites e telas (frontend)280 mil

frontend-patterns

Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.

affaan-m/ECC