Design AI Skills

Direct and produce Chinese-first cinematic motion videos with HyperFrames. Use this skill when the user wants a rendered promo film, article-to-video piece, product launch film, website-to-video…

Deprecated name for /lazyweb-design. Use /lazyweb-growth-report instead.

Render an interactive, self-contained HTML companion for a GEO content brief (04-content-brief) or a publish-ready draft (05-production), so a NON-technical client reviewer (founder, organizer staff,…

Use systematic spacing with 25% minimum jumps, start with excess whitespace

What Is This — explain anything as a picture-first HTML page. Use when the user types /whatis <topic>, or asks what something is / how it works and would be better served by big diagrams than by…

Structures presentations and verbal pitches using Matt Abrahams' WHAT-SO WHAT-NOW WHAT framework and impromptu speaking techniques. Use when preparing presentations, creating talking points, or…

Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color,…

Apocalyptic and dystopian world art direction for Blender including post-apocalyptic, zombie, alien invasion, post-human, dystopian, and utopian contrast sets.

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum…

Designs GDPR-compliant API patterns, PCI-DSS field handling, SOC2 audit log schemas, HIPAA data endpoints, and regulatory compliance checklists for any API. Use whenever the user asks about GDPR, data…

Manage long-lived `.sopify/` knowledge, including bootstrap, progressive materialization, reads, retention, and knowledge_sync policy.

When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "free…

Keeps a video motion-graphics kit and its editable Figma boards in sync - the creator designs and tweaks in Figma, Claude ports the changes into the Remotion components and brand tokens, and mirrors…

Use when recreating or rebuilding a multi-section page from a reference site — build section by section instead of all at once. Teaches the loop map (analyze_page_structure bands → capture_component…

Generate several genuinely different throwaway variations (designs, approaches, drafts) for the user to react to. Use when the user can only recognize what they want by seeing it — visual design, UX…

Orchestrates story, script, screenplay, concept, product promo, and multi-shot idea work into finished video. Use first when the user asks to make a video from a story or script; asks what next in a…

Best practices and idiomatic patterns for SwiftUI. Use when writing, reviewing, or editing SwiftUI code.

UX and visual design consultant for iOS apps using Apple's Liquid Glass design system (iOS 26+). Use when asking about element positioning, layout decisions, visual hierarchy, or whether a design…

テーマからアウトライン生成→文体プロファイル適用→Markdown記事出力を行う記事執筆スキル。 挿絵マーカーの自動挿入、style-analyzerプロファイル参照による文体統一に対応。 「記事を書いて」「ブログ作成」「テーマで記事生成」等のリクエストで発動。

Step 2 of the AI Video Editor pipeline — build the visual beats (Remotion TSX shots) over a project's master cut and bake a composited preview. Use when the user wants to add/edit overlays or…

固定したユースケースで用語・概念・値制約・状態・遷移・失敗・時間・writer/reader・authorityの欠落を監査するときに使う。世界全体のモデル化、図だけ、一般DDD解説、単なるデータ項目一覧には使わない。

Research best-in-class products using Browser MCP and WebSearch

Designs and generates one complete game UI page at a time using an approved style and screen contract, producing a page brief, reproducible image prompt, negative constraints, an actual visual asset…

Create a reusable personal IP character from user photos and optionally generate matching content illustrations. Use for personal brand avatars, cartoon personas, creator mascots,…

Designs and verifies skilld CLI output, terminal pickers, and full-screen flows. Use for terminal colours, loading feedback, keyboard controls, layout, errors, or end-to-end CLI UX reviews.

Generate architecture diagrams as fully editable SVG with native AWS, Azure, and GCP icons for cloud diagrams, or hand-drawn generic icons for everything else. Optionally deliver a self-contained…

Generate persisted image artifacts from text prompts. Use when the user asks to create, render, draw, illustrate, design, or generate a bitmap image, poster visual, product mockup, concept art, or…

将用户的演示讲稿转化为「专业 · 高级感」风格的演示文稿图像（高端商务编辑风）。 视觉特征：极浅灰主色（#F2F2F2）、金属灰辅色、金色点缀、深蓝灰背景（#0F233B），整体克制、克莱因蓝调、印刷品级质感。 分三步：① 理解演讲内容与受众 ② 生成每页高级商务视觉提示词（Markdown 格式，保存到 workspace/docs/outline/） ③ 调用 image_gen_ppt.py…

Framework (OSS). Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles,…

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design…

Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion. Use when creating video specs, planning…

Use when turning a product/design doc into a focused UI design brief, optional AI image-generation concept prompts, and implementation-ready UI direction without replacing the main idea workflow.

Use this skill when the user wants to research competitors, plan customer interviews, conduct market research, or understand their competitive landscape. Phase 2 of 12: interactive guided workflow for…

Transforma uma imagem de UI aprovada + um vídeo de referência (gerado por image-to-video) num HTML vivo e interativo: lê o movimento do vídeo (mapa de pixels + Gemini), escreve o mapa de vida,…

Social Media Publisher. Takes approved content from outputs/ and schedules it across platforms via Blotato MCP. Generates infographic-style visuals (stat cards, framework diagrams, process graphics,…

Generate 2D pixel art game assets, characters, sprite sheets, background removal, and game backgrounds. Trigger for "pixel art character", "sprite sheet", "walk cycle", "game sprites", "isometric…

Finds the simpler version while preserving what matters — not arbitrary reduction, but finding the core and discarding what is not it. TRIGGERS: 'find the simple version', 'simplify this', 'what's the…

Create, audit, and repair short page-native diary comics around an existing authorized recurring character, with story-directed page rhythm, exact dialogue, directional-surface proof, and…

把文章、案例拆解、素材、笔记或一个想法排成小红书 3:4 图文（1080×1440 轮播图），用一套产品界面风格：锌灰加一处橙，白页面上垫灰底盘，内容做成带分层阴影的卡片、窗口和对话框，有浅色和深色两版。先消化内容出分镜表，确认后从 20 个母版里排版、用代码画配图，渲染成每页 PNG 和总览图。只要用户提到小红书图文、小红书轮播、做成小红书、出图文、XHS…

Master specialized skill for building 2025/2026-grade browser extensions. Deep expertise in Manifest v3, Service Worker persistence (Alarms, Offscreen API), Side Panel API, and Cross-Browser…

Create truthful, human-centered marketing campaigns for an app or product, including positioning, channel copy, original artwork, editable layouts, README banners, and selective website integration.…

Secure API Platform resources with security expressions, voters, securityPostValidation, and operation-level access control

Generate academic presentation-style HTML slide decks and browser reports from PDFs, structured text, Markdown, paper summaries, outlines, or research notes. Use whenever the user wants to convert a…

Generate one Content-Derived Design direction from an HTML source, or let Auto choose the strongest direction. Use when the user says /reimagine-it generate, "redesign this page", "make it a landing…

Build deterministic animation for HyperFrames using motion rules, transitions, scene blueprints, and runtime adapters. Use when motion or camera behavior needs implementation.

Write a six-section prose description (purpose, props, anti-patterns, composition, accessibility, examples) for a Figma component's description field so LLMs read it via MCP. Triggers: describe this…

Expert children's book illustrator guide with 2024-2025 best practices, focusing on age-appropriate styles, color theory, character design, and visual storytelling for kids books that captivate young…

SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout systems, typography, color, spacing,…

CDER-track catalyst analysis for medicines: PDUFA target dates, AdCom votes, sNDA/sBLA label expansions, biosimilar interchangeability and 180-day exclusivity, Orange Book state, and CRL remediation…

Triggers on any visual property change in Figma — creating text, setting colors, adjusting spacing/padding/gap/radius. Enforces that ALL values bind to Figma Styles or Variables, never hardcoded.…

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.