设计与多媒体 Skills - 设计与多媒体 Agent Skills推荐与安装 - 第29页 - AI导哈

mantine-formmantinedev/skillsBuild forms using @mantine/form. Use this skill when: (1) setting up a form with useForm, (2) adding validation rules, schema validation (zod, valibot, arktype) or async validation, (3) working with nested object or array fields, (4) sharing form state across components with createFormContext, (5) choosing between controlled and uncontrolled mode, (6) reading form values during render with form.useWatchValue, (7) using the standalone useField hook, or (8) any task involving useForm, getInputProps, onSubmit, insertListItem, or form validation.2698 vision-sftwshobson/agentsFine-tune vision-language models (VLMs) with supervised learning on image+text data. Use when adapting a VLM to a visual domain or task, configuring frozen-vision-tower LoRA, or debugging a VLM fine-tune that trains without learning.2695 lean-ux-canvasdeanpeters/prod…r-skillsGuide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.2688 tasteforge-videoaffaan-m/eccUse for file-driven multimodal image, video, and 3D-asset discovery; taste interviews; distill or apply workflows; style-pack validation; editable EDL/FCPXML export; provenance audits; and offline planning that must fail closed before provider generation.2688 minimalbergside/awesom…n-skillsStripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.2685 jackyshen-gen-short-video-scriptmebusw/awesome-…n-skillsGenerate engaging short video scripts (30s-3min) for social media platforms like WeChat Channels, Douyin, Xiaohongshu, TikTok, and Reels. Use when user asks for "short video script", "WeChat/Douyin/TikTok/XHS content", "social media video content".2679 lightweight-3d-effectsfreshtechbro/cl…gnskillsLightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js. Use this skill when adding pseudo-3D illustrations, animated backgrounds, parallax tilt effects, decorative 3D elements, or subtle depth effects without heavy frameworks. Triggers on tasks involving Zdog pseudo-3D, Vanta.js backgrounds, Vanilla-Tilt parallax, card tilt effects, hero section animations, or lightweight landing page visuals. Ideal for performance-focused designs.2669 heygen-avatarheygen-com/skillsCreate a persistent HeyGen avatar — a reusable face + voice identity for the agent, the user, or any named character — powered by HeyGen Avatar V technology. Prompt-based creation by default (description → HeyGen builds it); photo upload is optional for real-person digital twins. Use when: (1) giving the agent a face + voice so it can present videos ("bring yourself to life", "create your avatar", "give yourself an avatar", "design a presenter", "set up an avatar", "let's make an avatar"), (2) the user wants to appear in videos as themselves ("create my avatar", "I want my face in a video", "digital twin of me", "build me an avatar"), (3) building a named character presenter ("create an avatar called Cleo", "design a character named X"), (4) establishing HeyGen identity before making videos — the correct FIRST step when no avatar exists yet. Chain signal: when the user says both an identity/avatar action AND a video action in the same request ("create an avatar AND make a video", "set up identity THEN create a video", "design a presenter AND immediately record"), run heygen-avatar first, then heygen-video. Returns avatar_id + voice_id — pass directly to heygen-video to create HeyGen videos. NOT for: generating videos (use heygen-video), translating videos, or TTS-only tasks.2668 k2f-thesissuzheng/k2fBlueprint degree theses from scattered drafts, data, and institutional rules—chapter arc, synthesized literature, evidence maps, and defense-ready hierarchy. Use when the user asks for a thesis, dissertation, PhD/Master’s manuscript, multi-chapter thesis, or thesis outline from notes or partial chapters. Create thesis documents with AI-native design and the highest aesthetic standards, powered by the K2F format and engine. Purpose-built for AI agents, K2F lets them focus on semantic content and design intent while automatically handling layout, typography, and formatting complexity.2664 drawio-diagramsstark-ai-de/agent-skillsCreate, edit, review, or export editable draw.io diagrams. Use when the user needs .drawio architecture, flow, sequence, network, or other technical diagrams; not data plots or artistic images.2664 rive-interactivefreshtechbro/cl…gnskillsState machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.2661 gsap-webiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollTrigger pins break with Lenis/Locomotive", or "set up smooth scroll with GSAP pinning". Covers GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis/Locomotive smooth-scroll sync for code-driven web motion.2661 vision-analysisminimax-ai/skillsAnalyze, describe, and extract information from images using the MiniMax vision MCP tool. Use when: user shares an image file path or URL (any message containing .jpg, .jpeg, .png, .gif, .webp, .bmp, or .svg file extension) or uses any of these words/phrases near an image: "analyze", "analyse", "describe", "explain", "understand", "look at", "review", "extract text", "OCR", "what is in", "what's in", "read this image", "see this image", "tell me about", "explain this", "interpret this", in connection with an image, screenshot, diagram, chart, mockup, wireframe, or photo. Also triggers for: UI mockup review, wireframe analysis, design critique, data extraction from charts, object detection, person/animal/activity identification. Triggers: any message with an image file extension (jpg, jpeg, png, gif, webp, bmp, svg), or any request to analyze/describ/understand/review/extract text from an image, screenshot, diagram, chart, photo, mockup, or wireframe.2660 animated-readme-logostark-ai-de/agent-skillsCreate, transform, animate, or audit GitHub README logos and their verified SVG/PNG/GIF delivery. Use when a repository needs branding assets, not ordinary README prose or app/site motion.2657 doc-kami-parchmentnexu-io/open-designWarm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.2649 typography-scaleowl-listener/de…r-skillsCreate a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).2646 frame-liquid-bg-heronexu-io/open-designWebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.2646 cleanbergside/awesom…n-skillsSimplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.2641 frame-logo-outronexu-io/open-designSegmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.2638 frame-glitch-titlenexu-io/open-designDigital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.2634 svg-animationssupermemoryai/skillsCreate beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, path animations, morphing shapes, loading spinners, or any animated SVG content. Covers SMIL animations, CSS-driven SVG animation, path drawing effects, shape morphing, motion paths, gradients, masks, and filters.2633 manim-composeradithya-s-k/manim_skillTrigger when: (1) User wants to create an educational/explainer video, (2) User has a vague concept they want visualized, (3) User mentions "3b1b style" or "explain like 3Blue1Brown", (4) User wants to plan a Manim video or animation sequence, (5) User asks to "compose" or "plan" a math/science visualization. Transforms vague video ideas into detailed scene-by-scene plans (scenes.md). Conducts research, asks clarifying questions about audience/scope/focus, and outputs comprehensive scene specifications ready for implementation with ManimCE or ManimGL. Use this BEFORE writing any Manim code. This skill plans the video; use manimce-best-practices or manimgl-best-practices for implementation.2629 muapi-ai-clippingsamuraigpt/gene…a-skillsTurn a long video into N viral-ready short clips with a single managed API call. Wraps muapi.ai's `/ai-clipping` endpoint, which handles transcription, highlight ranking through a virality framework (hook / emotional peak / opinion bomb / revelation / conflict / quotable / story peak / practical value), overlap dedupe, and vertical face-tracking auto-crop server-side. No local Whisper, no local LLM, no GPU.2626 short-form-videoiart-ai/tiktok-…o-skillsThis skill should be used when the user asks to "make a Reels/TikTok/YouTube Shorts video", "build a short-form video template", "write a hook for a short", "edit for retention", "add pattern interrupts", "make a video loop", "fix the first 3 seconds", "pace cuts for a vertical video", or "set up 9:16 safe areas". Covers the hook→retention→loop grammar of vertical short-form (distinct from a launch hype film).2625 vfx-text-cursornexu-io/open-designCursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.2616 frame-macos-notificationnexu-io/open-designRealistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.2610 add-sfxremotion-dev/remotionAdd a new sound effect to @remotion/sfx2602 illustration-styleowl-listener/de…r-skillsDefine an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).2602 k2f-purchase-ordersuzheng/k2fCreate issuance-ready purchase orders from requisitions, quotes, or line-item lists—structured so vendors can fulfill, ship, and invoice without clarification loops. Use when the user asks for a purchase order, PO, procurement order, or buyer-issued order to a supplier. Create purchase orders with AI-native design and the highest aesthetic standards, powered by the K2F format and engine. Purpose-built for AI agents, K2F lets them focus on semantic content and design intent while automatically handling layout, typography, and formatting complexity.2596 figma-design-to-codefigma/mcp-server-guide**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.2584