Communitygithub.com

0xAlchemist-cs/personal-ui-system

Integra Material UI con Next.js App y Pages Router usando @mui/material-nextjs, proveedores de caché Emotion, next/font, capas CSS con Tailwind/CSS Modules, patrones de prop Link, notas SSR de variables CSS de tema y App Router useSearchParams + Suspense. Úsalo al configurar o depurar MUI en una aplicación Next.js.

¿Qué es personal-ui-system?

Este skill de agente especializado en la integración de Material UI (MUI) con Next.js resuelve la configuración de renderizado del lado del servidor (SSR), streaming, proveedores de caché Emotion, fuentes con next/font, capas CSS (enableCssLayer) y el enrutamiento de App Router y Pages Router. Es útil cuando faltan estilos, el orden de carga es incorrecto, o los estilos aparecen en el body en lugar del head, también para componentes como Button con component={Link} y manejo de errores de límite de cliente en Next.js v16. Soporta tanto App Router (AppRouterCacheProvider, useSearchParams + Suspense) como Pages Router (_document, _app, DocumentHeadTags, AppCacheProvider). El skill guía en el uso de variables CSS del tema para evitar parpadeos en SSR, la integración con Tailwind/CSS Modules, y la creación de wrappers para Link. Para una guía completa, se debe consultar el archivo AGENTS.md, mientras que reference.md lista las rutas de importación y formas de los proveedores.

Compatible con✓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→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Material UI y Next.js

Skill de agente para la conexión Next.js + Material UI (SSR/streaming, proveedores de caché, fuentes, capas, Link, estado URL de App Router). SKILL.md es el punto de entrada; AGENTS.md es la guía completa.

Cuándo aplicar

  • Nueva aplicación con App Router o Pages Router que use @mui/material
  • Estilos faltantes, con orden incorrecto, o en body en lugar de head
  • next/font + ThemeProvider / createTheme
  • Tailwind o CSS Modules + MUI (enableCssLayer)
  • Button + component={Link} o errores de límite de cliente en Next.js v16
  • useSearchParams / vistas MUI impulsadas por URL y límites Suspense

Secciones en AGENTS.md

ÁreaTemas
App RouterAppRouterCacheProvider, @emotion/cache, options, useSearchParams + <Suspense>
Pages Router_document, _app, DocumentHeadTags, AppCacheProvider
Fuentestema 'use client', next/font, variables CSS en html
Variables CSScssVariables, documentación sobre parpadeo SSR
Capas CSSenableCssLayer, Tailwind / otros CSS
Linkcontenedor de cliente, guía de enrutamiento, repositorio de ejemplos

Guía completa

Lee AGENTS.md para ver los pasos completos y enlaces a la documentación.

reference.md lista las rutas de importación y la forma de los proveedores.

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.

Skills relacionados

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