Design AI Skills

Use for the owner's personal creator-content thumbnails and covers for short video, Bilibili, Douyin, WeChat, or similar platforms from a title, summary, established real portrait, kangaroo IP,…

Use when preloading fonts, asset/network images, Lottie/Rive animations, local JSON/config, warming initial API data, or optimizing Flutter Web startup.

UI组件规范，定义按钮、输入框、卡片等基础组件的变体、尺寸、状态

선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference/<id>/ 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋…

Turns a rough idea for an animated graphic into a precise build brief for Claude Code, in your own brand. Asks for anything essential first (exact numbers, size, length, brand), keeps real results…

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or…

Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still…

Use this skill when running per-frame logic or controlling the PixiJS v8 render loop. Covers Ticker.add/addOnce/remove, deltaTime vs deltaMS vs elapsedMS, UPDATE_PRIORITY ordering, maxFPS/minFPS…

マーケティング目的の無料ツール戦略（リード獲得、SEO、ブランド認知）を立案するスキル。 「無料ツールを作りたい」「リード獲得ツール」「engineering as marketing」等のリクエストで発動。

Build and edit design documents (.vetd) on the Vetta design canvas — app screens, landing pages, slides, posters, infographics. Use when the user asks for a UI design, mockup, screen, deck, or poster,…

HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck,…

Build a scroll-driven cinematic landing page from a short video. The user provides a 5–15 second video (often AI-generated); this skill extracts every frame at HD JPEG quality, then produces a…

Bootstrap development guidelines for responsive layouts, components, and utility-first styling.

Entry point for the constraint toolkit. Routes to the right constraint skill based on your situation. Use when you say 'constraint', 'given this limit', 'we can't do X', 'is this really fixed', 'use…

表单页面创建与更新；可创建 19 种业务字段、Divider 与 ColumnContainer，更新组件树时保留已有的 Tab、按钮组、图片和状态区；支持联动规则和数据源绑定。

Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.

Run or participate in a Bitwarden design critique session — the weekly team critique and one-off product design reviews — grounded in the team's published etiquette guide and the Product Design Review…

Unofficial read-only Okala: grocery stores that deliver to you, compare prices across stores. Use when the user asks about Okala (okala.com) or wants food or groceries delivered in Iran.

Render vault notes as styled HTML and open in browser. Turn markdown docs, decisions, progress reports into readable previews. Use for "/preview docs/project-a/checkout-flow.md", "/preview progress…

Define font pairing and responsive hierarchy.

Reconstruct Blender models from supplied reference sheets, branding templates, texture atlases, orthographic front/side/back/top views, or mascot/logo art where visual fidelity to the source is more…

Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.

Use when asked "restyle this dashboard" or to design, polish or audit an interface hierarchy, tokens, color, type, dark mode or a design system. Suede AI delivers layout and words together,…

Brand identity building blocks: positioning, personality, archetypes, logo systems, color palettes, type pairing, voice, and guidelines documentation. Use when creating a brand, rebranding, or turning…

Knowledge base from FAA-STD-025f (Preparation of Interface Documentation). Use for IRD/ICD family definitions, common format and content, IRD shall-requirements, ICD design characteristics,…

Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound. Use when asked to "add animation", "match this easing",…

MASTER orchestration skill for producing a finished short-form video from raw talking-head footage. Use for ANY request to edit, produce, recut, or "make an ad/reel out of" talking-head footage — with…

为 Qwen3-TTS 音色设计工作流编写人物音色参数。使用时机：为漫剧人物设计专属音色（音色样本 voice_ref），需给出代表性台词 text 与音色描述 voice_description。输出 text 与 voice_description。

Local fumadocs documentation reference (latest). Fumadocs documentation framework. Use for building React.js documentation sites, MDX content, UI components, OpenAPI docs, CLI tools, and headless…

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

Republish an already-published X post into one or more destinations managed in PostFlow by extracting the source post text, capturing the quoted post cleanly, adapting the copy when needed, and…

Run pre-build discovery: interviews, assumption tests, demand evidence, continue/pivot/stop decisions, and first-version scope. Read README.md for guides.

Read, create or edit PowerPoint or Google Slides decks. Use for presentation, slide deck, PowerPoint, PPT, PPTX, or Google Slides requests.

Design moment-to-moment feedback — hit-stop, screen shake, tweening, and response timing — so actions feel readable and satisfying.

Visual QA for games. Reviews art style consistency, UI alignment, animation quality, screen adaptation, and visual polish.

Building rapid prototypes for frontend (UI components/pages) and backend (API mocks, simple servers). Use to validate new features or turn ideas into working demos. Working software over perfection.

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more.…

Compose PostHog grid canvases — widget grids (including the user's home canvas) built from reusable component canvases. Use when a task asks to add, fill, move, resize, or remove a widget on a grid or…

Hand-drawn editorial crowd illustration — confident sketchy black ink contours over flat 3-color spot fills on a pure-white background, scene-as-metaphor composition, fine-line backdrop drawn lighter…

Use when doing parametric 3D modeling, 2D drafting, geometric kernel development, BIM/IFC processing, PCB design, or AutoCAD .NET development. Index of 21 skills: FreeCAD, OpenSCAD, OCCT, CadQuery,…

Make prose sound natural and human while preserving meaning, voice, facts, and format. Use for writing or requests to reduce generic AI-sounding patterns.

500+ individual section patterns — heroes, feature grids, pricing tables, testimonials, CTAs, footers, FAQs, stats, timelines — each with specs, spacing, and code. Use when choosing or building one…

Simulate an objective first-time user review of a webpage or UI from the perspective of the target audience — no prior project context, no insider knowledge. Use this skill when the user asks things…

Use when the user says 'migrate elementor to bricks', 'convert elementor to bricks', or 'move my site from elementor to bricks'. Reads the Elementor JSON widget data, maps each widget to its Bricks…

Power Platform performance optimization. Use when: performance, slow, optimization, delegation, caching, indexing, query performance, API limits, throttling, virtual scrolling, lazy loading,…

Diagnose and fix UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a…

Three.js skills for creating interactive 3D elements and experiences on the web. Covers scene setup, geometries, materials, lighting, textures, animation, loaders, custom shaders, post-processing,…

Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user wants to document…

Claude Code Channels: real-time event streaming between concurrent sessions, pub/sub patterns, event filtering, cross-session state synchronization, and reactive agent workflows

Breadcrumb design, hierarchical navigation, and location indicators.

gongnyang/awesome-html-scrolline-deckの方式で日本語スライドを制作・再現する。原典固有の生成器・テンプレート・実装と個別条件を保ち、実制作例を参考に日本語の資料を作るときに使う。