Communitygithub.com

Sistema de UI Pessoal 0xAlchemist-cs

Integra Material UI com os roteadores App e Pages do Next.js usando @mui/material-nextjs, provedores de cache Emotion, next/font, camadas CSS com Tailwind/CSS Modules, padrões de prop Link, notas de SSR sobre variáveis CSS de tema e App Router useSearchParams + Suspense. Use ao configurar ou depurar MUI em um aplicativo Next.js.

O que é Sistema de UI Pessoal 0xAlchemist-cs?

Esta skill capacita agentes de IA (como Claude Code, Cursor ou Codex) a configurar e depurar a integração entre Material UI (MUI) e Next.js, suportando tanto o App Router quanto o Pages Router. Ela fornece orientação sobre provedores de cache Emotion (`AppRouterCacheProvider`, `AppCacheProvider`), carregamento de fontes com `next/font`, uso de variáveis CSS de tema (`cssVariables`) e ativação de camadas CSS (`enableCssLayer`) para coexistir com Tailwind ou CSS Modules. A skill também cobre padrões de prop `Link` (como `component={Link}`) e o tratamento de estado de URL no App Router com `useSearchParams` + Suspense, resolvendo erros como estilos ausentes, ordem incorreta ou problemas de renderização no cliente. O ponto de entrada é o arquivo `SKILL.md`, com o guia completo e referências detalhadas nos arquivos `AGENTS.md` e `reference.md`.

Funciona com✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/0xAlchemist-cs/personal-ui-system/tree/HEAD/.agents/skills/material-ui-nextjs
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Material UI e Next.js

Skill de agente para integração Next.js + Material UI (SSR/streaming, provedores de cache, fontes, camadas, Link, estado de URL no App Router). SKILL.md é a entrada; AGENTS.md é o guia completo.

Quando aplicar

  • Novo aplicativo com App Router ou Pages Router usando @mui/material
  • Estilos ausentes, ordem incorreta ou no body em vez do head
  • next/font + ThemeProvider / createTheme
  • Tailwind ou CSS Modules + MUI (enableCssLayer)
  • Button + component={Link} ou erros de limite de cliente no Next.js v16
  • useSearchParams / visualizações MUI orientadas por URL e limites de Suspense

Seções no AGENTS.md

ÁreaTópicos
App RouterAppRouterCacheProvider, @emotion/cache, options, useSearchParams + <Suspense>
Pages Router_document, _app, DocumentHeadTags, AppCacheProvider
Fontes'use client' tema, next/font, variáveis CSS no html
Variáveis CSScssVariables, documentação de flicker no SSR
Camadas CSSenableCssLayer, Tailwind / outros CSS
LinkWrapper de cliente, guia de roteamento, repositório de exemplos

Guia completo

Leia AGENTS.md para etapas completas e links da documentação.

reference.md lista caminhos de importação e formato do provedor.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

0xAlchemist-cs/personal-ui-system

Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form, dashboard, navbar, card, landing section, pricing table, or layout using Chakra UI; wants to add Chakra UI to a project, set up ChakraProvider, run CLI snippets, configure color mode, or fix provider wrapping; or asks about theming — defining brand colors, design tokens, semantic tokens, dark mode values, component recipes, slot recipes, typegen, or ejecting the default theme. Trigger on any Chakra UI building, setup, or theming or charts request, however casually phrased — "add my brand colors", "make a reusable card style", "build a bar chart", "show me a line chart", "make me a login form", "build a sidebar", "add Chakra to my app".

0xAlchemist-cs/personal-ui-system

Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns (ColorModeScript, useColorModeValue, styleConfig, extendTheme, isDisabled, colorScheme, @chakra-ui/icons, framer-motion dependency), fixing compound component patterns, or asking about differences between Chakra UI v2 and v3 — even if they don't say "migrate" or "upgrade" explicitly.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community