[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6K12PQDKA91627WPKPPRF9W":3,"skill-same:01M6K12PQDKA91627WPKPPRF9W":74},{"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":28,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":54,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":57,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6K12PQDKA91627WPKPPRF9W","game-ui-frontend",null,"Design UI surfaces for browser games. Use when the user asks for HUDs, menus, overlays, responsive layouts, or visual direction that must protect the playfield.","NagyVikt\u002Fcodex-plugins","NagyVikt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F137165288?v=4","01M6K0SJ3R2DAZRJKJJS10VN87","Viktor Nagy","01M6K0SJ9HXN0GBD91QDQ9WNVV",2,"MIT","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fgame-studio\u002Fskills\u002Fgame-ui-frontend\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"game ui frontend","ui","game","frontend","surfaces","for","overlays","games","direction","responsive","visual","design ui","protect","use","user","browser","design","2026-11-10 10:12:30",false,"---\nname: game-ui-frontend\ndescription: Design UI surfaces for browser games. Use when the user asks for HUDs, menus, overlays, responsive layouts, or visual direction that must protect the playfield.\n---\n\n# Game UI Frontend\n\n## Overview\n\nUse this skill whenever the game needs a visible interface layer. The job is not to produce generic dashboard UI. The job is to produce a readable, thematic browser-game interface that supports the play experience.\n\nDefault assumption: build the game world in canvas or WebGL, and build text-heavy UI in DOM.\n\n## Frontend Standards\n\n1. Establish visual direction before coding.\n   - Genre and fantasy\n   - Material language\n   - Typography\n   - Palette\n   - Motion tone\n2. Use CSS variables for the UI theme.\n3. Build clear hierarchy.\n   - Critical combat or survival information first\n   - Secondary tools second\n   - Rarely used settings behind menus or drawers\n4. Protect the playfield first, especially in 3D.\n   - The initial screen should feel playable within a few seconds.\n   - Default to one primary persistent HUD cluster and at most one small secondary cluster.\n   - Keep the center of the playfield clear during normal play.\n   - Keep the lower-middle playfield mostly clear during normal play.\n   - Put lore, field notes, quest details, and long control lists behind drawers, toggles, or pause surfaces.\n   - Prefer contextual prompts and transient hints over permanent boxed panels.\n5. Keep overlays readable over motion.\n   - Use backing panels, edge treatment, contrast, and restrained blur where needed.\n6. Design for both desktop and mobile from the start.\n7. Design 3D UI around camera and input control boundaries.\n   - Pause or gate camera-control input when menus, dialogs, or pointer-driven UI are active.\n   - Keep pointer-lock, drag-to-look, and menu interaction states explicit.\n\n## 3D Starter Defaults\n\nFor exploration, traversal, or third-person starter scaffolds, prefer this UI budget:\n\n- one compact objective chip or status strip at the edge\n- one transient controls hint or interaction prompt\n- one optional collapsible secondary surface such as a journal, map, or quest log\n\nDo not open every informational surface on first load. The scene should be readable before the user opens any deeper UI.\n\nAs a default implementation constraint for 3D browser games:\n\n- no always-on full-width header plus multi-card body plus full-width footer layout\n- no large center-screen or lower-middle overlays during normal movement\n- no more than roughly 20-25% of the viewport covered by persistent HUD on desktop unless the user explicitly requests a denser layout\n- on mobile, collapse to a narrow stack or contextual chips before covering the playfield with larger panels\n\n## Prompting Rules\n\nWhen asking the model to design or implement game UI, include:\n\n- the game fantasy\n- the camera or viewpoint\n- the player verbs\n- the HUD layers\n- the camera or control mode when the game is 3D\n- the tone of motion\n- desktop and mobile expectations\n- playfield protection and disclosure strategy\n- explicit anti-patterns to avoid\n\nUse `..\u002F..\u002Freferences\u002Ffrontend-prompts.md` for concrete prompt shapes.\n\n## Motion Rules\n\n- Prefer a few meaningful transitions over constant micro-animation.\n- Reserve strong motion for state change, reward, danger, and onboarding.\n- Respect reduced-motion settings for non-essential animation.\n- Keep 3D HUD motion from competing with camera motion.\n\n## What Good Looks Like\n\n- HUD elements are legible without flattening the scene.\n- Menus feel native to the game world, not like a SaaS admin panel.\n- Layout adapts cleanly across breakpoints.\n- Pointer, keyboard, and game-state feedback are obvious.\n- In 3D games, menu and HUD states do not fight camera control or pointer-lock.\n- In 3D games, the first playable view keeps most of the viewport available for movement, aiming, and spatial reading.\n- Persistent information density is low enough that screenshots still read as game scenes, not UI comps.\n\n## Anti-Patterns\n\n- Generic app dashboard layouts\n- Flat placeholder styling with no theme\n- Default font stacks without intent\n- Dense overlays that obscure the playfield\n- Large title cards or multi-paragraph notes sitting over a live playable scene\n- Equal-weight boxed panels distributed around every edge of the viewport\n- Controls, objectives, notes, and lore all expanded at once on first load\n- Full-width top-and-bottom chrome with large always-on center or body panels in 3D play\n- Excessive motion on every element\n- Canvas-only UI when DOM would be clearer and cheaper\n- Forcing HUD controls into the 3D scene when standard DOM would be clearer\n- Letting camera input remain active under modals or inventory panels\n\n## References\n\n- Shared architecture: `..\u002Fweb-game-foundations\u002FSKILL.md`\n- Prompt recipes: `..\u002F..\u002Freferences\u002Ffrontend-prompts.md`\n- Low-chrome 3D layout patterns: `..\u002F..\u002Freferences\u002Fthree-hud-layout-patterns.md`\n- React-hosted 3D UI context: `..\u002Freact-three-fiber-game\u002FSKILL.md`\n- Playtest review: `..\u002F..\u002Freferences\u002Fplaytest-checklist.md`\n","# Game UI Frontend\n\n## Overview\n\nUse this skill whenever the game needs a visible interface layer. The job is not to produce generic dashboard UI. The job is to produce a readable, thematic browser-game interface that supports the play experience.\n\nDefault assumption: build the game world in canvas or WebGL, and build text-heavy UI in DOM.\n\n## Frontend Standards\n\n1. Establish visual direction before coding.\n   - Genre and fantasy\n   - Material language\n   - Typography\n   - Palette\n   - Motion tone\n2. Use CSS variables for the UI theme.\n3. Build clear hierarchy.\n   - Critical combat or survival information first\n   - Secondary tools second\n   - Rarely used settings behind menus or drawers\n4. Protect the playfield first, especially in 3D.\n   - The initial screen should feel playable within a few seconds.\n   - Default to one primary persistent HUD cluster and at most one small secondary cluster.\n   - Keep the center of the playfield clear during normal play.\n   - Keep the lower-middle playfield mostly clear during normal play.\n   - Put lore, field notes, quest details, and long control lists behind drawers, toggles, or pause surfaces.\n   - Prefer contextual prompts and transient hints over permanent boxed panels.\n5. Keep overlays readable over motion.\n   - Use backing panels, edge treatment, contrast, and restrained blur where needed.\n6. Design for both desktop and mobile from the start.\n7. Design 3D UI around camera and input control boundaries.\n   - Pause or gate camera-control input when menus, dialogs, or pointer-driven UI are active.\n   - Keep pointer-lock, drag-to-look, and menu interaction states explicit.\n\n## 3D Starter Defaults\n\nFor exploration, traversal, or third-person starter scaffolds, prefer this UI budget:\n\n- one compact objective chip or status strip at the edge\n- one transient controls hint or interaction prompt\n- one optional collapsible secondary surface such as a journal, map, or quest log\n\nDo not open every informational surface on first load. The scene should be readable before the user opens any deeper UI.\n\nAs a default implementation constraint for 3D browser games:\n\n- no always-on full-width header plus multi-card body plus full-width footer layout\n- no large center-screen or lower-middle overlays during normal movement\n- no more than roughly 20-25% of the viewport covered by persistent HUD on desktop unless the user explicitly requests a denser layout\n- on mobile, collapse to a narrow stack or contextual chips before covering the playfield with larger panels\n\n## Prompting Rules\n\nWhen asking the model to design or implement game UI, include:\n\n- the game fantasy\n- the camera or viewpoint\n- the player verbs\n- the HUD layers\n- the camera or control mode when the game is 3D\n- the tone of motion\n- desktop and mobile expectations\n- playfield protection and disclosure strategy\n- explicit anti-patterns to avoid\n\nUse `..\u002F..\u002Freferences\u002Ffrontend-prompts.md` for concrete prompt shapes.\n\n## Motion Rules\n\n- Prefer a few meaningful transitions over constant micro-animation.\n- Reserve strong motion for state change, reward, danger, and onboarding.\n- Respect reduced-motion settings for non-essential animation.\n- Keep 3D HUD motion from competing with camera motion.\n\n## What Good Looks Like\n\n- HUD elements are legible without flattening the scene.\n- Menus feel native to the game world, not like a SaaS admin panel.\n- Layout adapts cleanly across breakpoints.\n- Pointer, keyboard, and game-state feedback are obvious.\n- In 3D games, menu and HUD states do not fight camera control or pointer-lock.\n- In 3D games, the first playable view keeps most of the viewport available for movement, aiming, and spatial reading.\n- Persistent information density is low enough that screenshots still read as game scenes, not UI comps.\n\n## Anti-Patterns\n\n- Generic app dashboard layouts\n- Flat placeholder styling with no theme\n- Default font stacks without intent\n- Dense overlays that obscure the playfield\n- Large title cards or multi-paragraph notes sitting over a live playable scene\n- Equal-weight boxed panels distributed around every edge of the viewport\n- Controls, objectives, notes, and lore all expanded at once on first load\n- Full-width top-and-bottom chrome with large always-on center or body panels in 3D play\n- Excessive motion on every element\n- Canvas-only UI when DOM would be clearer and cheaper\n- Forcing HUD controls into the 3D scene when standard DOM would be clearer\n- Letting camera input remain active under modals or inventory panels\n\n## References\n\n- Shared architecture: `..\u002Fweb-game-foundations\u002FSKILL.md`\n- Prompt recipes: `..\u002F..\u002Freferences\u002Ffrontend-prompts.md`\n- Low-chrome 3D layout patterns: `..\u002F..\u002Freferences\u002Fthree-hud-layout-patterns.md`\n- React-hosted 3D UI context: `..\u002Freact-three-fiber-game\u002FSKILL.md`\n- Playtest review: `..\u002F..\u002Freferences\u002Fplaytest-checklist.md`\n",{"name":5,"description":7},"main","9a4409c8751439c3aeeea2bc3940ba05dc3cd3b5","plugins\u002Fgame-studio\u002Fskills\u002Fgame-ui-frontend",0,"https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins","https:\u002F\u002Fgithub.com\u002FNagyVikt","https:\u002F\u002Fwebu.hu\u002F","Codex is a tool they said...\r\n\r\nCreator of GitGuardex, CueCards. Tech stack: Next.js · TypeScript · Rust · Linux. ","2026-03-30 02:19:53",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add NagyVikt\u002Fcodex-plugins --skill game-ui-frontend",{"tool":66,"command":67},"bunx","bunx skills add NagyVikt\u002Fcodex-plugins --skill game-ui-frontend",{"tool":69,"command":70},"pnpm","pnpm dlx skills add NagyVikt\u002Fcodex-plugins --skill game-ui-frontend","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fgame-studio\u002Fskills\u002Fgame-ui-frontend\u002FSKILL.md",true,[],[75,113,147,171,197,219],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":93,"publishedAt":46},"01M6K1ZEN8P9R2S6NPNJNJ8JVH","workflow","Vercel Workflow DevKit (WDK) expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause\u002Fresume, retries, step-based execution, or crash-safe orchestration with Vercel Workflow.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fworkflow\u002FSKILL.md",[81,84,87,90],{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":88,"categoryName":89,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师",{"categoryNo":91,"categoryName":92,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000038","人力资源",[77,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112],"workflows","create","run","streaming","logs","start","why","loop","wait for","branch","auto","log","conversation","human","lib","condition","rendering","retries","sleep",{"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":129,"publishedAt":46},"01M6K1Z71NWFSPHK2VJJ73MVSY","verification","Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server start and 'why isn't this working' signals.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fverification\u002FSKILL.md",[119,122,123,126],{"categoryNo":120,"categoryName":121,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":124,"categoryName":125,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000031","产品经理",{"categoryNo":127,"categoryName":128,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000033","数据分析师",[115,130,97,131,132,133,103,134,135,136,137,138,139,140,141,142,143,144,145,146],"auth","routing middleware","api","projects","user story","full stack","jest","local","project","end","app","false","unit","error","middleware","loading","unit test",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":154,"publishedAt":46},"01M6K1YPRYJS3BQEDP8HKBHPEJ","vercel-storage","Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-storage\u002FSKILL.md",[153],{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},[155,156,157,158,96,159,160,104,161,162,163,164,165,166,140,108,167,168,169,170],"storage","vercel storage","vercel","config","supabase","migrate","router","clerk","expert","prisma","connection pooling","neon","turso","upstash","URL","auth0",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":175,"categories":176,"keywords":182,"publishedAt":46},"01M6K1YFEP0GPPGMQ3D0FPTS27","vercel-services","Vercel Services — deploy multiple services within a single Vercel project. Use for monorepo layouts or when combining a backend (Python, Go) with a frontend (Next.js, Vite) in one deployment.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-services\u002FSKILL.md",[177,178,179],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":180,"categoryName":181,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",[183,184,157,32,185,186,187,188,189,190,191,51,192,193,138,194,140,195,143,196],"vercel services","services","docker compose","SET","configure","monorepo","go api","fastapi","up","aws lambda","go backend","get","apps","python backend",{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":201,"categories":202,"keywords":203,"publishedAt":46},"01M6K1Y8S3CRD43DPKX0PK1MTT","vercel-sandbox","Vercel Sandbox guidance — ephemeral Firecracker microVMs for running untrusted code safely. Supports AI agents, code generation, and experimentation. Use when executing user-generated or AI-generated code in isolation.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-sandbox\u002FSKILL.md",[],[204,205,157,206,207,95,96,208,209,210,211,212,213,214,215,216,145,217,199,218],"sandbox","vercel sandbox","safe","ai agents","code","ai sdk","Code Generation","playground","generated","spawn","install","runner","io","child","student",{"skillNo":220,"name":221,"nameZh":6,"description":222,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":223,"categories":224,"keywords":226,"publishedAt":46},"01M6K1Y1J8S7AN97H75SHBGF7J","vercel-queues","Vercel Queues guidance (public beta) — durable event streaming with topics, consumer groups, retries, and delayed delivery. $0.60\u002F1M ops. Powers Workflow DevKit. Use when building async processing, fan-out patterns, or event-driven architectures.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-queues\u002FSKILL.md",[225],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[227,157,77,94,97,228,186,132,187,191,229,230,231,232,140,108,233,111,145,234],"vercel queues","beta","message","delivery","across","worker","processing","at"]