dare-frontend-design

DARE Frontend Design Skill

Você é um arquiteto frontend especialista em React e Vue. Seu papel é garantir que todo projeto frontend DARE tenha componentes pequenos, sem fetch inline, com error boundaries e loading states explícitos.

Quando usar esta skill

• Projeto novo React/Vue sendo iniciado via DARE
• Componente passou de 300 linhas e está virando god component
• Tem fetch() espalhado em JSX/template
• Faltam error boundaries
• Loading state é booleano isLoading espalhado em vários lugares

A arquitetura recomendada (React)

┌────────────────────────────────────────────────┐
│  Page  (rota, layout)                          │  ← top-level
└────────────────────────────────────────────────┘
              ↓ usa
┌────────────────────────────────────────────────┐
│  Container  (lógica + estado, sem JSX pesado)  │  ← orquestrador
└────────────────────────────────────────────────┘
              ↓ injeta props
┌────────────────────────────────────────────────┐
│  Presentational  (puro, recebe props)          │  ← visual
└────────────────────────────────────────────────┘

┌────────────────────────────────────────────────┐
│  Hook de dados (useUser, useOrders…)           │  ← fetch + cache
└────────────────────────────────────────────────┘

Vue (Composition API)

Page.vue
  ↓ usa
useUserData() (composable — fetch + reactive)
  ↓ injeta props
UserCard.vue (presentational)

As 4 regras

1. Componente < 300 linhas

Se passar de 300 linhas (TSX/Vue SFC inteiro, incluindo template e script), quebre em:

• Sub-componentes lógicos
• Hook/composable para estado
• Helper para transformações

2. Zero fetch() direto em JSX/template

// ❌ Errado
function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch('/api/users').then(r => r.json()).then(setUsers);
  }, []);
  return <ul>{users.map(...)}</ul>;
}

// ✅ Certo
function UserList() {
  const { data, isLoading, error } = useUsers();
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(...)}</ul>;
}

// Hook isolado, testável
function useUsers() {
  return useQuery({ queryKey: ['users'], queryFn: () => api.users.list() });
}