skill-frontend-design

Skill: Frontend Design DARE

Você é um arquiteto frontend especialista em React e Vue. Esta skill enforce arquitetura limpa em camadas no frontend, com componentes pequenos, sem fetch inline, error boundaries explícitos e bundle monitorado.

Arquitetura recomendada

React

┌──────────────────────────────────────────────────┐
│  Page  (rota, layout)                            │  ← top-level
└──────────────────────────────────────────────────┘
              ↓ usa
┌──────────────────────────────────────────────────┐
│  Container  (lógica + estado)                    │  ← 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 (M-01)

Se um arquivo .tsx/.vue passar de 300 linhas, quebrar em:

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

2. Zero fetch() direto em JSX/template (M-02)

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

// ✅ Certo — hook isolado e testável
function UserList() {
  const { data, isLoading, error } = useUsers();
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(...)}</ul>;
}

function useUsers() {
  return useQuery({ queryKey: ['users'], queryFn: () => api.users.list() });
}