Design AI Skills

Use whenever the agent needs to add, create, hand-author, patch, or place Motion Graphic JSX assets in a OpenChatCut project. This is the direct-authoring path: use create_motion_graphic_from_code /…

Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget

Reviews React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV playback/DRM integration, low-memory TV performance, and TV accessibility. Use when building, debugging, or reviewing…

从数据剖析到出版级成图的完整可视化工具。先做数据剖析（列类型/样本量/分布/异常值/分组结构/相关性）， 再结合论证目标推荐图型，主动拦截科研画图经典错误，产出 Nature / Science / IEEE / Elsevier / PNAS / 中文核心期刊级别的成图。覆盖数据 EDA、图表契约、选图决策、出版级绘制、程序自检 + AI 读图闭环、多格式…

Generate an image from a text prompt via the cloud LLM image proxy, persist it as a content-addressed workspace asset, and return a ContentBlock that downstream renderers can attach. Use whenever the…

Generate high-CTR YouTube thumbnails using Nano Banana 2 via the Arcads external API. Handles reference image upload, character likeness alignment, proven CTR-tested prompt formulas, and parallel…

生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景

Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal,…

Stage 1 planning skill usable in Codex and Claude Code. Build and iterate slide-outline.md until explicit user approval.

Watchlist monitor for DeFi pools, lending markets, and vaults. Surfaces only changed entries — APR floor breached, utilization ceiling hit, TVL delta above threshold, health factor approaching…

Use when the user wants an end-to-end premium visual design workflow for any type of website or web page created directly from images.

Expert patterns for RPG/action ability systems including cooldown strategies, combo systems, ability chaining, skill trees with prerequisites, upgrade paths, and resource management. Use when…

Implementation strategy selection framework. Use when planning implementation strategy, selecting development approach, or defining verification criteria.

Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific…

Develop an independent visual language and turn the human-chosen direction into a production-ready graphic, brand, campaign, publication, web, or product system. Use when originality and…

Designs team culture and sets standards of excellence using David Singleton (Stripe) and Dharmesh Shah (HubSpot) frameworks. Use when building teams, setting cultural values, creating rituals, or…

Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user asks to add animation, "make it feel…

Audit and improve the visual design, polish, and player experience of an existing game. Use when the user says "make my game look better", "improve the design", "add polish", "add juice", "add…

Guide to D3.js for building custom interactive data visualizations

Build a premium cinematic landing page with mouse-scrub video hero and brand-driven narrative-arc sections. Use whenever the user provides a hero video plus a product / subject / brand and wants a…

Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human…

Master API Platform v4 State Providers and Processors (ProviderInterface/ProcessorInterface) to decouple data retrieval and persistence from entities

Generate comprehensive design briefs for design projects. Use this skill when designers ask to "create a design brief", "structure a design project", "define design requirements", or need help…

Teach the user a new skill or concept, within this workspace.

The entry point for Intent, a UX and design strategy system. Sets project context, routes to specialized skills, and loads foundational UX knowledge. Activate when starting any UX or product design…

Symfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use…

Design and implement agent-based models (ABM) for simulating complex systems with emergent behavior from individual agent interactions. Use when "agent-based, multi-agent, emergent behavior, swarm…

Best practices for building UI with Jetpack Compose, focusing on state hoisting, detailed performance optimizations, and theming. Use this when writing or refactoring Composable functions.

Review a system architecture for scalability, reliability, and maintainability. Use when a senior developer needs to critique a design.

Implement cross-cutting Hotwire UX feedback patterns: loading states, busy indicators, progress bars, optimistic UI, render interception, and view/page transitions. Prefer this skill when the core…

Reusable fixed-style PPTX generation skill for the Apricot Ritual Index visual brand — warm apricot background (#FDDEB6), cocoa-brown typography (#6C4832), refined minimalist editorial poster…

기능 추가·컴포넌트 생성·동작 변경 등 모든 창작 작업 전에 사용. 구현 전에 의도·요구사항·설계를 대화로 확정 (심층 인터뷰가 필요한 대규모 기능은 /spec 사용)

Suite of tools for creating elaborate, multi-component HTML applications using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management,…

Competitive X-Ray — analyze any competitor URL vs your site. Use when user wants to compare their site against a competitor, benchmark performance, or understand competitive positioning.

Load and reuse 3D assets in React Three Fiber with useGLTF, useLoader, Suspense, and preloading. Use for model loading, decoder setup, caching, cloning, or loading/error UI.

Make the CometChat Android v6 UI match your app in the Jetpack Compose cohort — theming with the CometChatTheme composable and lightColorScheme/darkColorScheme, per-component style data classes,…

Core visual design principles that underpin all great design. Master gestalt psychology, visual hierarchy, composition, color theory, and typography fundamentals. Use when making design decisions or…

Process images for cleanup, conversion, metadata, comparison, icons, palettes, collages, and sprite sheets. Use for single-image or batch image workflows.

Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors",…

実際のポスト、エッセイ、ローンチノート、ドキュメント、またはサイトコピーからソース派生の執筆スタイルプロファイルを構築し、コンテンツ、アウトリーチ、ソーシャルワークフロー全体でそのプロファイルを再利用します。ユーザーが一般的なAI執筆トロープなしで声の一貫性を望む場合に使用します。

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

Create and maintain comprehensive brand guidelines including visual identity, tone of voice, messaging, color palettes, typography, and usage rules for consistent brand expression. Use when…

Integrate music, SFX, VO, mixing, and reactive audio behavior so audio supports gameplay and UX.

Compile Tailwind CSS for Hyvä themes in Magento 2. Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme.…

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.

Use when generating an ACG (anime/manga) character settei sheet (キャラ設定資料) — multi-view full-body lineup, expression list, detail callouts, color palette — from a template settei image plus a single…

Load when creating or restyling a polished editable Feishu or Lark whiteboard, infographic, diagram, poster, or visual explainer; do not load for generic SVGs, static images, or other whiteboard…

Guides creation of OpenGraph and Twitter share images using next/og ImageResponse. Covers layout patterns, custom fonts, avatars, title case, and Satori rules. Use when building OG images, Twitter…

Explore and compare practical options before implementation. Use for requested brainstorming, requirements tradeoffs, diagnosis options, or UI concepts; skip when the approach is already selected.

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial…