Communitygithub.com

0xAlchemist-cs/personal-ui-system

整合 Material UI 與 Next.js App Router 和 Pages Router，使用 @mui/material-nextjs、Emotion cache providers、next/font、CSS layers 搭配 Tailwind/CSS Modules、Link 元件屬性模式、CSS 主題變數 SSR 注意事項，以及 App Router 的 useSearchParams 與 Suspense。適用於在 Next.js 應用程式中設定或除錯 MUI。

personal-ui-system 是什麼？

這個技能專門用於在 Next.js 應用程式中正確設定 Material UI (MUI)，解決常見的 SSR/串流渲染、樣式遺失或順序錯誤的問題。它支援 Next.js 的 App Router 和 Pages Router，並透過 `@mui/material-nextjs` 提供的 `AppRouterCacheProvider` 與 `AppCacheProvider` 來管理 Emotion 快取。技能涵蓋了 `next/font` 與 `ThemeProvider` 的整合、CSS 變數主題的 SSR 閃爍處理、透過 `enableCssLayer` 與 Tailwind/CSS Modules 的共存、以及 `Link` 元件的包裝以解決 Next.js v16 的客戶端邊界錯誤。此外，它也詳細說明了 App Router 中 `useSearchParams` 與 `Suspense` 的搭配使用，讓開發者能建立 URL 驅動的 MUI 檢視。主要依據 `AGENTS.md` 與 `reference.md` 文件提供實作步驟與引用路徑。

相容平台✓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
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Material UI 與 Next.js

用於 Next.js + Material UI 接線（SSR/串流渲染、快取提供者、字型、圖層、Link、App Router URL 狀態）的 Agent 技能。SKILL.md 是入口；AGENTS.md 是完整指南。

何時套用

  • 使用 @mui/material 的新 App Router 或 Pages Router 應用程式
  • 樣式遺失、順序錯誤，或在 body 而非 head 中
  • next/font + ThemeProvider / createTheme
  • Tailwind 或 CSS Modules + MUI（enableCssLayer）
  • Button + component={Link} 或 Next.js v16 客戶端邊界錯誤
  • useSearchParams / URL 驅動的 MUI 檢視與 Suspense 邊界

在 AGENTS.md 中的章節

區域主題
App RouterAppRouterCacheProvider、@emotion/cache、options、useSearchParams + <Suspense>
Pages Router_document、_app、DocumentHeadTags、AppCacheProvider
字型'use client' 主題、next/font、html 上的 CSS 變數
CSS 變數cssVariables、SSR 閃爍文件
CSS 圖層enableCssLayer、Tailwind / 其他 CSS
Link客戶端包裝器、路由指南、範例儲存庫

完整指南

請閱讀 AGENTS.md 以取得完整步驟與文件連結。

reference.md 列出了匯入路徑與提供者形狀。

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.

相關技能

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