Design AI Skills

Audit mobile product briefs, UX architectures, UI specifications, design-system artifacts, screenshots, prototypes, or implemented apps for product fit, task completion, information architecture,…

Corporate / info site lens. Use when the site's purpose is to explain and build trust — corporate sites, documentation, content-heavy sites, informational portals, blog hubs, public-sector sites. Load…

Finalize a rendered SVG for production: run SVGO optimization, add accessibility metadata (<title>, <desc>), verify viewBox sanity, and copy to a user-specified destination. Use when the user says…

Production-grade web motion design for React and Tailwind sites. Use when building, choosing, or reviewing animations, scroll effects, reveals, page transitions, hovers, counters, marquees, or…

Retrieve concise, graph-backed design context from AI Design Context with the local CLI. Use before implementing or reviewing a user-facing flow, reference fixture, prompt output, or known knowledge…

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and…

Use when choosing or reviewing timing, easing, interruption, reduced motion and lifecycle for React interfaces using Terra Motion Skills recipes.

Audits an existing SVG file or animated React scene and returns ranked findings with fixes: render-target safety (GitHub README image proxy, browsers), accessibility, motion quality, file weight and…

生成、美化或重构 PPT、slide deck、演示汇报、日报周报、经营分析、路演稿、方案汇报时使用。负责让幻灯片美观、能放映、排版干净、不像 AI 模板填空。只管视觉与排版质量,不用于 PDF 长报告,也不用于 HTML 网页或应用。

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create…

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML…

Auto-review pipeline — reads the full CEO, design, eng, and DX review skills from disk and runs them sequentially with auto-decisions using 6 decision principles. (gstack)

A digital-transformation roadmap for a legacy insurer — the diagnosis, the sequenced bets, and the operating rhythm to land them. Built as a decision-grade consulting deck for client executives.

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

This skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or…

Color rules that you must use with daisyUI 5

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and…

Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.

Prompt for creating detailed feature implementation plans, following Epoch monorepo structure.

End-user browser automation with cmux. Use when you need to open sites, inspect or interact with browser surfaces, wait for page state, and extract data without stealing focus.

Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square…

This skill should be used for personal operating-system workflows: content creation, voice consistency, relationship lookup, meeting preparation, weekly review, goal tracking, personal brand…

AI image generation for SEO assets: OG/social preview images, blog hero images, schema images, product photography, infographics. Powered by Gemini via nanobanana-mcp. Requires banana extension…

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack,…

Plan and orchestrate multi-slide PowerPoint creation from scratch. Use before generating a full deck with subagents: classify each slide type, enforce visual variety, set typography/spacing rules, and…

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual…

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

Finds root cause before any fix. Use when something errors, crashes, regresses, or used to work. Not for code review or new features.

Mobile layout skill for antislop. Use for layouts that reflow across screen sizes, phone to desktop: grids, overflow, tap targets. Load with the core.

When the user wants to build a partner program, launch an affiliate program, design integration partnerships, or create distribution partnerships. Also use when the user mentions 'partnerships,'…

Create or edit websites and application interfaces in the current iPolloWork Design session.

Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.

Build a paper sheet in Three.js that reads as paper up close — washi, cotton rag or kraft with baked fibre and tooth relief, laid and chain lines, a torn deckle edge with frayed fibres, four-layer…

Transform a supplied photo into an orientation-matched Gathered Scenes Zine paper poster. Keep retained photographic regions visually unchanged, translate paper-covered regions into simplified…

Create a new Remotion video

Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider,…

Use this skill when the user asks about creating videos with React, Remotion framework, programmatic video generation, video animations, or needs help with Remotion projects

Polish and refine existing motion against the transitions.dev motion-token scale — duration, distance, scale, blur, and easing — plus the rules for WHEN each token applies (open/close asymmetry,…

Pull 16 fast decisions out of the user with 4 sets of 4 open questions, then present an implementation plan. Only for risky changes, large product decisions, or large refactors. Run when the user…

Generate and postprocess general 2D game assets and animation sheets: pixel-art sprites, clean HD map props, creatures, characters, NPCs, spells, projectiles, impacts, props, summons, and transparent…

Generate a hand-drawn whiteboard infographic prompt. Takes source content (a post, newsletter, blog, research note) and returns a complete Gemini image generation prompt with a structured brief. Use…

Turn generated or hand-made art into exactly what a game engine loads. Covers sprite cutout, trim and nearest-neighbour fitting to frame sizes, pixelation to a palette, sprite sheets and strips,…

Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.

用于字节后端面试出题；以算法与编码能力为第一门槛，同时考察高并发场景下的系统设计能力。

Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user…

Build a QA checklist for verifying that a build matches the design. Use at implementation review. For the spec engineers build from, use `handoff-spec`.

Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack…

Audit and migrate existing Markdown rendering to Markstream, or upgrade a markstream-vue 1.x integration to 2.x. Use when Codex needs to replace another renderer, classify direct vs custom vs…

Use when the user asks to "design our change narrative", "build the old-world-to-new-game story arc", or "frame the shift our category is undergoing"; produces a Raskin-style strategic narrative arc —…

Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside…