[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-e8931403-8bea-4e23-a994-5c32e57577e5":3,"$fX4W4B5JOunEuHvxURWxPVa10J3CsvwbIm5CW-T94i-E":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"e8931403-8bea-4e23-a994-5c32e57577e5","ui-page","使用StyleSeed Toss布局模式、章节节奏和现有外壳组件搭建一个新的以移动端优先的页面。","cat_design_ui","mod_design","sickn33,design","---\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- 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\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,160,1389,"2026-05-16 13:45:08",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"a684467e-12e7-4f60-b705-1331204dc97f","1.0.0","ui-page.zip",1806,"uploads\u002Fskills\u002Fe8931403-8bea-4e23-a994-5c32e57577e5\u002Fui-page.zip","53a516daa5771795e2181498b45b9a16ec5761df92bfd11d2c925b0bcd430208","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":3513}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]