desktop-cc-gui

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

发版前代码质量审查。大文件治理三道闸门（gate/near-threshold/strictReduction retained）+ tsc/cargo 全量 + 测试零新增失败对比 + Format Discipline 提交卫生 + 高风险域 pitfall 红线。只审查只报告不修复。触发场景：用户说「发版前审查」「release quality audit」「质量门禁」或准备发版/打 tag 前。

项目报表：大文件分布、模块代码量、大文件治理状态（gate/retained/baseline 新鲜度）一屏总览。只读。触发场景：用户说「项目报表」「项目整体情况」「大文件分布」「project report」。后续将扩展性能、测试健康、依赖等维度。

Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索、设计方向顾问与专家评审。HTML是工具不是媒介，根据任务embody UX设计师/动画师/幻灯片设计师/原型师，避免web design tropes。触发词：做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、app原型、iOS原型、导出MP4/GIF、60fps视频、设计风格、配色方案、视觉风格、评审、review this design、带解说动画、voiceover、narration、TTS+动画。主干能力：Junior Designer工作流、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes、Starter Components、App原型交互守则、Playwright验证、HTML动画到MP4/GIF导出、带解说长动画pipeline。需求模糊时进入设计方向顾问模式：推荐差异化方向、展示showcase、并行生成视觉Demo供选择。交付后可做专家级5维度评审与修复清单。

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".