デザインのスキル

Use when a design needs pressure-testing for UX, information architecture, states, and accessibility.

日本語の概要は準備中です。原文の説明を表示しています。

Agent Brain /brain-plan: the brief/design is strong enough to implement.

日本語の概要は準備中です。原文の説明を表示しています。

Agent Brain /brain-design: a product brief needs ux or interaction design before planning.

日本語の概要は準備中です。原文の説明を表示しています。

Generate probability-weighted alternative options that challenge default thinking. Forces unconventional alternatives and exposes hidden assumptions behind the "obvious" choice. For decision-point analysis, NOT full design exploration. Triggers on "대안", "alternatives", "옵션 뽑아", "options", "어떤 방법이", "아이디어", "다른 방법", "선택지".

日本語の概要は準備中です。原文の説明を表示しています。

Used when the user asks to "create slides", "make a presentation", "build a deck", "design slides", "generate a pitch deck", "create a conference talk", "make a keynote", "presentation design", "slide layout", "slide template", "presentation structure", or mentions slides, presentations, decks, or talks in any context. Also triggers when the user wants to plan the content and visual direction of a presentation before generating it. This is the entry-point orchestrator that drives the full slide creation workflow across both HTML and PPTX formats. Examples: "I need to create slides for my conference talk about AI adoption", "can you turn this markdown into a presentation?", "I have a product demo tomorrow and need visual materials", "convert my existing PowerPoint to interactive HTML slides".

日本語の概要は準備中です。原文の説明を表示しています。

Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code.

日本語の概要は準備中です。原文の説明を表示しています。

Build MindNode-inspired mind mapping interfaces — 8 node shapes, 27+ themes, layout algorithms (horizontal, vertical, radial with D3), keyboard shortcuts, focus mode, dual view. React + xyflow/react v12 + Zustand + Tailwind. Triggers on mind map, visual thinking tool, node-based diagram, brainstorm canvas, MindNode.

日本語の概要は準備中です。原文の説明を表示しています。

Polish screen recordings with Recordly (open-source Screen Studio alternative) — auto-zooms, cursor animations, webcam overlays, styled backgrounds, timeline editing. Also includes Slant: browser-based 3D perspective renderer with 12 animation presets and MP4/GIF export. Triggers on screen recording, demo video, Recordly, screen capture polish, product walkthrough, 3D perspective, Slant.

日本語の概要は準備中です。原文の説明を表示しています。

Generate cinematic scrolltelling websites where scroll drives the narrative: Lenis smooth scroll, GSAP ScrollTrigger cinematic section reveals with fluid OKLCH color transitions, Three.js painted-texture shader backgrounds reactive to cursor, scroll, velocity, and chapter progress. Four modes — chapter-reveal (scroll-paced storytelling), painted-backdrop (reactive shader canvas), full-cinema (complete cinematic site), catalog (all shader presets side by side). This skill should be used when building storytelling websites, scroll-driven experiences, cinematic landing pages, or any page where sections reveal as chapters with color transitions and ambient 3D backgrounds. Triggers on scrollytelling, cinematic scroll, scroll-driven storytelling, Lenis smooth scroll, GSAP ScrollTrigger, scroll chapter reveal, scroll color transition, painted shader background, narrative scroll website, premium scroll experience, shader catalog.

日本語の概要は準備中です。原文の説明を表示しています。

Evaluate design from a UX perspective with Nielsen's heuristics scoring, anti-pattern detection, persona-based testing, and actionable feedback. Report-only. Triggers on critique, UX review, design feedback, how does this look, evaluate the design, component review.

日本語の概要は準備中です。原文の説明を表示しています。

Plan the UX and UI for a feature before writing code. Run a structured discovery interview, then produce a design brief (.design-context.md) that guides implementation. Establishes design direction, constraints, and strategy before any code is written. Triggers on plan the design, design brief, shape the UX, before we build, design discovery.

日本語の概要は準備中です。原文の説明を表示しています。

Search and download images from 15 APIs in parallel (Openverse, Pexels, Pixabay, Met Museum, Cleveland Museum, Art Institute of Chicago, Getty Museum, NASA, Rijksmuseum, Wikimedia Commons, Unsplash, Smithsonian, Europeana, Iconify, Pollinations AI). Supports license filtering, presets (military, museum, stock), cached results, and bulk download with metadata sidecars. Triggers on find images, stock photos, public domain artwork, museum images, CC-licensed, NASA photos, icons.

日本語の概要は準備中です。原文の説明を表示しています。

Generate 20,000+ particle swarm simulators in two modes: sandbox (complete Three.js host runtime with gesture controls, security validation, code injection pipeline) and sim (behavior function bodies that position/color particles via a sandboxed API). The AI writes ONLY a function body — the host handles rendering, input, and security. Triggers on particle swarm, swarm simulator, particle behavior, swarm sandbox, gesture particles, 20K particles, particle function body, swarm sim, particle playground.

日本語の概要は準備中です。原文の説明を表示しています。

Design and prototype in Paper Design (app.paper.design) — read/write designs via MCP, convert to React/Tailwind code, import HTML/CSS, sync design tokens. Also covers Paper Shaders (@paper-design/shaders-react) — 30+ shader React components (mesh gradient, fluted glass, liquid metal, god rays, halftone, grain gradient, pulsing border). Pairs with minoan-frontend-design for creative direction. Triggers on Paper Design, paper.design, design-to-code, artboard, Paper Shaders, Paper MCP, prototype.

