Design AI Skills

Draft a brand-new document from the instruction and material, returning the title and chunked body markdown.

制作微信公众号 2.35:1 头图封面，使用 Codex 内置 image_gen 生成，视觉沿用「轻盈 AI 产品信息图」系统（白/浅薰衣草底、墨黑大标题、科技紫与青柠绿强调、圆角卡片、线性图标）。内置分享安全区校验——公众号封面分享到朋友圈时只保留正中央 1:1 方形，本 Skill 负责让标题不被切掉。用户说"做公众号封面""做头图""文章配首图""2.35:1…

在 Remotion 项目中创建带动画的金融 K 线图（蜡烛图）。涵盖数据获取（Yahoo Finance）、 插件架构（config / timeline / Scene / plugin）、Canvas 逐帧绘制、深色交易终端风格、 以及 Remotion Studio 预览和渲染输出。触发词：K线图、蜡烛图、candlestick、OHLC、 股票动画、金融图表视频、Remotion 图表。

Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent.…

Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization.…

Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever…

Create, repair, maintain, and consolidate skills. This skill should be used when users want to create new skills, fix broken skills that won't load, diagnose skill system issues, maintain skill…

PDCA + Sprint document templates — Plan, Design, Analysis, Report for individual features plus templates/sprint/{master-plan, prd, plan, design, iterate, qa, report}.template.md for sprint-level…

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

Cross-browser, cross-platform, and cross-device compatibility testing ensuring consistent experience across environments. Use when validating browser support, testing responsive design, or ensuring…

This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout…

Specialized UI/UX evaluator for the Evaluate-Loop. Use this for evaluating UI shell tracks, design system tracks, screen implementation tracks, or any track where the primary deliverable is…

Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.

UX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request. Use when copy feels vague, generic, or AI-sounding, or when the user says "fix the…

Game asset engineer that creates pixel art sprites, animated characters, and visual entities for browser games. Use when a game needs better character art, enemy sprites, item visuals, or any upgrade…

Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications, plus Sign in with Vercel, Vercel Passport, and Vercel KMS. Covers proxy.ts…

Provides framework-agnostic JavaScript runtime performance patterns. Use when optimizing hot paths, loops, DOM operations, caching, or data structure choices in performance-critical code.

Optimize e-commerce search relevance across the full pipeline from query understanding to result presentation. Use this skill when the user needs to improve search quality, implement query processing…

Create concise, architectural implementation plans using the RFC-Lite format. STRICTLY LIMITED VERBOSITY.

Build comprehensive AI-native brand asset systems that maintain consistency across all AI-generated content. Train AI tools on brand guidelines, create reusable prompt libraries, and manage…

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

Implement custom GLSL or TSL materials in React Three Fiber, including uniforms and vertex deformation. Use for shader code and shader debugging, rather than ordinary PBR settings or composer effects.

Generate QR codes with clean URLs, optional UTM parameters, captions, and print-safe exports. Use for single codes or batch campaign generation.

The single source of truth for how TFW commands survey their runtime, choose an execution mode (teams / subagents / sequential), route models, and run the TOH LOOP — the autonomous plan-execute-verify…

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

Safely update a Weaverse Pilot theme to the latest version — detects current version, fetches release diffs, plans changes category-by-category, preserves customizations, verifies build.

Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.

Design system and visual language for sales funnels. Provides color palettes, typography, spacing, component styles, and theming guidelines for a polished, premium look.

Use when a web project needs Google AI Studio or Gemini-generated favicon and Open Graph images, exported icon variants, and matching SEO metadata wiring.

Create distinctive, production-grade frontend interfaces with high design quality. Activate when user needs: "生成网页/创建网页/设计界面/前端设计/UI设计/网页制作/交互式网页". Output: Interactive HTML/CSS/React (web UI,…

Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs…

Generates a deliberately designed frontend aesthetic that avoids generic UI patterns. Use when the user explicitly requests to redesign a frontend by invoking this skill by name. Trigger keywords: use…

Design, sequence, and validate event-driven animation systems for games and interactive UI. Use when defining animation triggers, timeline ordering, transition guards, interruption/cancel rules,…

A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered…

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts,…

Build and leverage online communities to drive product growth and brand loyalty. Use when the user wants to create a community strategy, grow a Discord or Slack community, manage a forum or subreddit,…

Rebuild a package's unit test suite around a behavior specification (SPEC.md) derived from the implementation, with every test citing a numbered rule ID. Use when asked to do a spec-driven test…

Create or improve a Chinese academic PPTX from a scientific paper or research reading notes, with source figures and speaker notes. Use for 论文做PPT、文献汇报、组会PPT and paper-based conference or defense…

Generate professional infographics with 21 layout types and 22 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks…

snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving…

SERP-based semantic topic clustering for content architecture planning. Groups keywords by actual Google SERP overlap (not text similarity), designs hub-and-spoke content clusters with internal link…

Unix 气质的演讲设计与保真排版。把 Org/Markdown 提纲或经授权提炼的讲稿制成单文件离线 HTML；以语义角色选择巨句、对照、Unicode 关系图、证据与章节版式。默认深色，支持讲稿层、原生图表与翻页笔。USE WHEN present、做演讲、slides、按 outline 美化、把讲述精髓放上屏幕。NOT FOR 未经授权改写作者内容或生成企业 PPT。

CLI UX/spec: args, flags, help, output, errors, config, dry-run.

Runs a sequenced monolith-to-modular pipeline that sizes and inventories components, finds shared domain duplication, addresses flattening and hierarchy issues, analyzes coupling, then groups…

Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with…

Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into…

架构设计能力索引。API设计、安全架构、云原生、数据安全。当用户提到架构、设计、API、云原生时路由到此。

Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack

Direct high-fidelity cinematic video with AI — translates creative intent into technical cinematographic directives for Veo3, Kling, and Luma video models via muapi.ai

Write competitive research proposals for NSF, NIH, DOE, DARPA, and Taiwan NSTC. Agency-specific formatting, review criteria, budget preparation, broader impacts, significance statements, innovation…

Event prospecting skill. Takes a conference / event speakers URL, extracts the people, filters their companies against the user's ICP, then deep-researches only the speakers at ICP-fit companies.…