设计技能

Generate cinematic case study pages for films, documentaries, photography portfolios, and creative projects — film-frame hero images, structured crew credit grids, dark footage galleries, festival award sections, scroll-choreographed reveals via data-attribute animation orchestration. Warm cream palette with analog typography. Single-file HTML, zero build step. Triggers on film case study, documentary showcase, filmmaker portfolio, production company website, film credits page, creative project case study, director portfolio, photography case study.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

Generate hand-crafted web animation patterns as self-contained HTML: typewriter/rotator effects, progress bar simulations, file review state machines, staggered reveals, terminal status displays, streaming AI-response demos, popover/dialog/toast lifecycles, Lottie orchestration, scroll-driven sequences. Behavioral animations that simulate live software. Triggers on typewriter effect, progress animation, stagger reveal, terminal animation, streaming text, AI demo animation, toast animation, data simulation, product demo animation, loading sequence, conductor motion.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

Create, fetch, validate, or export DESIGN.md design system files in the Google Stitch 9-section format. Fetch reference designs from 68 brands (Linear, Stripe, Vercel, etc.) via getdesign CLI, generate scaffolds from existing CSS custom properties and Tailwind tokens, or validate and export with the Google @google/design.md CLI. Pairs with minoan-frontend-design for implementation. Triggers on "DESIGN.md", "create design system file", "extract design tokens", "codify the design", "getdesign", "make it look like [brand]", "lint design", "validate DESIGN.md", "export design tokens", "export tailwind theme".

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

デモアプリ・Webアプリの Cognito 認証のおすすめ構成。「Googleで続ける」か「メール＋パスキー（パスワードも併用可）」の2経路をCDKとフロントでどう組むか、パスキーが動かない設定の罠、Google client secret の置き場、ログイン画面のUX規約、Googleの同意画面に出るアプリ名の扱い。新しくデモアプリを作るとき、既存アプリの認証を作り直すとき、パスキーやGoogleログインが動かないときに読む。

中文简介正在准备中。当前显示原文说明。

Map user journeys, onboarding paths, entry points, first actions, trust points, accessibility risks, and SEO/LLM handoffs for public websites without redesigning the visual system. Use this skill when the user asks how new readers, returning users, project reviewers, community members, buyers, or AI agents should move through a site and what each page must make clear before layout implementation.

中文简介正在准备中。当前显示原文说明。

Independent re-derivation gate for proposed changes during autonomous execution. Evaluates a change (code diff, config edit, engine evolution, schema change) against the work's authority matrix and a 4-check protocol: invariant compliance, scope authorization, detection narrowness, and regression risk. Returns structured JSON with pass/fail per check, an overall verdict (APPROVE / REQUEST_CHANGES / REJECT), and blockers. Profile-driven thresholds (strict for unattended runs, lenient for desk supervision). Use when an autonomous agent proposes an engine change, when reviewing a Claude Code-authored modification before merge, or when an unattended profile requires independent re-derivation. Trigger on: "review/approve this proposed change," "critic-gate this," "is this change safe," "is this safe to merge," "should I let this land," "run the critic." Do NOT use for handoff-readiness checks (use rootnode-handoff-trigger-check), general code review, or design-time correctness. Authority matrix required.

中文简介正在准备中。当前显示原文说明。

Designs Claude Code prompts and CC environments. Produces CLAUDE.md drafts, agent topologies, scope-authorization frameworks, halt triggers, Skills/hooks/MCP plans, chat-to-CC handoff specs, and EXECUTION_PLAN.md remediation plans. Five modes: DESIGN (new CC deployments), EVOLVE (updates from friction), RESEARCH (evaluate a CC tool/pattern), TEMPLATE (reusable artifacts), REMEDIATE (consume hygiene findings → produce + execute plan). Do NOT use REMEDIATE for direct cleanup (Cat 1–10 — use rootnode-repo-hygiene Phase 2). Do NOT use for hygiene scanning (rootnode-repo-hygiene), chat prompts (rootnode-prompt-validation), or chat Projects (rootnode-project-audit).

中文简介正在准备中。当前显示原文说明。

Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.

中文简介正在准备中。当前显示原文说明。

Build, refactor, and architect Angular state with the @ngrx/signals Signal Store. Use whenever the user mentions signalStore, withState, withMethods, withComputed, withHooks, withLinkedState, withFeature, signalStoreFeature, withEntities, rxMethod, signalMethod, patchState, the SignalStore events plugin (withReducer, withEventHandlers), or wants to refactor BehaviorSubject/service-based state to Signal Store. Also use for designing custom store features, request status, optimistic updates, entity collections, and the store/service split in Angular. Do NOT use for @ngrx/store (classic Redux), createReducer/createEffect, or generic RxJS questions unrelated to Signal Store.

中文简介正在准备中。当前显示原文说明。

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications.

中文简介正在准备中。当前显示原文说明。

Standardized commit + PR workflow for tbh-meter. Analyzes changes, makes conventional commits (subjects feed the release changelog), and for any overlay/UI change captures a seed-driven screenshot to attach to the PR. Use when asked to commit, open a PR, or "commit this".

中文简介正在准备中。当前显示原文说明。

Decide the technical path once the ask is clear. Use when the WHAT is confirmed but more than one way to build it remains — architecture, technology, design.

中文简介正在准备中。当前显示原文说明。

应用从 AI for Everyone 蒸馏出的「迭代而非完美 — AI产品的渐进式改进」方法论。Use when the user needs practical guidance, diagnosis, workflow design, decision support, or an action plan related to iterate-not-perfect.

中文简介正在准备中。当前显示原文说明。

应用从 AI for Everyone 蒸馏出的「AI项目生命周期 — 从立项到落地的完整流程」方法论。Use when the user needs practical guidance, diagnosis, workflow design, decision support, or an action plan related to ai-project-lifecycle.

中文简介正在准备中。当前显示原文说明。

应用从 AI for Everyone 蒸馏出的「AI流水线 — 多组件串联的系统设计模式」方法论。Use when the user needs practical guidance, diagnosis, workflow design, decision support, or an action plan related to ai-pipeline.

中文简介正在准备中。当前显示原文说明。