Communitygithub.com

0xAlchemist-cs/personal-ui-system

Intègre Material UI avec les routeurs App et Pages de Next.js via @mui/material-nextjs, les fournisseurs de cache Emotion, next/font, les couches CSS avec Tailwind/Modules CSS, les motifs de propriété Link, les notes SSR sur les variables CSS de thème, et useSearchParams + Suspense pour App Router. À utiliser lors de la configuration ou du débogage de MUI dans une application Next.js.

Qu'est-ce que personal-ui-system ?

Cette compétence d'agent est conçue pour les développeurs qui intègrent Material UI (MUI) avec Next.js, en couvrant à la fois les routeurs App et Pages. Elle résout les problèmes courants de SSR/streaming, de rendu des styles, de chargement des polices et de gestion de l'état d'URL. Elle est utile pour les équipes qui rencontrent des problèmes comme des styles manquants ou en mauvais ordre, des erreurs de liaison de composant avec le composant Link de Next.js, ou la configuration de `useSearchParams` avec les limites Suspense dans App Router. La compétence s'appuie sur un fichier AGENTS.md détaillé pour les instructions complètes et un fichier reference.md listant les chemins d'importation et les formes de fournisseurs, ce qui la rend adaptée aux applications Next.js utilisant TypeScript, Tailwind CSS ou toute variante de configuration CSS.

Compatible avec✓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
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Material UI et Next.js

Compétence d'agent pour le câblage Next.js + Material UI (SSR/streaming, fournisseurs de cache, polices, couches, Link, état d'URL App Router). SKILL.md est le point d'entrée ; AGENTS.md est le guide complet.

Quand l'appliquer

  • Nouvelle application App Router ou Pages Router utilisant @mui/material
  • Styles manquants, en mauvais ordre, ou dans body au lieu de head
  • next/font + ThemeProvider / createTheme
  • Tailwind ou Modules CSS + MUI (enableCssLayer)
  • Button + component={Link} ou erreurs de limites clientes Next.js v16
  • useSearchParams / vues MUI pilotées par URL et limites Suspense

Sections dans AGENTS.md

ZoneSujets
App RouterAppRouterCacheProvider, @emotion/cache, options, useSearchParams + <Suspense>
Pages Router_document, _app, DocumentHeadTags, AppCacheProvider
PolicesThème 'use client', next/font, variables CSS sur html
Variables CSScssVariables, documentation du scintillement SSR
Couches CSSenableCssLayer, Tailwind / autre CSS
LinkWrapper client, guide de routage, exemples de dépôt

Guide complet

Lisez AGENTS.md pour les étapes complètes et les liens vers la documentation.

reference.md liste les chemins d'importation et la forme des fournisseurs.

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 associés

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