Design AI Skills

Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive",…

Front's UI design system. Use when building interfaces inspired by Front's aesthetic - light mode, Inter font, 4px grid.

Use when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.

Write Runbook, 撰写运维手册。Use when: LLD 完成后需要编写部署、回滚、监控、故障处理等运维文档。 也用于既有相关文档的有限增量更新。

Extracting and structuring design context from Figma via MCP Server for downstream implementation agents. Use for Figma-to-code bridging or Code Connect management.

Editorial hand-drawn naive book-illustration style — flat saturated color blocks, loose hand-drawn ink line overlay on top of the color, subtle paper grain, simple ink sun-ray hatching, and a strong…

Design and implement visual effects for slot games using shaders, particle systems, and sprite animations. Use when defining big win sequences, feature transitions, symbol animations, or optimizing…

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration.…

When the user wants multiple expert perspectives on a marketing question — a simulated board of advisors staffed by legendary marketers (Seth Godin, David Ogilvy, Eugene Schwartz, April Dunford, Rory…

For creators making surreal short videos that blend rough glowing hand-drawn animation with live-action spaces. Users provide a scene idea, contact object or hand, desired mood, and optional language…

围绕计划、decision 或 idea 持续追问用户。适用于用户想对自己的思路做压力测试，或使用任何 “grill” 触发措辞时。

Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.

Use when the user asks to "build a preference center", "set up a frequency opt-down ladder", "give people a step-down instead of unsubscribe", or "design a topic/cadence preference page"; produces a…

Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit`…

When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,'…

When the user wants to design or optimize their app's monetization — pricing, paywalls, subscriptions, or in-app purchases. Also use when the user mentions "pricing", "paywall", "subscription", "IAP",…

When two design requirements seem mutually exclusive, name the contradiction, separate conflicting states, then invent a concrete no-compromise resolution.

When the user wants to add, optimize, or audit popups or modals for lead capture or offers. Also use when the user mentions "popup," "modal," "lightbox," "overlay," "exit-intent," "popup form," "modal…

Define project terminology, data structures, entities, and relationships. Triggers: schema, data model, entity, terminology

Build modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes),…

Audit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend work.

Use when reviewing React rendering performance — profiler-first diagnosis, memo/useCallback/useMemo correctness, virtual scroll, useTransition/useDeferredValue, and canvas/WebGL separation for…

Evaluate whether figures and plots in a manuscript effectively communicate the claims they support. Audits chart-type fit, axis design, visual hierarchy, data density, caption interpretation,…

Teaches the View Transitions API for animating DOM changes. Use when you want smooth animated transitions between pages or UI states without manual animation code.

Best practices for Remotion video creation in React — compositions, sequences, animation, timing, and rendering. Use when building, reviewing, or debugging Remotion videos.

Common testing patterns and practices. This skill is designed to be included in composite skills via the 'includes' feature.

Ghost's UI design system. Use when building interfaces inspired by Ghost's aesthetic - dark mode, Inter font, 4px grid.

Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.

Constructing landing pages from a focused section to a premium multi-stage studio pipeline: structure, copy, conversion, responsive build, craft gates, and launch handoffs. Use when building or…

Poetic editorial posters and covers in sculpted matte paper, with pronounced raised lettering and forms, deeply pressed contours, fine fibers, and intentional negative space. Use for /emboss-deboss,…

Load when a task needs to implement or continue an existing OpenSpec change; use the repository's normal development contract for non-OpenSpec implementation.

End-to-end Stake game development workflow for math, RGS contract, frontend playback, and compliance gating. Use when building or updating Stake games, defining game modes and RTP targets, validating…

This skill should be used when the user wants to "create a skill", "add a skill to plugin", "write a new skill", "improve skill description", "organize skill content", or needs guidance on skill…

16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from…

Complete CLI harness for FreeCAD parametric 3D CAD modeler (258 commands). Covers ALL workbenches: Part (29 primitives + boolean + mirror + loft + sweep), Sketcher (26 cmds: geometry + constraints +…

Structured multi-angle exploration running 2-8 sequential passes over the same problem, each through a different scientific lens, to surface hidden requirements and edge cases invisible from one…

Turn product images and ad requirements into minimalist product ad shorts for e-commerce promotion and product launches. The Skill confirms format and product variants, extracts selling points, writes…

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Use when the user…

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the…

Create a Xiaohongshu (RedNote/小红书) style cover image — vibrant, lifestyle-focused, with aesthetic typography overlay suitable for the Chinese social platform.

Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience…

Hyperflow auto-routing mode. Use to control how aggressively hyperflow auto-routes — "make hyperflow sticky", "stop using hyperflow", "auto-route to hyperflow", "disable hyperflow auto-routing". Sets…

Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use `component-spec`.

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme…

Gets a product listed where buyers and crawlers look — directories, marketplaces, review sites, comparison pages, and aggregators. Use this to plan a submission push, choose which directories are…

根据用户提供的文章、教程、SOP、清单或主题，使用 Codex 内置 image_gen 生图模型生成 3:4 小红书信息图与组图。固定采用轻盈 AI 产品信息图风：白色或浅薰衣草背景、黑色大标题、紫蓝与青柠绿强调、圆角卡片、线性科技图标、流程/对比/清单模块；支持单图和 6–9 张系列图，不需要 API Key…

Attack cameras via RTSP, ONVIF, Axis config when 554 open.

Assemble an iMessage chat-reveal video ad from a thread JSON — one continuous Playwright recording of the conversation animating in (typing dots, composer typing, bubble pops, auto-scroll) crossfaded…

When the user wants to add, optimize, or design customer testimonials, reviews, or case study sections. Also use when the user mentions "testimonials," "reviews," "customer quotes," "social proof,"…

Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns. Use when building first-time experiences,…