Menu
当用户要求重构、清理或整理已有代码，或反映代码难以理解、修改、扩展时使用。适用于任何以改善结构为目标、不新增功能的改动。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.
Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
所有联网操作必须通过此 skill 处理，包括：搜索、网页抓取、登录后操作、网络交互等。 触发场景：用户要求搜索信息、查看网页内容、访问需要登录的网站、操作网页界面、抓取社交媒体内容（小红书、微博、推特等）、读取动态渲染页面、以及任何需要真实浏览器环境的网络任务。
| name | code-refactor |
| description | 当用户要求重构、清理或整理已有代码，或反映代码难以理解、修改、扩展时使用。适用于任何以改善结构为目标、不新增功能的改动。 |
在不改变外部行为的前提下，改善代码结构、可读性和可维护性。
保持行为不变：只调整结构和表达，不动功能、输出和对外接口。
小步推进：一次处理一类问题，降低风险，便于回退。
测试优先：没有测试保障时，先补充最小必要验证，再动结构。
边界清晰：重构和新功能开发、bug 修复分开做，不混在同一次改动里。
以维护为目标：解决真实的理解成本、重复劳动和扩展阻力，不为"看起来更高级"而改。
第一步：理解问题 阅读代码，搞清楚用户的具体诉求——是可读性差、职责过多、重复逻辑，还是扩展受阻？如果不明确，先问清楚再动手。
第二步：列出重构点 识别主要问题，控制在 3-5 条以内。每条说明是什么问题、影响是什么。范围较大时，先和用户对齐优先级。
第三步：确认测试保障 有测试就确认覆盖情况；没有测试就提示用户，或为关键路径补充最小验证，再继续。
第四步：逐步改写 按优先级依次处理，每次只改一类问题。每处改动附简短说明，解释为什么这样改。
第五步：收尾验证 检查所有既有行为是否保持不变。清理注释残留，确保最终结构清晰。
遇到这些情况，说明原因，不强行重构。
