Communitygithub.com

0xAlchemist-cs/personal-ui-system

集成 Material UI 与 Next.js App Router 和 Pages Router，使用 @mui/material-nextjs、Emotion 缓存提供器、next/font、CSS 层与 Tailwind/CSS Modules、Link 组件 prop 模式、CSS 主题变量 SSR 说明以及 App Router 的 useSearchParams + Suspense。适用于在 Next.js 应用中设置或调试 MUI。

personal-ui-system 是什么？

该技能旨在帮助开发者高效地将 Material UI (MUI) 集成到 Next.js 应用中，无论使用的是 App Router 还是 Pages Router。它涵盖了 SSR/流式渲染、缓存提供器、字体集成、CSS 层与 Tailwind/CSS Modules 的配合、Link 组件的最佳实践以及 App Router 中 URL 状态管理的关键配置和常见问题解决方案。技能文档结构清晰，SKILL.md 作为入口，AGENTS.md 提供完整的操作指南，reference.md 则列出了导入路径和提供器形状。通过遵循这些指南，开发者可以避免样式丢失、顺序错误、字体闪烁等典型问题，并确保 MUI 组件在 Next.js 的混合渲染环境中稳定运行。

兼容平台✓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 集成的 Agent 技能（SSR/流式渲染、缓存提供器、字体、CSS 层、Link 组件、App Router URL 状态）。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