Communitygithub.com

0xAlchemist-cs/personal-ui-system

Integriert Material UI mit Next.js App und Pages Routern mittels @mui/material-nextjs, Emotion-Cache-Providern, next/font, CSS-Layern mit Tailwind/CSS-Modulen, Link-Komponenten-Prop-Mustern, SSR-Hinweisen zu CSS-Theme-Variablen und App Router useSearchParams + Suspense. Verwende dies beim Einrichten oder Debuggen von MUI in einer Next.js-App.

Was ist personal-ui-system?

Dieses Skill (0xAlchemist-cs/personal-ui-system) ist ein spezialisiertes Werkzeug für Entwickler, die Material UI (MUI) mit Next.js-Projekten integrieren, insbesondere mit den modernen App Router- und den traditionellen Pages Router-Architekturen. Es behandelt die gesamte Verdrahtung für serverseitiges Rendering (SSR) und Streaming, einschließlich der Einrichtung von `Emotion`-Cache-Providern, der korrekten Verwendung von `next/font` mit `ThemeProvider`, der Lösung von Konflikten mit CSS-Layern (z. B. `enableCssLayer` für Tailwind) und der Implementierung von Mustern für die `Link`-Komponente, um Fehler auf Client-Grenzen zu vermeiden. Das Skill ist auf den gängigen KI-Agenten-Plattformen (Claude Code, Cursor, Codex) anwendbar, die SKILL.md-Dateien lesen können. Es verweist auf eine umfassende AGENTS.md-Datei mit Schritt-für-Schritt-Anleitungen und eine reference.md-Datei mit genauen Importpfaden, was es ideal für schnelle Debugging-Sessions oder die Neuprojekt-Einrichtung macht.

Funktioniert mit✓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
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Material UI und Next.js

Agenten-Skill für Next.js + Material UI Verdrahtung (SSR/Streaming, Cache-Provider, Schriftarten, Layern, Link, App Router URL-Status). SKILL.md ist der Einstieg; AGENTS.md ist der vollständige Leitfaden.

Wann anwenden

  • Neue App Router- oder Pages Router-App mit @mui/material
  • Fehlende oder falsch geordnete Styles, oder im body statt head
  • next/font + ThemeProvider / createTheme
  • Tailwind oder CSS‑Module + MUI (enableCssLayer)
  • Button + component={Link} oder Next.js v16 Client-Grenzfehler
  • useSearchParams / URL-gesteuerte MUI-Ansichten und Suspense-Grenzen

Abschnitte in AGENTS.md

BereichThemen
App RouterAppRouterCacheProvider, @emotion/cache, options, useSearchParams + <Suspense>
Pages Router_document, _app, DocumentHeadTags, AppCacheProvider
Schriftarten'use client' Theme, next/font, CSS-Variablen auf html
CSS-VariablencssVariables, SSR-Flimmer-Dokumentation
CSS-LayerenableCssLayer, Tailwind / andere CSS
LinkClient-Wrapper, Routing-Anleitung, Beispiele-Repo

Vollständiger Leitfaden

Lies AGENTS.md für vollständige Schritte und Dokumentationslinks.

reference.md listet Importpfade und Provider-Strukturen auf.

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.

Verwandte Skills

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