[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CSK5ETESKNFB7ZXHM6ESJR":3,"skill-same:01M7CSK5ETESKNFB7ZXHM6ESJR":58},{"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":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":26,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":29,"install":30,"resources":43},"01M7CSK5ETESKNFB7ZXHM6ESJR","design-web-motion-library",null,"Select, adapt and verify original website motion components and effect recipes, especially for Astro, Tailwind and Vue. Covers everyday interface patterns and optional experimental scroll, pointer, canvas and WebGL effects.","newmindsgroup\u002Fvisual-design-kit","newmindsgroup","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F38358889?v=4","01M7CRXVBNJ0WGRTNWHWY2HVQ9","01M7CRXVC9ZXSZBAPZTP3Y39CA",2,"MIT","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: design-web-motion-library\ndescription: Select, adapt and verify original website motion components and effect recipes, especially for Astro, Tailwind and Vue. Covers everyday interface patterns and optional experimental scroll, pointer, canvas and WebGL effects.\n---\n\n# Website motion library\n\nVersion-Timestamp: 2026-10-14 11:13:07 AST\n\nUse `motion` for movement purpose\u002Fchoreography and `web-frontend` for semantic implementation. Reuse those accepted inputs. This entry owns technique selection, component adoption and runtime evidence; it does not authorize a new visual direction or production release.\n\nRead [lifecycle and accessibility](references\u002Flifecycle.md), then the selected entries in [the canonical technique catalog](..\u002F..\u002Fexamples\u002Fastro-motion\u002Fsrc\u002Flib\u002Fcatalog.mjs). The [playground guide](..\u002F..\u002Fexamples\u002Fastro-motion\u002FREADME.md) describes launch and reusable file dependencies. For stack choices read [engine research](..\u002Fdesign-web-astro\u002Freferences\u002Fresearch.md). For visual reference discovery read [creative sources](references\u002Fcreative-sources.md). Read [verification](references\u002Fverification.md) before completion.\n\nThe catalog has two tiers and an independent status. Everyday prioritizes feedback and orientation; experimental adds expressive effects only when justified. Implemented means original example code exists, not approved for all projects. Researched means a recipe\u002Fsource exists, not a runnable component. Do not market a recipe as implemented or infer smoothness from a successful build.\n\nChoose the smallest engine for the intended effect. Preserve the project's visual tokens, audience, reading order, normal pointer and native controls. Tailwind supplies style; Vue supplies island state; one animation controller owns each animated property; Astro owns route navigation. Do not add GSAP, Motion, Lenis and custom routing as one default stack.\n\nAdopt only selected source and explicit helper\u002Fstyle dependencies into the project. Essential content starts visible, and controls requiring hydration start disabled. Show loading\u002Ferror\u002Fstatic states for optional imports. Scope selectors, frames, timers, listeners and observers; tear them down on Vue unmount and Astro swap. System reduced motion wins over local preview and Play. Pause long-running optional effects; stop offscreen\u002Fhidden loops and clean graphics resources.\n\nFor typing, SVG morph, shader distortion, video scrubbing or heavy pinning, use the researched recipe as a bounded prototype contract first. Keep approved identity\u002Fdata exact, source assets licensed and an equivalent static explanation. Test route\u002Fback\u002Frapid repeat, keyboard\u002Ftouch, preference changes, loading\u002Ferror, resize and real target devices before adoption. Update evidence for the exact project version only.\n\nRecord effect IDs, engine\u002Fversion, purpose, initial\u002Fend\u002Finterrupt states, static\u002Freduced fallback, measured costs, checked browsers and known gaps in the existing motion specification\u002Fdesign-work record. A new motion package does not change active client pins or grant spending, publication or API access.\n\nAgent-Attribution: computer=NMG-MBP-M5.local; tool=Codex; version=codex-cli 0.160.0; timestamp=2026-10-14 11:13:07 AST\n","# Website motion library\n\nVersion-Timestamp: 2026-10-14 11:13:07 AST\n\nUse `motion` for movement purpose\u002Fchoreography and `web-frontend` for semantic implementation. Reuse those accepted inputs. This entry owns technique selection, component adoption and runtime evidence; it does not authorize a new visual direction or production release.\n\nRead [lifecycle and accessibility](references\u002Flifecycle.md), then the selected entries in [the canonical technique catalog](..\u002F..\u002Fexamples\u002Fastro-motion\u002Fsrc\u002Flib\u002Fcatalog.mjs). The [playground guide](..\u002F..\u002Fexamples\u002Fastro-motion\u002FREADME.md) describes launch and reusable file dependencies. For stack choices read [engine research](..\u002Fdesign-web-astro\u002Freferences\u002Fresearch.md). For visual reference discovery read [creative sources](references\u002Fcreative-sources.md). Read [verification](references\u002Fverification.md) before completion.\n\nThe catalog has two tiers and an independent status. Everyday prioritizes feedback and orientation; experimental adds expressive effects only when justified. Implemented means original example code exists, not approved for all projects. Researched means a recipe\u002Fsource exists, not a runnable component. Do not market a recipe as implemented or infer smoothness from a successful build.\n\nChoose the smallest engine for the intended effect. Preserve the project's visual tokens, audience, reading order, normal pointer and native controls. Tailwind supplies style; Vue supplies island state; one animation controller owns each animated property; Astro owns route navigation. Do not add GSAP, Motion, Lenis and custom routing as one default stack.\n\nAdopt only selected source and explicit helper\u002Fstyle dependencies into the project. Essential content starts visible, and controls requiring hydration start disabled. Show loading\u002Ferror\u002Fstatic states for optional imports. Scope selectors, frames, timers, listeners and observers; tear them down on Vue unmount and Astro swap. System reduced motion wins over local preview and Play. Pause long-running optional effects; stop offscreen\u002Fhidden loops and clean graphics resources.\n\nFor typing, SVG morph, shader distortion, video scrubbing or heavy pinning, use the researched recipe as a bounded prototype contract first. Keep approved identity\u002Fdata exact, source assets licensed and an equivalent static explanation. Test route\u002Fback\u002Frapid repeat, keyboard\u002Ftouch, preference changes, loading\u002Ferror, resize and real target devices before adoption. Update evidence for the exact project version only.\n\nRecord effect IDs, engine\u002Fversion, purpose, initial\u002Fend\u002Finterrupt states, static\u002Freduced fallback, measured costs, checked browsers and known gaps in the existing motion specification\u002Fdesign-work record. A new motion package does not change active client pins or grant spending, publication or API access.\n\nAgent-Attribution: computer=NMG-MBP-M5.local; tool=Codex; version=codex-cli 0.160.0; timestamp=2026-10-14 11:13:07 AST\n",{"name":5,"description":7},"main","753c596e097d0288f4f74e22d6b8457014eac8b2","plugins\u002Fvisual-design-studio\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library",0,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup","2026-11-10 11:31:50",{"source":8,"skillName":5,"commands":31,"prompt":41,"zipAvailable":42},[32,35,38],{"tool":33,"command":34},"npx","npx skills add newmindsgroup\u002Fvisual-design-kit --skill design-web-motion-library",{"tool":36,"command":37},"bunx","bunx skills add newmindsgroup\u002Fvisual-design-kit --skill design-web-motion-library",{"tool":39,"command":40},"pnpm","pnpm dlx skills add newmindsgroup\u002Fvisual-design-kit --skill design-web-motion-library","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library\u002FSKILL.md",true,[44,50,54],{"path":45,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":48,"sourceHtmlUrl":49},"references\u002Fcreative-sources.md","REFERENCE","参考文档",2727,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library\u002Freferences\u002Fcreative-sources.md",{"path":51,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":52,"sourceHtmlUrl":53},"references\u002Flifecycle.md",2679,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library\u002Freferences\u002Flifecycle.md",{"path":55,"resourceType":46,"resourceTypeDesc":47,"sizeBytes":56,"sourceHtmlUrl":57},"references\u002Fverification.md",2218,"https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Flibrary\u002Fdraft-skills\u002Fdesign-web-motion-library\u002Freferences\u002Fverification.md",[59,66,73,80,87,94],{"skillNo":60,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":65,"publishedAt":18},"01M7CSR2BPCD04SARPWN7EJ5R0","web-design","Load before planning, designing, auditing or launching any website, landing page, cinematic hero, microsite or above-the-fold layout, or a prompt for Lovable, Bolt or v0 to build one, including regulated (prescription drug, health, finance), multilingual or market-specific launches. Covers page types (home, product, pricing, about, blog), conversion and ethical persuasion, responsive and fluid layouts, Core Web Vitals, SEO and structured data, localization and language-law requirements, stack and CMS choice (Astro, Next.js, WordPress, Webflow, Framer) and launch QA.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fweb-design\u002FSKILL.md",[],[],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":72,"publishedAt":18},"01M7CSQX00CVQAWP2QDHKVXFMS","ux-design","Load before designing or reviewing any flow, form, onboarding, navigation or content for real users, especially low-literacy, older, neurodivergent, child or other specific audiences. Covers research and usability tests, heuristic reviews, personas and jobs to be done, journeys and service blueprints, information architecture, UX laws, SUS, SEQ and HEART metrics, plain language and reading level, and microcopy and error messages.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fux-design\u002FSKILL.md",[],[],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":18},"01M7CSQQE0HX6Q8YR2EA1TR6P4","ui-design","Load before designing or specifying any interface screen or component, even a quick one: forms, tables, navigation, dashboards, onboarding, auth and passkeys, pricing, checkout, search and filters, settings, empty, loading and error states, notifications, consent and age-appropriate flows, and AI chat and agent interfaces, all to WCAG 2.2 AA. Also picks React UI libraries (toasts, drawers, command menus). Gives component specs, state matrices, sizes, density and keyboard and accessibility behavior.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fui-design\u002FSKILL.md",[],[],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":18},"01M7CSQFM0F9QKZ17S54PYN8M7","typography","Choose, pair, size and set type for brand, web, app, print, slides, signage and motion: modular scales, fluid clamp() type, measure, leading, tracking, OpenType features, font licensing and web font loading, and multiscript setting for CJK, Arabic, Hebrew, Devanagari and Thai. Use when selecting or pairing fonts, building a type scale or type tokens, fixing weak hierarchy or bad line breaks, setting long-form text or numbers, loading web fonts, or localizing type for another market.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Ftypography\u002FSKILL.md",[],[],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":18},"01M7CSQ95PB7K9JBEFYZVA7226","reference-reconstruction","Reconstructs the observed interface and behavior of a supplied app, site or screenshot set using a screen index, measurements, state and command maps, reusable components and matched-condition comparisons. Use when asked to reverse engineer, clone, reproduce or match a reference product, then adapt it if requested.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Freference-reconstruction\u002FSKILL.md",[],[],{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":18},"01M7CSQ1XRH2MBXH21MSZ7PXWJ","print-packaging-social","Load before any print, packaging, label, barcode, social, out-of-home, slide-deck or email design question, even a quick one, and before making finished collateral files. Specs: bleed, safe zones, 300ppi, CMYK, PDF\u002FX preflight, dielines, barcodes, social formats with 9:16 safe areas, billboard letter heights, 16:9 decks, bulletproof email. Renders token-driven brand books, sell sheets, cards, carousels and decks to PDF and PNG with a Canva editable twin.","https:\u002F\u002Fgithub.com\u002Fnewmindsgroup\u002Fvisual-design-kit\u002Fblob\u002Fmain\u002Fplugins\u002Fvisual-design-studio\u002Fskills\u002Fprint-packaging-social\u002FSKILL.md",[],[]]