UI/UX, logos, slides, and image generation (7.4K skills)
用于将昂贵的浏览器工作移出主线程，涉及 Web Workers、SharedWorker、worker 池、Comlink、transferable objects、Vite/Webpack worker 集成或 UI 响应性修复。不要用于轻量同步工作或 DOM 操作；中文触发词包括 Web Worker、后台线程、主线程阻塞。
The English summary is being prepared. Showing the original description.
用于设计、实现或审查 Tailwind CSS 设计系统、Token 映射、主题扩展、工具类治理、组件变体、暗色模式、响应式工具、safelist 或可维护的 class 组合；中文触发词包括 Tailwind、设计 Token、组件变体、暗色模式、class 管理。
The English summary is being prepared. Showing the original description.
用于构建、审查或改进需要产品专属设计方向的前端 UI，包括设计系统生成、Master/Page 覆盖、独特视觉识别、反通用界面选择、首屏层级、UI 打磨、图表 UX、交互状态、响应式行为或视觉 QA。外部设计文件为权威时，应从该来源实现，而不是自行发明方向；中文触发词包括 UI 设计、设计系统、视觉风格、不要模板化、高级感、界面打磨、交互状态。
The English summary is being prepared. Showing the original description.
用于实现或审查 SVG 动画、路径绘制、图标动效、Logo 动画、插画动效、微交互、CSS/SMIL/Framer Motion/GSAP 选型、动效无障碍或降级行为；中文触发词包括 SVG 动画、路径描边、动效。
The English summary is being prepared. Showing the original description.
用于规划或实施从 JavaScript、jQuery、HTML/CSS、服务端渲染模板、MPA 遗留前端代码或旧框架代码迁移到现代前端技术栈，同时保持行为一致。不要用于仍留在旧技术栈内的日常遗留 bug 修复；中文触发词包括 遗留项目、技术栈升级、jQuery 迁移。
The English summary is being prepared. Showing the original description.
用于设计、实现或审查前端交互动效、页面转场、滚动动画、Framer Motion、GSAP、Lottie、CSS 动画、动效强度、动画性能、减少动效行为或兼具表现力与可访问性的 UI 动效。不要用于仅 SVG 路径绘制、Canvas/WebGL 渲染或普通 hover 状态；中文触发词包括 动效设计、交互动效、页面转场、滚动动画、Framer Motion、GSAP。
The English summary is being prepared. Showing the original description.
Use when moving expensive browser work off the main thread with Web Workers, SharedWorker, worker pools, Comlink, transferable objects, Vite/Webpack worker integration, or UI responsiveness fixes. Do not use for lightweight synchronous work or DOM manipulation; Chinese triggers include Web Worker, background thread, main thread blocking.
The English summary is being prepared. Showing the original description.
用于构建或审查 Canvas 2D、Three.js/WebGL、React Three Fiber、GLSL shader、ShaderToy 到 WebGL 适配、2D/3D 可视化、游戏渲染、动画循环、GPU 资源清理或渲染性能。不要用于标准 DOM UI、已有图表库覆盖的图表或非图形类性能工作；中文触发词包括 Canvas、Three.js、WebGL、GLSL、Shader、3D、数据可视化、游戏。
The English summary is being prepared. Showing the original description.
用于根据 Figma、Sketch、MasterGo、Pixso、墨刀、摹客、截图、设计选区、设计 Token 或设计转代码任务实现生产级前端组件/页面；中文触发词包括 设计稿、按设计实现。
The English summary is being prepared. Showing the original description.
用于设计、实现或审查响应式前端布局、移动优先断点、容器查询、流式网格、数据密集表格、触摸目标、安全区域、横竖屏变化、视口溢出或跨设备 UI 行为；中文触发词包括 响应式布局、移动端适配、断点、容器查询、横竖屏、触摸目标。
The English summary is being prepared. Showing the original description.
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.
The English summary is being prepared. Showing the original description.
用于维护或安全修改既有非框架前端代码：原生 JavaScript、jQuery、HTML/CSS、MPA 页面、服务端渲染模板、遗留插件或需要长期保持当前技术栈的代码。若是规划迁移到 React/Vue/TypeScript，请使用迁移 skill；中文触发词包括 传统前端、原生 JS、jQuery。
The English summary is being prepared. Showing the original description.
Use when implementing or reviewing SVG animation, path drawing, icon motion, logo animation, illustration motion, micro-interactions, CSS/SMIL/Framer Motion/GSAP choices, motion accessibility, or fallback behavior; Chinese triggers include SVG animation, path stroke, animation.
The English summary is being prepared. Showing the original description.
Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.
The English summary is being prepared. Showing the original description.
Use when designing, implementing, or reviewing Tailwind CSS design systems, token mapping, theme extension, utility class governance, component variants, dark mode, responsive utilities, safelists, or maintainable class composition; Chinese triggers include Tailwind, design Token, component variants, dark mode, class management.
The English summary is being prepared. Showing the original description.
Use when implementing UI from Figma, Sketch, MasterGo, Pixso, Modao, MockingBot, screenshots, design selections, design tokens, or design-to-code tasks for production frontend components/pages; Chinese triggers include design draft, implementation by design.
The English summary is being prepared. Showing the original description.
Use when designing, implementing, or reviewing frontend interaction motion, page transitions, scroll animation, Framer Motion, GSAP, Lottie, CSS animation, motion intensity, animation performance, reduced-motion behavior, or cinematic but accessible UI motion. Do not use for SVG-only path drawing, Canvas/WebGL rendering, or ordinary hover states; Chinese triggers include motion design, interactive effects, page transitions, scroll animation, Framer Motion, GSAP.
The English summary is being prepared. Showing the original description.
Use when maintaining or safely modifying existing non-framework frontend code: vanilla JavaScript, jQuery, HTML/CSS, MPA pages, server-rendered templates, legacy plugins, or long-lived code that should stay in its current stack. Use migration skill when planning a move to React/Vue/TypeScript; Chinese triggers include traditional frontend, native JS, jQuery.
The English summary is being prepared. Showing the original description.
Use when planning or implementing an intentional migration from JavaScript, jQuery, HTML/CSS, server-rendered templates, MPA legacy frontend code, or older framework code toward a modern frontend stack while preserving behavior. Do not use for routine legacy bug fixes that stay in the old stack; Chinese triggers include legacy projects, technology stack upgrades, jQuery migration.
The English summary is being prepared. Showing the original description.
OpenUI generative UI with a Ruby on Rails backend. SSE streaming via ActionController::Live, forwarding the OpenAI API stream with Net::HTTP.
The English summary is being prepared. Showing the original description.
OpenUI generative UI with a PHP (Laravel 13.x) backend. Forwards OpenAI's SSE stream verbatim via response()->stream().
The English summary is being prepared. Showing the original description.
OpenUI generative UI with Vercel AI SDK. streamText, toUIMessageStreamResponse, and tools support.
The English summary is being prepared. Showing the original description.
OpenUI generative UI with Go (net/http) backend. Direct OpenAI API streaming via HTTP.
The English summary is being prepared. Showing the original description.
OpenUI generative UI with OpenAI SDK backend. Streaming chat completions with gpt-5.5 (or any current OpenAI-compatible model).
The English summary is being prepared. Showing the original description.