日本語の概要は準備中です。原文の説明を表示しています。

Build interactive live slide decks with Vite + React 19, TanStack Router, WebGPU shaders, Framer Motion orchestration, 1920x1080, access-gated SPA. 39 components (layout, interaction, graphics, chrome, navigation), direction-aware slide transitions, presenter mode with speaker notes and BroadcastChannel sync, Playwright PNG/PDF export, YAML-driven authoring, Cloudflare/Vercel/Netlify deploy. Triggers on: slide deck, presentation, pitch deck, investor deck, product demo, conference talk, live slides, WebGPU slides, interactive presentation, presenter mode, speaker notes, overwatch deck.

日本語の概要は準備中です。原文の説明を表示しています。

Generate and edit high-quality images using Google's Nano Banana Pro (Gemini 3 Pro Image) AI model. Use this skill when working with AI image generation or editing tasks including (1) Creating images from text prompts with professional quality, (2) Editing existing images with natural language instructions, (3) Multi-turn iterative image refinement, (4) Product photography and marketing visuals, (5) Creating infographics and diagrams with text, (6) Photorealistic and artistic image generation, (7) Batch image generation workflows, (8) Testing and troubleshooting Gemini image generation API. Supports up to 4K resolution, multiple aspect ratios, reference images, and advanced prompting techniques for cinema-quality results.

日本語の概要は準備中です。原文の説明を表示しています。

Build distinctive, production-grade frontend interfaces — websites, landing pages, dashboards, React components, HTML/CSS layouts, editorial heroes with depth-parallax (Astryx pattern), pointer-reactive fluid effects, pixel-glitch canvas heroes and terminal-style tool-panel dioramas (Composio pattern). Avoids generic AI aesthetics. Triggers on web UI, styling, beautify, frontend design, dashboard, landing page, React component, editorial hero, glitch hero, dev-tool landing page.

日本語の概要は準備中です。原文の説明を表示しています。

Generate 3D models from text or images via 5 providers: Meshy (text-to-3D, texturing, batch), fal.ai Hunyuan3D Pro ($0.225, PBR), WaveSpeedAI Rapid ($0.0225, bulk), Trellis 2 (poly control), and Local Depth (free offline ONNX depth maps + mesh). Includes GLB viewer. Triggers on 3D model, image to 3D, GLB, depth map, text to 3D, texturing, 3D asset, Meshy, Hunyuan.

日本語の概要は準備中です。原文の説明を表示しています。

Guide creating and reviewing skills that extend Claude with specialized knowledge, workflows, or tool integrations. Covers SKILL.md structure, frontmatter quality, trigger design, eval pipelines, and packaging. Triggers on create a skill, review this skill, new skill, optimize skill, skill quality.

日本語の概要は準備中です。原文の説明を表示しています。

Reference WebGPU APIs, TSL syntax, node materials, WGSL integration, compute shaders, and post-processing in Three.js. For complete particle canvases use threejs-particle-canvas; for GLSL shaders use rocaille-shader. Triggers on TSL shader, WebGPU renderer, node material, WGSL, GPU compute, WebGPU setup.

日本語の概要は準備中です。原文の説明を表示しています。

Scaffold editorial documentation sites with the Vellum design system — OKLCH palette, Bodoni Moda / Source Serif 4 / Inconsolata typography, warm or dark space theme, 35 semantic components (state cards, parity matrices, entity dossiers, stat stacks, utterance blocks, editorial notes, entity flows, fact blocks, sub-navigation, source lists, debugger panels, ring visualizations, phase timelines, glossaries, subject-intro, stat-bar, hero-image with lightbox, gallery/masonry grid, audio player with Web Audio API). Static HTML, zero build step. Use when building competitive intelligence pages, personal archives, internal documentation, roadmaps, or multi-page static sites that need a designed, non-generic aesthetic.

日本語の概要は準備中です。原文の説明を表示しています。

Convert photos into Slack-optimized custom emojis using Nano Banana Pro (Gemini 3 Pro Image) with automatic subject identification, style transformation, and image editing. 64KB/128px compliant. Triggers on: slack emoji, photo to emoji, convert to emoji, edit emoji, emoji maker.

日本語の概要は準備中です。原文の説明を表示しています。

Generate physically-based atmospheric scattering shaders — sky domes, planetary atmospheres, LUT-optimized pipelines, depth-aware post-processing. Four modes — sky-dome, atmosphere-post, planet, lut. Triggers on atmospheric scattering, sky shader, sunset rendering, planet atmosphere, Rayleigh scattering, Mie scattering, volumetric sky, sky dome, atmosphere post-processing, aerial perspective, transmittance LUT, sky rendering, realistic sky, planetary rendering.

日本語の概要は準備中です。原文の説明を表示しています。

Generate interactive Three.js canvases in six modes: narrative particle phase cycles, WebGPU spinner/loaders, infinite gallery tunnels, animated glTF specimens, vinyl showcase with webcam reflection, glass hero sections with physically-accurate refraction/dispersion/iridescence. Ships a reusable Phosphor Vigil FX post-processing module (CRT composite, scanlines, chromatic aberration). Self-contained HTML output. Triggers on particle system, ambient 3D canvas, WebGL art, spinner, loader, infinite tunnel, glTF animation, CRT post-processing, vinyl record, webcam reflection, 3D product showcase, glass hero, 3D glass, refraction, dispersion, iridescent glass, frosted glass panes, glass material.

日本語の概要は準備中です。原文の説明を表示しています。