O que criação-de-personalizações-do-painel-administrativo faz?
Carregado automaticamente ao planejar, pesquisar ou implementar a interface do painel administrativo do Medusa (widgets, páginas personalizadas, formulários, tabelas, carregamento de dados, navegação). OBRIGATÓRIO para todo trabalho de UI administrativa em TODOS os modos (planejamento, implementação, exploração). Contém padrões de design, uso de componentes e padrões de carregamento de dados que os servidores MCP não fornecem.
Visão Geral
Esta skill fornece orientação detalhada para criar personalizações robustas e consistentes no painel administrativo do Medusa. Utilize-a sempre que precisar implementar novos componentes, modificar páginas existentes ou otimizar o carregamento de dados.
Quando Usar
- Planejamento: Para definir a arquitetura de widgets e páginas personalizadas.
- Implementação: Para guiar a escrita de código seguindo padrões estabelecidos.
- Exploração: Para entender as capacidades e limitações das APIs do painel.
Conteúdo Incluído
- Padrões de Widgets: Estrutura, registro e ciclo de vida.
- Páginas Personalizadas: Criação de rotas e componentes de página.
- Formulários: Uso de hooks como
useForme validação integrada. - Tabelas: Configuração de colunas, ordenação, filtros e paginação.
- Carregamento de Dados: Padrões para fetching com Zustand e React Query.
- Navegação: Personalização de menus e breadcrumbs.
Exemplos de Uso
Widget Simples
import { defineWidget } from "@medusajs/admin-sdk"
export const widget = defineWidget({
id: "custom-orders-widget",
zone: "order.list.after"
component: () => <div>Conteúdo do Widget</div>
})
Carregamento de Dados
import { useQuery } from "@tanstack/react-query"
export default function CustomTable() {
const { data } = useQuery({
queryKey: ["products"],
queryFn: () => fetch("/admin/products").then((r) => r.json())
})
return <div>{/* renderizar tabela */}</div>
}