Create Component Skill

Esta skill cria componentes React seguindo os padrões estabelecidos no projeto Bewear E-commerce.

Quando Usar

• Criar novos componentes React
• Modificar componentes existentes
• Adicionar interatividade a páginas Server Components

Regras Obrigatórias

1. Client vs Server Components

NUNCA adicione "use client" em page.tsx. Páginas devem sempre ser Server Components.

Para interatividade, crie um Client Component separado:

• Se usado apenas em uma página: src/app/[rota]/components/nome-component.tsx
• Se reutilizável: src/components/nome-component.tsx

Exemplo de referência: Ver src/app/cart/identification/page.tsx (Server) que importa src/app/cart/components/addresses.tsx (Client)

2. Nomenclatura

• Use kebab-case para nomes de arquivos: add-address-form.tsx
• Use PascalCase para nomes de componentes: AddAddressForm
• Export default para o componente principal

3. shadcn/ui Components

SEMPRE use componentes shadcn/ui disponíveis:

• Button, Card, Form, Input, Label, Tabs, Avatar, Carousel
• Separator, ScrollArea, Sheet, RadioGroup, Dialog, Accordion, Badge

Instalar novos componentes: npx shadcn@2.9.2 add [component-name]

4. TypeScript

• Sempre use TypeScript com tipos explícitos
• Use z.infer para tipos derivados de schemas Zod
• Evite any e unknown

5. Imports

// shadcn/ui components
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

// Shared components
import Header from "@/components/header"

// Icons
import { ChevronDown } from "lucide-react"

// Utilities
import { cn } from "@/lib/utils"

6. Styling

• Use Tailwind CSS classes
• Use cn() utility para merge condicional de classes
• Suporte dark mode com classes do Tailwind

Template: Client Component Básico

"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useState } from "react";

const NomeComponente = () => {
  const [estado, setEstado] = useState<string>("");

  const handleAction = () => {
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Título</CardTitle>
      </CardHeader>
      <CardContent>
        <Button onClick={handleAction}>
          Ação
        </Button>
      </CardContent>
    </Card>
  );
};

export default NomeComponente;

Template: Server Component (page.tsx)

import { headers } from "next/headers";
import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";
import { db } from "@/db";
import Header from "@/components/header";
import ClientComponent from "./components/client-component";

const PageName = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session?.user) {
    redirect("/auth");
  }

  const data = await db.query.tableTable.findFirst({
    where: eq(tableTable.userId, session.user.id),
  });

  return (
    <>
      <Header />
      <div className="max-w-[1280px] mx-auto p-5">
        <ClientComponent data={data} />
      </div>
    </>
  );
};

export default PageName;

Processo de Criação

1. Analisar requisitos: Determinar se é Client ou Server Component
2. Verificar local: Usar /components para específico da página ou /components para reutilizável
3. Usar shadcn/ui: Priorizar componentes existentes
4. Seguir padrões: Ver arquivos de referência no projeto
5. Testar: Verificar compilação TypeScript

Arquivos de Referência

• Client Component com hooks: src/app/cart/components/addresses.tsx
• Server Component (page.tsx): src/app/cart/identification/page.tsx
• Form Component: src/app/auth/components/sign-in-form.tsx
• shadcn/ui components: src/components/ui/