[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7BSCBF021RHHDMPNG0QY0MP":3,"skill-same:01M7BSCBF021RHHDMPNG0QY0MP":84},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":55,"repositoryHtmlUrl":56,"repositoryHomepageUrl":57,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":59,"updatedAt":60,"install":61,"resources":73},"01M7BSCBF021RHHDMPNG0QY0MP","sprite-animation",null,"A pixel \u002F sprite-style animated explainer slide — full-bleed cream stage,\nbold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom,\nor 8-bit console), kinetic Japanese display type, ticking timeline ribbon.\nReads like a single frame of an educational motion video — looping CSS\nkeyframes, no JS, ready to be screen-recorded into a vertical video.\nUse when the brief asks for a \"sprite animation\", \"pixel-art video\",\n\"8-bit explainer\", \"history of X explainer\", \"kinetic typography history\",\n\"Nintendo-style\", \"精灵图动画\", \"像素动画\", or \"复古动画\".","YYC-Cube\u002FYYC3-Knowledge-Base","YYC-Cube","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F235006543?v=4","01M79J2PH4SWD2X0825X6PN748","yyc3","01M79J2PHVK3F6ZBYT8K2SCZCW",1,"MIT","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Design-设计资源\u002FYYC3-Design-设计资源-open-design\u002Fplugins\u002F_official\u002Fexamples\u002Fsprite-animation\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: sprite-animation\ndescription: |\n  A pixel \u002F sprite-style animated explainer slide — full-bleed cream stage,\n  bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom,\n  or 8-bit console), kinetic Japanese display type, ticking timeline ribbon.\n  Reads like a single frame of an educational motion video — looping CSS\n  keyframes, no JS, ready to be screen-recorded into a vertical video.\n  Use when the brief asks for a \"sprite animation\", \"pixel-art video\",\n  \"8-bit explainer\", \"history of X explainer\", \"kinetic typography history\",\n  \"Nintendo-style\", \"精灵图动画\", \"像素动画\", or \"复古动画\".\ntriggers:\n  - \"sprite animation\"\n  - \"pixel art animation\"\n  - \"8-bit explainer\"\n  - \"retro animation\"\n  - \"kinetic typography\"\n  - \"history explainer\"\n  - \"nintendo style\"\n  - \"精灵图\"\n  - \"像素动画\"\n  - \"复古动画\"\nod:\n  mode: prototype\n  platform: desktop\n  scenario: marketing\n  featured: 8\n  preview:\n    type: html\n    entry: index.html\n  design_system:\n    requires: true\n    sections: [color, typography, layout, components]\n  example_prompt: \"Create a sprite-based animation introducing trivia about Nintendo's history. Combine pixel mascots, animated text, and a Hanafuda accent. Use color and type that feel like the Nintendo brand.\"\n---\n# Sprite Animation Skill\n\nProduce a single animated frame of an educational explainer — the kind you\nmight screen-record into a vertical video. Pixel-art mascots, big year\ndisplay, looping CSS animations, kinetic Japanese \u002F English display type.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Pick the loudest serif\n   token for the year, a sturdy sans for headlines, and a mono token for\n   timeline \u002F index labels.\n2. **Pick the topic** from the brief (e.g. \"Nintendo · 1889 — Hanafuda\").\n   You always need: a year, a one-line headline, an animated subject (a\n   pixel sprite — character, object, or icon), and a short caption.\n3. **Stage** — full-bleed cream \u002F off-white background (`#f5efe2`) with a\n   subtle paper grain. Keep margins generous; this is one beat of a video.\n4. **Top bar** — small mono row:\n   - Left: title slug (\"名次の\u002F番組\" or \"EP. 01 \u002F NINTENDO\")\n   - Right: progress dots (\"01 \u002F 12\") and a \"REC\" stamp\n5. **Subject animations** — at least three independent looping animations\n   on the page:\n   - **Big year**: the headline year (e.g. \"1889年\") fills the lower-left,\n     in a serif display weight. It has a subtle vertical glitch \u002F scanline\n     animation (clip-path keyframes), and a 1-frame \"pop\" every loop.\n   - **Pixel sprite card**: a 96×128 pixel-art card or character (use an\n     inline SVG with crisp `shape-rendering: crispEdges` rectangles, or a\n     `box-shadow` pixel grid). Subtle bobbing animation (±4px, 1.6s).\n   - **Kinetic kana**: 1–2 Japanese \u002F kanji characters that fade-and-slide\n     in sync with the bob (e.g. \"花\" — *hana* — flower).\n   - **Tick ribbon**: bottom of the stage, a tape\u002Fribbon with year ticks\n     (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a\n     slow constant speed.\n6. **Caption block** — small mono caption explaining the trivia:\n   \"Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889.\n    Mario didn't show up for another ninety-six years.\"\n7. **Write** a single HTML document:\n   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, CSS inline, no external JS.\n   - All animations use `@keyframes` + `animation: ... infinite`.\n   - Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop\n     reads as a single frame from a video.\n   - `data-od-id` on stage, year, sprite, caption, and tick ribbon.\n8. **Self-check**:\n   - The page is one cohesive scene, not a collage. The eye lands on the\n     year first, then the sprite, then the caption.\n   - At least 3 independent looping animations are visible.\n   - The color palette is restrained (cream + a single accent red + ink).\n   - No external assets — all sprites are inline SVG or CSS.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"sprite-anim-slug\" type=\"text\u002Fhtml\" title=\"Sprite animation — Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n","# Sprite Animation Skill\n\nProduce a single animated frame of an educational explainer — the kind you\nmight screen-record into a vertical video. Pixel-art mascots, big year\ndisplay, looping CSS animations, kinetic Japanese \u002F English display type.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Pick the loudest serif\n   token for the year, a sturdy sans for headlines, and a mono token for\n   timeline \u002F index labels.\n2. **Pick the topic** from the brief (e.g. \"Nintendo · 1889 — Hanafuda\").\n   You always need: a year, a one-line headline, an animated subject (a\n   pixel sprite — character, object, or icon), and a short caption.\n3. **Stage** — full-bleed cream \u002F off-white background (`#f5efe2`) with a\n   subtle paper grain. Keep margins generous; this is one beat of a video.\n4. **Top bar** — small mono row:\n   - Left: title slug (\"名次の\u002F番組\" or \"EP. 01 \u002F NINTENDO\")\n   - Right: progress dots (\"01 \u002F 12\") and a \"REC\" stamp\n5. **Subject animations** — at least three independent looping animations\n   on the page:\n   - **Big year**: the headline year (e.g. \"1889年\") fills the lower-left,\n     in a serif display weight. It has a subtle vertical glitch \u002F scanline\n     animation (clip-path keyframes), and a 1-frame \"pop\" every loop.\n   - **Pixel sprite card**: a 96×128 pixel-art card or character (use an\n     inline SVG with crisp `shape-rendering: crispEdges` rectangles, or a\n     `box-shadow` pixel grid). Subtle bobbing animation (±4px, 1.6s).\n   - **Kinetic kana**: 1–2 Japanese \u002F kanji characters that fade-and-slide\n     in sync with the bob (e.g. \"花\" — *hana* — flower).\n   - **Tick ribbon**: bottom of the stage, a tape\u002Fribbon with year ticks\n     (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a\n     slow constant speed.\n6. **Caption block** — small mono caption explaining the trivia:\n   \"Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889.\n    Mario didn't show up for another ninety-six years.\"\n7. **Write** a single HTML document:\n   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, CSS inline, no external JS.\n   - All animations use `@keyframes` + `animation: ... infinite`.\n   - Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop\n     reads as a single frame from a video.\n   - `data-od-id` on stage, year, sprite, caption, and tick ribbon.\n8. **Self-check**:\n   - The page is one cohesive scene, not a collage. The eye lands on the\n     year first, then the sprite, then the caption.\n   - At least 3 independent looping animations are visible.\n   - The color palette is restrained (cream + a single accent red + ink).\n   - No external assets — all sprites are inline SVG or CSS.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"sprite-anim-slug\" type=\"text\u002Fhtml\" title=\"Sprite animation — Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n",{"od":24,"name":5,"triggers":40,"description":51},{"mode":25,"preview":26,"featured":29,"platform":30,"scenario":31,"design_system":32,"example_prompt":39},"prototype",{"type":27,"entry":28},"html","index.html",8,"desktop","marketing",{"requires":33,"sections":34},true,[35,36,37,38],"color","typography","layout","components","Create a sprite-based animation introducing trivia about Nintendo's history. Combine pixel mascots, animated text, and a Hanafuda accent. Use color and type that feel like the Nintendo brand.",[41,42,43,44,45,46,47,48,49,50],"sprite animation","pixel art animation","8-bit explainer","retro animation","kinetic typography","history explainer","nintendo style","精灵图","像素动画","复古动画","A pixel \u002F sprite-style animated explainer slide — full-bleed cream stage,\nbold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom,\nor 8-bit console), kinetic Japanese display type, ticking timeline ribbon.\nReads like a single frame of an educational motion video — looping CSS\nkeyframes, no JS, ready to be screen-recorded into a vertical video.\nUse when the brief asks for a \"sprite animation\", \"pixel-art video\",\n\"8-bit explainer\", \"history of X explainer\", \"kinetic typography history\",\n\"Nintendo-style\", \"精灵图动画\", \"像素动画\", or \"复古动画\".\n","main","87afe6ce96220accf50a345dea46784c8c9f210e","YYC3-Design-设计资源\u002FYYC3-Design-设计资源-open-design\u002Fplugins\u002F_official\u002Fexamples\u002Fsprite-animation",0,"https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base","https:\u002F\u002Fkb.yyc3.top\u002F","https:\u002F\u002Fgithub.com\u002FYYC-Cube","万象归元于云枢 | 深栈智启新纪元","2026-11-10 10:37:32",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":33},[63,66,69],{"tool":64,"command":65},"npx","npx skills add YYC-Cube\u002FYYC3-Knowledge-Base --skill sprite-animation",{"tool":67,"command":68},"bunx","bunx skills add YYC-Cube\u002FYYC3-Knowledge-Base --skill sprite-animation",{"tool":70,"command":71},"pnpm","pnpm dlx skills add YYC-Cube\u002FYYC3-Knowledge-Base --skill sprite-animation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Design-设计资源\u002FYYC3-Design-设计资源-open-design\u002Fplugins\u002F_official\u002Fexamples\u002Fsprite-animation\u002FSKILL.md",[74,80],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"example.html","REFERENCE","参考文档",13511,"https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Design-设计资源\u002FYYC3-Design-设计资源-open-design\u002Fplugins\u002F_official\u002Fexamples\u002Fsprite-animation\u002Fexample.html",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"open-design.json",9869,"https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-Design-设计资源\u002FYYC3-Design-设计资源-open-design\u002Fplugins\u002F_official\u002Fexamples\u002Fsprite-animation\u002Fopen-design.json",[85,92,99,106,113,120],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":19},"01M7CTDWHERCXPQCP0K03A86AS","vercel-sandbox","Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include \"Vercel Sandbox browser\", \"microVM Chrome\", \"agent-browser in sandbox\", \"browser automation on Vercel\", or any task requiring Chrome in a Vercel Sandbox.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fvercel-sandbox\u002FSKILL.md",[],[],{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":19},"01M7CTD8D2BNJY54S65M47HEJA","slack","Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include \"check my Slack\", \"what channels have unreads\", \"send a message to\", \"search Slack for\", \"extract from Slack\", \"find who said\", or any task requiring programmatic Slack interaction.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fslack\u002FSKILL.md",[],[],{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":19},"01M7CTCSSB8ZP3Q58C3YZDZK1W","electron","Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include \"automate Slack app\", \"control VS Code\", \"interact with Discord app\", \"test this Electron app\", \"connect to desktop app\", or any task requiring automation of a native Electron application.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Felectron\u002FSKILL.md",[],[],{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":19},"01M7CTCBJY76688V4DCZGWFHGQ","dogfood","Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to \"dogfood\", \"QA\", \"exploratory test\", \"find issues\", \"bug hunt\", \"test this app\u002Fsite\u002Fplatform\", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fdogfood\u002FSKILL.md",[],[],{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":19},"01M7CTC4H0FFGVEAQR9PA4GA1A","agent-browser","Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to \"open a website\", \"fill out a form\", \"click a button\", \"take a screenshot\", \"scrape data from a page\", \"test this web app\", \"login to a site\", \"automate browser actions\", or any task requiring programmatic web interaction.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-WebSpec-Web标准\u002FYYC3-WebSpec-Web标准-standards\u002Fbrowser-agent\u002Fskills\u002Fagent-browser\u002FSKILL.md",[],[],{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":126,"publishedAt":19},"01M7CTBKVFYBG78FDSABSDJTTQ","shadcn","Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn\u002Fui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for \"shadcn init\", \"create an app with --preset\", \"switch to --preset\", and for building a design system or applying a DESIGN.md or brand spec to shadcn\u002Fui.","https:\u002F\u002Fgithub.com\u002FYYC-Cube\u002FYYC3-Knowledge-Base\u002Fblob\u002Fmain\u002FYYC3-UI-界面组件\u002FYYC3-UI-界面组件-ui\u002Fskills\u002Fshadcn\u002FSKILL.md",[],[]]