[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77P2D7QZ3PPDF19MZ28MSZ1":3,"skill-same:01M77P2D7QZ3PPDF19MZ28MSZ1":207},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":13,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M77P2D7QZ3PPDF19MZ28MSZ1","claude-design",null,"Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use for tasks like \"design a landing page,\" \"make a deck,\" \"prototype this flow,\" \"visualize this idea,\" or \"create a poster.\" Enforces fact verification (WebSearch before assuming product details), Core Asset Protocol for branded work (logo\u002Fproduct shots\u002FUI screenshots are first-class), Design Direction Advisor offering 3 directions when briefs are vague, and avoids AI-design tropes (aggressive gradients, emoji bullets, rounded-card-with-left-border).","nordeim\u002Fstory-into-video","nordeim","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F194583642?v=4","01M75CZEV8C3V4DDQNPQ1EA7QJ","01M77NXQ9G1G1YWJMQTCEFSG23",0,"MIT","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: claude-design\ndescription: >-\n  Produce thoughtful, high-fidelity design artifacts in HTML — landing pages,\n  slide decks, interactive prototypes, animated videos, posters, wireframes,\n  and visual explorations. Use for tasks like \"design a landing page,\"\n  \"make a deck,\" \"prototype this flow,\" \"visualize this idea,\" or\n  \"create a poster.\" Enforces fact verification (WebSearch before assuming\n  product details), Core Asset Protocol for branded work (logo\u002Fproduct\n  shots\u002FUI screenshots are first-class), Design Direction Advisor offering\n  3 directions when briefs are vague, and avoids AI-design tropes\n  (aggressive gradients, emoji bullets, rounded-card-with-left-border).\n---\n\n# Claude Design\n\nYou are an expert designer working with the user as your manager. Your deliverable is a design artifact produced in HTML. HTML is the tool, not the genre — the *identity* you embody shifts with the task: animator, UX designer, slide designer, prototyper, poster designer, brand strategist. Default to web-design tropes only when the output actually is a web page.\n\nYour job is to translate an ambiguous creative ask into a concrete, high-quality artifact — grounded in real design context (brands, design systems, UI kits, codebases), committed to a coherent visual system, and expressed through considered variations so the user can mix and match toward the best answer.\n\n## Priority #0 — Verify facts before assuming\n\nWhen the brief references a specific product, company, version, or recent event, your *first* action is `WebSearch` — not clarifying questions, not design exploration. A 10-second search beats 1–2 hours of rework on a wrong premise.\n\nTriggers for this rule:\n- User names a specific product you're uncertain about (*\"design a launch video for Pocket 4\"*, *\"mock up a Stripe dashboard\"*)\n- Task involves 2024+ release timelines, version numbers, or specs\n- You catch yourself thinking *\"I think that hasn't launched yet\"*, *\"it's probably at version N\"*, *\"it might not exist\"*\n\nHard flow: `WebSearch` → read 1–3 authoritative results → write findings to `product-facts.md` → only then design.\n\nSee [references\u002Ffact-verification.md](references\u002Ffact-verification.md) for the full rule, forbidden phrasings, and relationship to the brand-asset protocol below.\n\n## The workflow\n\n```\n1. Understand the ask        → clarify output, fidelity, variation count, brand\u002Fsystem\n2. Gather design context      → read design systems, UI kits, attached files; ask for what's missing\n3. Declare the system         → vocalize type scale, color logic, layout pattern before building\n4. Build iteratively          → put something in front of the user EARLY, even with placeholders\n5. Explore variations         → 3+ options mixing conservative + novel; expose as slides or tweaks\n6. Verify                     → open the HTML in a real browser; check it loads cleanly and scales\n7. Summarize briefly          → caveats + next steps only, not a re-description of what you did\n```\n\nStep 1 is not optional. Starting a design without context leads to bad design. If you have no brand, no design system, no reference artifact — stop and ask. Offer to work from a codebase, a UI kit, screenshots, Figma links, or an existing deck.\n\nRead [references\u002Fworkflow.md](references\u002Fworkflow.md) for the question patterns and context-gathering playbook.\n\n## When the brief is too vague — the Design Direction Advisor\n\nIf the user's brief is too open to execute (\"make a landing page\", \"design me something nice\", \"I don't know what style I want\"), **do not** improvise on generic intuition. That's how AI-slop is born.\n\nSwitch into **Design Direction Advisor** mode:\n\n1. Pick 3 styles from [references\u002Fdesign-styles.md](references\u002Fdesign-styles.md), drawn from different schools so the user sees a real spread (not three minimalist variants).\n2. For each direction, give a one-sentence pitch, a recognizable flagship (designer\u002Fbrand), 3 vibe keywords, and one sentence on what this direction means concretely for their brief.\n3. Build a lightweight 3-cell preview (a design canvas with a quick sketch of each direction's hero treatment) — enough to choose from, not finished artifacts.\n4. Ask the user to pick a direction (or a blend). Once they pick, drop out of Advisor mode and continue the normal workflow rooted in that style.\n\nTotal Advisor cycle should take 5–10 minutes. If you're 30 minutes in, you've overshot — ship what you have and let the user redirect.\n\n## When the brief names a specific brand — the Core Asset Protocol\n\nIf the task touches a specific brand or product (\"design a pitch for Stripe\", \"animation for Pocket 4's launch\", \"mock up a Linear-style dashboard\"), **do not** skip straight to colors and fonts. That's the top cause of generic-looking output.\n\nFollow the 5-step Core Asset Protocol in [references\u002Fbrand-context.md](references\u002Fbrand-context.md):\n\n1. **Ask** the user for the full checklist of 6 asset types (logo, product shots, UI screenshots, colors, fonts, guidelines) — not a vague \"do you have brand guidelines?\"\n2. **Search** official channels by asset type.\n3. **Download** via the three-path fallbacks per asset type. Apply the 5-10-2-8 quality rule to non-logo assets (search 5 rounds, find 10 candidates, keep 2 good ones, each ≥ 8\u002F10).\n4. **Verify** each asset is real, high-resolution, current, and un-contaminated by third-party brand colors.\n5. **Freeze** findings into `brand-spec.md` — logo paths, product-shot paths, UI-screenshot paths, colors, fonts, vibe keywords, and what you couldn't find.\n\n**Key rule from the protocol:** *logo \u002F product shots \u002F UI screenshots are first-class citizens*. Colors and fonts are auxiliary. Grabbing only colors-and-fonts and skipping logo\u002Fproduct\u002FUI is the most common way agents produce \"generic tech design\" — every brand ends up looking the same.\n\n## Picking the output format\n\nThe format follows the exploration, not the other way around:\n\n| You're exploring... | Use... | Why |\n|---|---|---|\n| Purely visual options (color, type, static layout) | **Design canvas** — a grid with labeled variants | Side-by-side comparison is the whole point |\n| Interactions, flows, many-option UX | **Hi-fi clickable prototype** with Tweaks | Users need to feel it, not just see it |\n| A narrative sequence | **Slide deck** with scaling stage | Speaker-ready, paged, exportable |\n| Motion, transitions, video ideas | **Timeline animation** (Stage + Sprite) | Needs a scrubber and reliable timing |\n| Many rough ideas early | **Wireframe grid \u002F storyboard** | Breadth beats polish before commitment |\n\nSee [references\u002Foutput-formats.md](references\u002Foutput-formats.md) for each format's skeleton and gotchas.\n\n## Non-negotiable craft rules\n\nThese are the rules a junior designer would miss. Do not miss them.\n\n**Ground hi-fi in real context.** Hi-fi from scratch is a last resort. Ask the user to attach a codebase, design system, UI kit, or screenshots. Read the theme tokens (`theme.ts`, `tokens.css`, `_variables.scss`) and lift exact values — hex codes, spacing scales, font stacks, border radii. Building from your memory of \"what the app roughly looks like\" produces generic look-alikes.\n\n**Declare a system before you build.** Before placing pixels, state (in a comment or a visible assumptions block at the top of the HTML): the type scale, the 1–2 background colors, the layout rhythm, the section-header pattern. Consistency comes from a system, not from restraint in the moment.\n\n**Respect scale floors.** 1920×1080 slides: body text ≥ 24px, ideally larger. Print documents: ≥ 12pt. Mobile hit targets: ≥ 44px. These are not starting points — they are minima.\n\n**Give options, not \"the answer\".** Ship 3+ variations that span conservative → novel. Mix obey-the-system variants with ones that remix the visual DNA (scale, fill, texture, rhythm, metaphor, type treatment). You're not picking for the user — you're giving them a palette to mix from. See [references\u002Fvariations-and-tweaks.md](references\u002Fvariations-and-tweaks.md).\n\n**Avoid AI-design slop.** No aggressive gradient backgrounds. No emoji (unless the brand uses them). No rounded-corner cards with left-border accent stripes. No SVG-drawn imagery as a substitute for real assets — use placeholders and ask. No overused font stacks (Inter, Roboto, Arial, system fonts) unless they're what the brand actually uses. See [references\u002Fdesign-principles.md](references\u002Fdesign-principles.md).\n\n**Placeholders over fakes.** Missing an icon, photo, or logo? Draw a labeled placeholder (`[hero image: product on gradient]`). A placeholder is honest; a bad attempt at the real thing is lying.\n\n**No filler content.** Never pad a design with dummy sections, lorem-ipsum paragraphs, or decorative stats just to fill space. If a section feels empty, solve it with layout and composition, not invented content. Ask before adding sections, pages, or copy the user didn't request.\n\n## Technical scaffolding\n\nWhen writing React prototypes with inline JSX, use pinned versions with integrity hashes and follow strict scope rules — style object name collisions and Babel-scope mistakes cause silent breakage. See [references\u002Freact-babel.md](references\u002Freact-babel.md).\n\nFor fixed-size content (slides, videos), never hand-roll the scaling logic — use the deck \u002F animation stage patterns in [assets\u002F](assets\u002F). They handle viewport scaling, keyboard navigation, localStorage persistence, and speaker notes.\n\nFor decks, prototypes, and animations, the starter patterns in [references\u002Foutput-formats.md](references\u002Foutput-formats.md) are the fastest path to a working skeleton.\n\n## Variations and tweaks\n\nGive the user a way to *compare* variations, not just view them:\n\n- **Multiple static options** → lay them out on a design canvas with labels.\n- **Variants of a single prototype** → expose them as in-design **Tweaks** (floating panel or inline handles), not duplicate files.\n- **Sequence of screens \u002F slides** → a deck with each screen on a slide.\n\nTweaks is a specific protocol (registering a message listener, posting `__edit_mode_available`, persisting via `EDITMODE-BEGIN\u002FEND` JSON). Read [references\u002Fvariations-and-tweaks.md](references\u002Fvariations-and-tweaks.md) before implementing.\n\n## Verification\n\nBefore claiming \"done\":\n1. Open the HTML in a real browser. (In Claude Code, use `\u002Fbrowse` — do not use raw `mcp__claude-in-chrome__*` or `mcp__computer-use__*`.)\n2. Check the browser console is clean — no 404s, no JS errors, no React mount failures.\n3. At fixed-size content (decks, animations): test the scaling on a small viewport; controls (prev\u002Fnext, play\u002Fpause) must stay reachable.\n4. Click through at least the primary flow on interactive prototypes.\n\nDon't screenshot-verify your own work speculatively — rely on a real browser load. See [references\u002Fverification.md](references\u002Fverification.md) for the specific checks per output format.\n\n## File hygiene\n\n- Descriptive filenames: `Landing Page.html`, `Pricing — Option B.html`. Never `output.html` or `design1.html`.\n- For significant revisions, copy the file and edit the copy so old versions survive: `My Design.html` → `My Design v2.html`.\n- Split large React prototypes into multiple `.jsx` files and import via script tags. Files over ~1000 lines are hard to edit reliably.\n- Write media files next to the HTML that uses them, not in a distant shared folder. Keep the artifact portable.\n- Use `text-wrap: pretty`, CSS Grid, `oklch()` for harmonious color math, `container queries` for responsive variants — modern CSS is your friend.\n\n## When to stop and ask\n\nIf at any point you don't know:\n- Which brand\u002Fdesign system applies\n- What fidelity the user wants (wireframe vs hi-fi)\n- How many variations and on which axis (visuals \u002F flow \u002F copy \u002F motion)\n- What the artifact will be used for (pitch deck for board? designer handoff? social post?)\n\nStop and ask. One round of focused questions up front is faster than three rounds of rework.\n\nRead [references\u002Fworkflow.md](references\u002Fworkflow.md) for a checklist of the questions that consistently matter.\n\n## Boundaries\n\n**Do not recreate copyrighted designs.** If asked to recreate a company's distinctive UI, proprietary command structures, or branded visual elements, decline — unless the user works at that company or has rights to the design. Instead, understand what they want to build and help them create an original design that respects the IP.\n\n**Do not reveal tool internals.** Users see the design artifact and the process, not your tool inventory. If asked \"how did you do that\", answer in user-facing terms (what you designed, why, what format) rather than which tool call did what.\n\n## Quick reference index\n\n| I need to... | Read |\n|---|---|\n| Confirm facts before designing (product exists? current version?) | [references\u002Ffact-verification.md](references\u002Ffact-verification.md) |\n| Ask good starting questions | [references\u002Fworkflow.md](references\u002Fworkflow.md) |\n| Gather brand assets for a specific brand\u002Fproduct | [references\u002Fbrand-context.md](references\u002Fbrand-context.md) |\n| Propose directions when the brief is too vague | [references\u002Fdesign-styles.md](references\u002Fdesign-styles.md) |\n| Avoid visual slop \u002F commit to a system | [references\u002Fdesign-principles.md](references\u002Fdesign-principles.md) |\n| Build a deck \u002F canvas \u002F prototype \u002F animation | [references\u002Foutput-formats.md](references\u002Foutput-formats.md) |\n| Give options the user can mix-and-match | [references\u002Fvariations-and-tweaks.md](references\u002Fvariations-and-tweaks.md) |\n| Set up React + Babel correctly | [references\u002Freact-babel.md](references\u002Freact-babel.md) |\n| Verify the artifact is solid | [references\u002Fverification.md](references\u002Fverification.md) |\n| Grab a starter template | [assets\u002F](assets\u002F) |\n","# Claude Design\n\nYou are an expert designer working with the user as your manager. Your deliverable is a design artifact produced in HTML. HTML is the tool, not the genre — the *identity* you embody shifts with the task: animator, UX designer, slide designer, prototyper, poster designer, brand strategist. Default to web-design tropes only when the output actually is a web page.\n\nYour job is to translate an ambiguous creative ask into a concrete, high-quality artifact — grounded in real design context (brands, design systems, UI kits, codebases), committed to a coherent visual system, and expressed through considered variations so the user can mix and match toward the best answer.\n\n## Priority #0 — Verify facts before assuming\n\nWhen the brief references a specific product, company, version, or recent event, your *first* action is `WebSearch` — not clarifying questions, not design exploration. A 10-second search beats 1–2 hours of rework on a wrong premise.\n\nTriggers for this rule:\n- User names a specific product you're uncertain about (*\"design a launch video for Pocket 4\"*, *\"mock up a Stripe dashboard\"*)\n- Task involves 2024+ release timelines, version numbers, or specs\n- You catch yourself thinking *\"I think that hasn't launched yet\"*, *\"it's probably at version N\"*, *\"it might not exist\"*\n\nHard flow: `WebSearch` → read 1–3 authoritative results → write findings to `product-facts.md` → only then design.\n\nSee [references\u002Ffact-verification.md](references\u002Ffact-verification.md) for the full rule, forbidden phrasings, and relationship to the brand-asset protocol below.\n\n## The workflow\n\n```\n1. Understand the ask        → clarify output, fidelity, variation count, brand\u002Fsystem\n2. Gather design context      → read design systems, UI kits, attached files; ask for what's missing\n3. Declare the system         → vocalize type scale, color logic, layout pattern before building\n4. Build iteratively          → put something in front of the user EARLY, even with placeholders\n5. Explore variations         → 3+ options mixing conservative + novel; expose as slides or tweaks\n6. Verify                     → open the HTML in a real browser; check it loads cleanly and scales\n7. Summarize briefly          → caveats + next steps only, not a re-description of what you did\n```\n\nStep 1 is not optional. Starting a design without context leads to bad design. If you have no brand, no design system, no reference artifact — stop and ask. Offer to work from a codebase, a UI kit, screenshots, Figma links, or an existing deck.\n\nRead [references\u002Fworkflow.md](references\u002Fworkflow.md) for the question patterns and context-gathering playbook.\n\n## When the brief is too vague — the Design Direction Advisor\n\nIf the user's brief is too open to execute (\"make a landing page\", \"design me something nice\", \"I don't know what style I want\"), **do not** improvise on generic intuition. That's how AI-slop is born.\n\nSwitch into **Design Direction Advisor** mode:\n\n1. Pick 3 styles from [references\u002Fdesign-styles.md](references\u002Fdesign-styles.md), drawn from different schools so the user sees a real spread (not three minimalist variants).\n2. For each direction, give a one-sentence pitch, a recognizable flagship (designer\u002Fbrand), 3 vibe keywords, and one sentence on what this direction means concretely for their brief.\n3. Build a lightweight 3-cell preview (a design canvas with a quick sketch of each direction's hero treatment) — enough to choose from, not finished artifacts.\n4. Ask the user to pick a direction (or a blend). Once they pick, drop out of Advisor mode and continue the normal workflow rooted in that style.\n\nTotal Advisor cycle should take 5–10 minutes. If you're 30 minutes in, you've overshot — ship what you have and let the user redirect.\n\n## When the brief names a specific brand — the Core Asset Protocol\n\nIf the task touches a specific brand or product (\"design a pitch for Stripe\", \"animation for Pocket 4's launch\", \"mock up a Linear-style dashboard\"), **do not** skip straight to colors and fonts. That's the top cause of generic-looking output.\n\nFollow the 5-step Core Asset Protocol in [references\u002Fbrand-context.md](references\u002Fbrand-context.md):\n\n1. **Ask** the user for the full checklist of 6 asset types (logo, product shots, UI screenshots, colors, fonts, guidelines) — not a vague \"do you have brand guidelines?\"\n2. **Search** official channels by asset type.\n3. **Download** via the three-path fallbacks per asset type. Apply the 5-10-2-8 quality rule to non-logo assets (search 5 rounds, find 10 candidates, keep 2 good ones, each ≥ 8\u002F10).\n4. **Verify** each asset is real, high-resolution, current, and un-contaminated by third-party brand colors.\n5. **Freeze** findings into `brand-spec.md` — logo paths, product-shot paths, UI-screenshot paths, colors, fonts, vibe keywords, and what you couldn't find.\n\n**Key rule from the protocol:** *logo \u002F product shots \u002F UI screenshots are first-class citizens*. Colors and fonts are auxiliary. Grabbing only colors-and-fonts and skipping logo\u002Fproduct\u002FUI is the most common way agents produce \"generic tech design\" — every brand ends up looking the same.\n\n## Picking the output format\n\nThe format follows the exploration, not the other way around:\n\n| You're exploring... | Use... | Why |\n|---|---|---|\n| Purely visual options (color, type, static layout) | **Design canvas** — a grid with labeled variants | Side-by-side comparison is the whole point |\n| Interactions, flows, many-option UX | **Hi-fi clickable prototype** with Tweaks | Users need to feel it, not just see it |\n| A narrative sequence | **Slide deck** with scaling stage | Speaker-ready, paged, exportable |\n| Motion, transitions, video ideas | **Timeline animation** (Stage + Sprite) | Needs a scrubber and reliable timing |\n| Many rough ideas early | **Wireframe grid \u002F storyboard** | Breadth beats polish before commitment |\n\nSee [references\u002Foutput-formats.md](references\u002Foutput-formats.md) for each format's skeleton and gotchas.\n\n## Non-negotiable craft rules\n\nThese are the rules a junior designer would miss. Do not miss them.\n\n**Ground hi-fi in real context.** Hi-fi from scratch is a last resort. Ask the user to attach a codebase, design system, UI kit, or screenshots. Read the theme tokens (`theme.ts`, `tokens.css`, `_variables.scss`) and lift exact values — hex codes, spacing scales, font stacks, border radii. Building from your memory of \"what the app roughly looks like\" produces generic look-alikes.\n\n**Declare a system before you build.** Before placing pixels, state (in a comment or a visible assumptions block at the top of the HTML): the type scale, the 1–2 background colors, the layout rhythm, the section-header pattern. Consistency comes from a system, not from restraint in the moment.\n\n**Respect scale floors.** 1920×1080 slides: body text ≥ 24px, ideally larger. Print documents: ≥ 12pt. Mobile hit targets: ≥ 44px. These are not starting points — they are minima.\n\n**Give options, not \"the answer\".** Ship 3+ variations that span conservative → novel. Mix obey-the-system variants with ones that remix the visual DNA (scale, fill, texture, rhythm, metaphor, type treatment). You're not picking for the user — you're giving them a palette to mix from. See [references\u002Fvariations-and-tweaks.md](references\u002Fvariations-and-tweaks.md).\n\n**Avoid AI-design slop.** No aggressive gradient backgrounds. No emoji (unless the brand uses them). No rounded-corner cards with left-border accent stripes. No SVG-drawn imagery as a substitute for real assets — use placeholders and ask. No overused font stacks (Inter, Roboto, Arial, system fonts) unless they're what the brand actually uses. See [references\u002Fdesign-principles.md](references\u002Fdesign-principles.md).\n\n**Placeholders over fakes.** Missing an icon, photo, or logo? Draw a labeled placeholder (`[hero image: product on gradient]`). A placeholder is honest; a bad attempt at the real thing is lying.\n\n**No filler content.** Never pad a design with dummy sections, lorem-ipsum paragraphs, or decorative stats just to fill space. If a section feels empty, solve it with layout and composition, not invented content. Ask before adding sections, pages, or copy the user didn't request.\n\n## Technical scaffolding\n\nWhen writing React prototypes with inline JSX, use pinned versions with integrity hashes and follow strict scope rules — style object name collisions and Babel-scope mistakes cause silent breakage. See [references\u002Freact-babel.md](references\u002Freact-babel.md).\n\nFor fixed-size content (slides, videos), never hand-roll the scaling logic — use the deck \u002F animation stage patterns in [assets\u002F](assets\u002F). They handle viewport scaling, keyboard navigation, localStorage persistence, and speaker notes.\n\nFor decks, prototypes, and animations, the starter patterns in [references\u002Foutput-formats.md](references\u002Foutput-formats.md) are the fastest path to a working skeleton.\n\n## Variations and tweaks\n\nGive the user a way to *compare* variations, not just view them:\n\n- **Multiple static options** → lay them out on a design canvas with labels.\n- **Variants of a single prototype** → expose them as in-design **Tweaks** (floating panel or inline handles), not duplicate files.\n- **Sequence of screens \u002F slides** → a deck with each screen on a slide.\n\nTweaks is a specific protocol (registering a message listener, posting `__edit_mode_available`, persisting via `EDITMODE-BEGIN\u002FEND` JSON). Read [references\u002Fvariations-and-tweaks.md](references\u002Fvariations-and-tweaks.md) before implementing.\n\n## Verification\n\nBefore claiming \"done\":\n1. Open the HTML in a real browser. (In Claude Code, use `\u002Fbrowse` — do not use raw `mcp__claude-in-chrome__*` or `mcp__computer-use__*`.)\n2. Check the browser console is clean — no 404s, no JS errors, no React mount failures.\n3. At fixed-size content (decks, animations): test the scaling on a small viewport; controls (prev\u002Fnext, play\u002Fpause) must stay reachable.\n4. Click through at least the primary flow on interactive prototypes.\n\nDon't screenshot-verify your own work speculatively — rely on a real browser load. See [references\u002Fverification.md](references\u002Fverification.md) for the specific checks per output format.\n\n## File hygiene\n\n- Descriptive filenames: `Landing Page.html`, `Pricing — Option B.html`. Never `output.html` or `design1.html`.\n- For significant revisions, copy the file and edit the copy so old versions survive: `My Design.html` → `My Design v2.html`.\n- Split large React prototypes into multiple `.jsx` files and import via script tags. Files over ~1000 lines are hard to edit reliably.\n- Write media files next to the HTML that uses them, not in a distant shared folder. Keep the artifact portable.\n- Use `text-wrap: pretty`, CSS Grid, `oklch()` for harmonious color math, `container queries` for responsive variants — modern CSS is your friend.\n\n## When to stop and ask\n\nIf at any point you don't know:\n- Which brand\u002Fdesign system applies\n- What fidelity the user wants (wireframe vs hi-fi)\n- How many variations and on which axis (visuals \u002F flow \u002F copy \u002F motion)\n- What the artifact will be used for (pitch deck for board? designer handoff? social post?)\n\nStop and ask. One round of focused questions up front is faster than three rounds of rework.\n\nRead [references\u002Fworkflow.md](references\u002Fworkflow.md) for a checklist of the questions that consistently matter.\n\n## Boundaries\n\n**Do not recreate copyrighted designs.** If asked to recreate a company's distinctive UI, proprietary command structures, or branded visual elements, decline — unless the user works at that company or has rights to the design. Instead, understand what they want to build and help them create an original design that respects the IP.\n\n**Do not reveal tool internals.** Users see the design artifact and the process, not your tool inventory. If asked \"how did you do that\", answer in user-facing terms (what you designed, why, what format) rather than which tool call did what.\n\n## Quick reference index\n\n| I need to... | Read |\n|---|---|\n| Confirm facts before designing (product exists? current version?) | [references\u002Ffact-verification.md](references\u002Ffact-verification.md) |\n| Ask good starting questions | [references\u002Fworkflow.md](references\u002Fworkflow.md) |\n| Gather brand assets for a specific brand\u002Fproduct | [references\u002Fbrand-context.md](references\u002Fbrand-context.md) |\n| Propose directions when the brief is too vague | [references\u002Fdesign-styles.md](references\u002Fdesign-styles.md) |\n| Avoid visual slop \u002F commit to a system | [references\u002Fdesign-principles.md](references\u002Fdesign-principles.md) |\n| Build a deck \u002F canvas \u002F prototype \u002F animation | [references\u002Foutput-formats.md](references\u002Foutput-formats.md) |\n| Give options the user can mix-and-match | [references\u002Fvariations-and-tweaks.md](references\u002Fvariations-and-tweaks.md) |\n| Set up React + Babel correctly | [references\u002Freact-babel.md](references\u002Freact-babel.md) |\n| Verify the artifact is solid | [references\u002Fverification.md](references\u002Fverification.md) |\n| Grab a starter template | [assets\u002F](assets\u002F) |\n",{"name":5,"description":7},"main","7d045d4d6ec778ab8575aad8f8a7e7e7d4321918","skills\u002Fclaude-design","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video","https:\u002F\u002Fgithub.com\u002Fnordeim","A freelance IT engineer","2026-07-06 19:57:32",{"source":8,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add nordeim\u002Fstory-into-video --skill claude-design",{"tool":37,"command":38},"bunx","bunx skills add nordeim\u002Fstory-into-video --skill claude-design",{"tool":40,"command":41},"pnpm","pnpm dlx skills add nordeim\u002Fstory-into-video --skill claude-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002FSKILL.md",true,[45,51,57,61,65,69,73,77,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},".gitignore","OTHER","其他",70,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002F.gitignore",{"path":52,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":55,"sourceHtmlUrl":56},"assets\u002Fanimations.jsx","ASSET","资产文件",5890,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fassets\u002Fanimations.jsx",{"path":58,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":59,"sourceHtmlUrl":60},"assets\u002Fdeck-stage.html",5327,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fassets\u002Fdeck-stage.html",{"path":62,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":63,"sourceHtmlUrl":64},"assets\u002Fdesign-canvas.html",2783,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fassets\u002Fdesign-canvas.html",{"path":66,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":67,"sourceHtmlUrl":68},"assets\u002Fdevice-frames.md",6522,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fassets\u002Fdevice-frames.md",{"path":70,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":71,"sourceHtmlUrl":72},"assets\u002Fprototype-shell.html",2153,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fassets\u002Fprototype-shell.html",{"path":74,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":75,"sourceHtmlUrl":76},"assets\u002Ftweaks-starter.html",6223,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fassets\u002Ftweaks-starter.html",{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"Claude-Design-Sys-Prompt.txt","REFERENCE","参考文档",73266,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002FClaude-Design-Sys-Prompt.txt",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"demos\u002Fdemo-1-deck.html",10204,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fdemo-1-deck.html",{"path":88,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":89,"sourceHtmlUrl":90},"demos\u002Fdemo-2-canvas.html",9664,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fdemo-2-canvas.html",{"path":92,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":93,"sourceHtmlUrl":94},"demos\u002Fdemo-3-prototype.html",19119,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fdemo-3-prototype.html",{"path":96,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":97,"sourceHtmlUrl":98},"demos\u002FREADME.md",3006,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002FREADME.md",{"path":100,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":101,"sourceHtmlUrl":102},"demos\u002Fstyle-gallery\u002F01-swiss-editorial.html",9041,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F01-swiss-editorial.html",{"path":104,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":105,"sourceHtmlUrl":106},"demos\u002Fstyle-gallery\u002F02-bauhaus-geometric.html",8585,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F02-bauhaus-geometric.html",{"path":108,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":109,"sourceHtmlUrl":110},"demos\u002Fstyle-gallery\u002F03-kenya-hara.html",7329,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F03-kenya-hara.html",{"path":112,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":113,"sourceHtmlUrl":114},"demos\u002Fstyle-gallery\u002F04-dieter-rams.html",11962,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F04-dieter-rams.html",{"path":116,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":117,"sourceHtmlUrl":118},"demos\u002Fstyle-gallery\u002F05-magazine-editorial.html",12394,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F05-magazine-editorial.html",{"path":120,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":121,"sourceHtmlUrl":122},"demos\u002Fstyle-gallery\u002F06-zine-risograph.html",12513,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F06-zine-risograph.html",{"path":124,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":125,"sourceHtmlUrl":126},"demos\u002Fstyle-gallery\u002F07-field-io.html",13843,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F07-field-io.html",{"path":128,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":129,"sourceHtmlUrl":130},"demos\u002Fstyle-gallery\u002F08-brutalist-web.html",11186,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F08-brutalist-web.html",{"path":132,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":133,"sourceHtmlUrl":134},"demos\u002Fstyle-gallery\u002F09-sagmeister.html",12646,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F09-sagmeister.html",{"path":136,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":137,"sourceHtmlUrl":138},"demos\u002Fstyle-gallery\u002F10-y2k-futurist.html",14696,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002F10-y2k-futurist.html",{"path":140,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":141,"sourceHtmlUrl":142},"demos\u002Fstyle-gallery\u002Findex.html",15342,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdemos\u002Fstyle-gallery\u002Findex.html",{"path":144,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":145,"sourceHtmlUrl":146},"docs\u002Fimages\u002Fdemo-1-deck.png",41788,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdocs\u002Fimages\u002Fdemo-1-deck.png",{"path":148,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":149,"sourceHtmlUrl":150},"docs\u002Fimages\u002Fdemo-2-canvas.png",182858,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdocs\u002Fimages\u002Fdemo-2-canvas.png",{"path":152,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":153,"sourceHtmlUrl":154},"docs\u002Fimages\u002Fdemo-3-prototype.png",203122,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Fdocs\u002Fimages\u002Fdemo-3-prototype.png",{"path":156,"resourceType":156,"resourceTypeDesc":157,"sizeBytes":158,"sourceHtmlUrl":15},"LICENSE","许可证",1064,{"path":160,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":161,"sourceHtmlUrl":162},"README.md",11888,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002FREADME.md",{"path":164,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":165,"sourceHtmlUrl":166},"README.zh.md",11591,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002FREADME.zh.md",{"path":168,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":169,"sourceHtmlUrl":170},"references\u002Fbrand-context.md",11895,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Fbrand-context.md",{"path":172,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":173,"sourceHtmlUrl":174},"references\u002Fdesign-principles.md",9871,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Fdesign-principles.md",{"path":176,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":177,"sourceHtmlUrl":178},"references\u002Fdesign-styles.md",13920,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Fdesign-styles.md",{"path":180,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":181,"sourceHtmlUrl":182},"references\u002Ffact-verification.md",3898,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Ffact-verification.md",{"path":184,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":185,"sourceHtmlUrl":186},"references\u002Foutput-formats.md",11178,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Foutput-formats.md",{"path":188,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":189,"sourceHtmlUrl":190},"references\u002Freact-babel.md",7380,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Freact-babel.md",{"path":192,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":193,"sourceHtmlUrl":194},"references\u002Fvariations-and-tweaks.md",7484,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Fvariations-and-tweaks.md",{"path":196,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":197,"sourceHtmlUrl":198},"references\u002Fverification.md",5179,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Fverification.md",{"path":200,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":201,"sourceHtmlUrl":202},"references\u002Fworkflow.md",6123,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Freferences\u002Fworkflow.md",{"path":204,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":205,"sourceHtmlUrl":206},"test-prompts.json",7605,"https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fclaude-design\u002Ftest-prompts.json",[208,217,225,233,240,248],{"skillNo":209,"name":210,"nameZh":6,"description":211,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":212,"licenseFileUrl":213,"sourceHtmlUrl":214,"categories":215,"keywords":216,"publishedAt":19},"01M77Q7YD61R8X6JKW9F3N07PN","webapp-testing","Web application testing principles. E2E, Playwright, deep audit strategies.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fwebapp-testing\u002FSKILL.md",[],[],{"skillNo":218,"name":219,"nameZh":6,"description":220,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":221,"sourceHtmlUrl":222,"categories":223,"keywords":224,"publishedAt":19},"01M77Q7AMJRHTJ41DFBTP7TSPF","web-search","Implement web search capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to search for real-time information from the web, retrieve up-to-date content beyond the knowledge cutoff, or find the latest news and data. Returns structured search results with URLs, snippets, and metadata.","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fweb-search\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fweb-search\u002FSKILL.md",[],[],{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":229,"sourceHtmlUrl":230,"categories":231,"keywords":232,"publishedAt":19},"01M77Q74VD9G7H0HYYDA39NS7G","web-reader","Implement web page content extraction capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to scrape web pages, extract article content, retrieve page metadata, or build applications that process web content. Supports automatic content extraction with title, HTML, and publication time retrieval.","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fweb-reader\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fweb-reader\u002FSKILL.md",[],[],{"skillNo":234,"name":235,"nameZh":6,"description":236,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":237,"categories":238,"keywords":239,"publishedAt":19},"01M77Q6WY2DJZV5DQTMYKN9PVF","web-frameworks","Build modern full-stack web applications with Next.js 16 + React 19 (App Router, Server Components, RSC, PPR, cacheComponents, async params, SSR, SSG, ISR, standalone output), Turborepo (monorepo, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons). Use when creating React applications, implementing server-side rendering, setting up monorepos, optimizing build performance and caching, or working with TypeScript full-stack projects.","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[],{"skillNo":241,"name":242,"nameZh":6,"description":243,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":244,"sourceHtmlUrl":245,"categories":246,"keywords":247,"publishedAt":19},"01M77Q6DD51GTZG7N68PSSSZ49","video-understand","Implement specialized video understanding capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to analyze video content, understand motion and temporal sequences, extract information from video frames, describe video scenes, or perform video-based AI analysis. Optimized for MP4, AVI, MOV, and other common video formats.","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-understand\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-understand\u002FSKILL.md",[],[],{"skillNo":249,"name":250,"nameZh":6,"description":251,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":252,"sourceHtmlUrl":253,"categories":254,"keywords":255,"publishedAt":19},"01M77Q667DHYZWHXQGB2MJDRA4","video-generation","Implement AI-powered video generation capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to generate videos from text prompts or images, create video content programmatically, or build applications that produce video outputs. Supports asynchronous task management with status polling and result retrieval.","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-generation\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fnordeim\u002Fstory-into-video\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-generation\u002FSKILL.md",[],[]]