[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71A750VSCKW0P83MHTPXW2N":3,"skill-same:01M71A750VSCKW0P83MHTPXW2N":75},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":55,"commitSha":56,"skillDirectory":57,"forksCount":14,"repositoryHtmlUrl":58,"repositoryHomepageUrl":6,"ownerHtmlUrl":59,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":60,"install":61,"resources":74},"01M71A750VSCKW0P83MHTPXW2N","ui-page",null,"Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fglobal\u002Fui-page\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"ui","ui page","page","mobile","new","2026","section","Existing","page-design","layout","community","styleseed","design","cursor","shell","first","components","codex","gemini","safe","2026-11-10 10:12:30",false,"---\nname: ui-page\ndescription: \"Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.\"\ncategory: design\nrisk: safe\nsource: community\nsource_repo: bitjaru\u002Fstyleseed\nsource_type: community\ndate_added: \"2026-04-08\"\nauthor: bitjaru\ntags: [ui, page-design, mobile, layout, styleseed]\ntools: [claude, cursor, codex, gemini]\n---\n\n# UI Page\n\n## Overview\n\nPart of [StyleSeed](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed), this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.\n\n## When to Use\n\n- Use when you need a new page in a Toss-seed app\n- Use when you want a consistent page shell, spacing, and navigation structure\n- Use when you are adding a new product flow and need a solid starting layout\n- Use when you want to stay mobile-first even if the project later expands to larger breakpoints\n\n## How It Works\n\n### Step 1: Inspect the Existing Shell\n\nRead the current page scaffolding patterns first, especially:\n- page shell\n- top bar\n- bottom navigation\n- representative pages using the same route family\n\n### Step 2: Define the Page Purpose\n\nClarify:\n- the page name\n- the primary user question the screen answers\n- the top one or two actions the user should take\n\nEvery screen should have one dominant purpose.\n\n### Step 3: Use the Information Pyramid\n\nLay out the page from highest importance to lowest:\n1. Hero or top summary\n2. KPI or key actions\n3. detail cards or supporting modules\n4. lists, history, or secondary content\n\nAvoid repeating the same section type mechanically from top to bottom.\n\n### Step 4: Apply the Toss Layout Rules\n\nDefault layout choices:\n- mobile viewport width around `max-w-[430px]`\n- page background on `bg-background`\n- horizontal padding around `px-6`\n- section rhythm with `space-y-6`\n- generous bottom padding if a bottom nav is present\n- cards using semantic surface tokens, rounded corners, and light shadows\n\n### Step 5: Compose Instead of Rebuilding\n\nUse existing `ui\u002F` and `patterns\u002F` components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.\n\n### Step 6: Account for Real Device Constraints\n\n- handle safe-area insets\n- avoid horizontal overflow\n- keep interactive clusters thumb-friendly\n- ensure long content scrolls cleanly without clipping the bottom navigation\n\n## Output\n\nReturn:\n1. The page scaffold\n2. The chosen section structure\n3. Reused components and any newly required components\n4. Empty, loading, and error states that the page will need next\n\n## Best Practices\n\n- Keep the first version structurally correct before adding decoration\n- Use one strong hero instead of multiple competing highlights\n- Preserve navigation consistency across sibling screens\n- Prefer reusable section components when the page will likely repeat\n\n## Additional Resources\n\n- [StyleSeed repository](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed)\n- [Source skill](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002Fseeds\u002Ftoss\u002F.claude\u002Fskills\u002Fui-page\u002FSKILL.md)\n","# UI Page\n\n## Overview\n\nPart of [StyleSeed](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed), this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.\n\n## When to Use\n\n- Use when you need a new page in a Toss-seed app\n- Use when you want a consistent page shell, spacing, and navigation structure\n- Use when you are adding a new product flow and need a solid starting layout\n- Use when you want to stay mobile-first even if the project later expands to larger breakpoints\n\n## How It Works\n\n### Step 1: Inspect the Existing Shell\n\nRead the current page scaffolding patterns first, especially:\n- page shell\n- top bar\n- bottom navigation\n- representative pages using the same route family\n\n### Step 2: Define the Page Purpose\n\nClarify:\n- the page name\n- the primary user question the screen answers\n- the top one or two actions the user should take\n\nEvery screen should have one dominant purpose.\n\n### Step 3: Use the Information Pyramid\n\nLay out the page from highest importance to lowest:\n1. Hero or top summary\n2. KPI or key actions\n3. detail cards or supporting modules\n4. lists, history, or secondary content\n\nAvoid repeating the same section type mechanically from top to bottom.\n\n### Step 4: Apply the Toss Layout Rules\n\nDefault layout choices:\n- mobile viewport width around `max-w-[430px]`\n- page background on `bg-background`\n- horizontal padding around `px-6`\n- section rhythm with `space-y-6`\n- generous bottom padding if a bottom nav is present\n- cards using semantic surface tokens, rounded corners, and light shadows\n\n### Step 5: Compose Instead of Rebuilding\n\nUse existing `ui\u002F` and `patterns\u002F` components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.\n\n### Step 6: Account for Real Device Constraints\n\n- handle safe-area insets\n- avoid horizontal overflow\n- keep interactive clusters thumb-friendly\n- ensure long content scrolls cleanly without clipping the bottom navigation\n\n## Output\n\nReturn:\n1. The page scaffold\n2. The chosen section structure\n3. Reused components and any newly required components\n4. Empty, loading, and error states that the page will need next\n\n## Best Practices\n\n- Keep the first version structurally correct before adding decoration\n- Use one strong hero instead of multiple competing highlights\n- Preserve navigation consistency across sibling screens\n- Prefer reusable section components when the page will likely repeat\n\n## Additional Resources\n\n- [StyleSeed repository](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed)\n- [Source skill](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002Fseeds\u002Ftoss\u002F.claude\u002Fskills\u002Fui-page\u002FSKILL.md)\n",{"name":5,"risk":43,"tags":49,"tools":50,"author":52,"source":34,"category":36,"date_added":53,"description":7,"source_repo":54,"source_type":34},[24,32,27,33,35],[51,37,41,42],"claude","bitjaru","2026-04-08","bitjaru\u002Fstyleseed","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fglobal\u002Fui-page","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill ui-page",{"tool":67,"command":68},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill ui-page",{"tool":70,"command":71},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill ui-page","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fglobal\u002Fui-page\u002FSKILL.md",true,[],[76,97,123,133,146,165],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":85,"publishedAt":44},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000037","律师与法务",[86,87,88,89,90,36,91,92,93,94,95,96],"wechat search","wechat","search","capabilities","openclaw","web search","compliance","web","official","fetch","with",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":44},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[104,105,106,107,108,109,88,110,111,112,113,114,115,116,117,118,119,120,121,122],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":44},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[130,131,104,115,116,117,118,108,88,120,132,121,122,114,112,111,110,119,109,107],"trend radar","radar","pulse",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":44},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[140,141,142,143,144,145],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":157,"publishedAt":44},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[152],{"categoryNo":153,"categoryName":154,"taxonomyType":155,"taxonomyTypeDesc":156},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[148,93,158,159,160,96,115,161,162,163,106,164,119],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":169,"categories":170,"keywords":171,"publishedAt":44},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[167,172,173,174,119,175,162,176,177,178,179,180],"status","play","go","latest","github","discover","control","cmd","volume"]