Frontend Sênior

Padrões de desenvolvimento frontend, otimização de performance e ferramentas de automação para aplicações React/Next.js.

Quando Usar

• Use ao iniciar um novo projeto React ou Next.js com TypeScript e Tailwind CSS.
• Use ao gerar novos componentes ou hooks customizados.
• Use ao analisar e otimizar o tamanho de bundles para aplicações frontend.
• Use para implementar ou revisar padrões avançados de React como Compound Components ou Render Props.
• Use para garantir a conformidade de acessibilidade e implementar estratégias robustas de testes.

Sumário

• Início de Projeto
• Geração de Componentes
• Análise de Bundle
• Padrões de React
• Otimização de Next.js
• Acessibilidade e Testes

Início de Projeto

Gere um novo projeto Next.js ou React com TypeScript, Tailwind CSS e configurações de melhores práticas.

Fluxo de Trabalho: Criar Novo Projeto Frontend

1. Execute o scaffolder com o nome do seu projeto e template:

   python scripts/frontend_scaffolder.py my-app --template nextjs
   

2. Adicione funcionalidades opcionais (auth, api, forms, testing, storybook):

   python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api
   

3. Navegue até o projeto e instale as dependências:

   cd my-app && npm install
   

4. Inicie o servidor de desenvolvimento:

   npm run dev
   

Opções do Scaffolder

Estrutura Gerada (Next.js)

my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json

Geração de Componentes

Gere componentes React com TypeScript, testes e stories do Storybook.

Fluxo de Trabalho: Criar um Novo Componente

1. Gere um componente de cliente:

   python scripts/component_generator.py Button --dir src/components/ui
   

2. Gere um componente de servidor:

   python scripts/component_generator.py ProductCard --type server
   

3. Gere com arquivos de teste e story:

   python scripts/component_generator.py UserProfile --with-test --with-story
   

4. Gere um hook customizado:

   python scripts/component_generator.py FormValidation --type hook
   

Opções do Gerador

Exemplo de Componente Gerado

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

interface ButtonProps {
  className?: string;
  children?: React.ReactNode;
}

export function Button({ className, children }: ButtonProps) {
  return <div className={cn("", className)}>{children}</div>;
}

Análise de Bundle

Analise o package.json e a estrutura do projeto em busca de oportunidades de otimização de bundle.

…