[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-4d1f1b96-bc9d-4136-b334-30bd79c0b56f":3,"$fHCKCwWlY4576Qhddnb0yjQDUu0MgEkKo0Beprj5JLMA":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},"4d1f1b96-bc9d-4136-b334-30bd79c0b56f","ux-flow","使用StyleSeed UX模式如渐进式披露、中心辐射导航和信息金字塔设计用户流程和屏幕结构。","cat_design_ui","mod_design","sickn33,design","---\nname: ux-flow\ndescription: \"Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.\"\ncategory: design\nrisk: safe\nsource: community\nsource_repo: bitjaru\u002Fstyleseed\nsource_type: community\ndate_added: \"2026-04-08\"\nauthor: bitjaru\ntags: [ux, flows, navigation, product-design, styleseed]\ntools: [claude, cursor, codex, gemini]\n---\n\n# UX Flow\n\n## Overview\n\nPart of [StyleSeed](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed), this skill designs flows before screens. It uses proven UX patterns to define entry points, exits, screen inventory, and navigation structure so the implementation has a coherent user journey instead of a pile of disconnected pages.\n\n## When to Use\n- Use when planning onboarding, checkout, account management, dashboards, or drill-down flows\n- Use when a new feature spans multiple screens or modal states\n- Use when users need a clear path through a task instead of a single isolated page\n- Use when the UI needs navigation logic before components are built\n\n## How It Works\n\n### Information Architecture Principles\n\n- progressive disclosure: reveal complexity only when needed\n- Miller's Law: chunk content into manageable groups\n- Hick's Law: minimize decision overload on each screen\n\n### Common Navigation Models\n\n- hub and spoke for dashboards and detail views\n- linear flow for onboarding, forms, and checkout\n- tab navigation for 3 to 5 top-level areas\n\n### Flow Rules\n\n- every flow has a clear entry point\n- every flow has a clear exit or success condition\n- key features should usually be reachable within three taps from home\n- non-root screens need back navigation\n- loading, empty, and error states need explicit recovery paths\n\n## Output\n\nProvide:\n1. An ASCII flow diagram\n2. A screen inventory with each screen's purpose\n3. Edge cases for loading, empty, and error states\n4. Recommended page scaffolds and reusable patterns to implement next\n\n## Best Practices\n\n- Optimize for clarity before density\n- Let one screen answer one primary question\n- Keep escape hatches visible for risky or destructive steps\n- Define state transitions before drawing detailed layouts\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\u002Fux-flow\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,213,1724,"2026-05-16 13:45:51",{"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},"62bfd296-9469-4f8e-b771-ee042937b590","1.0.0","ux-flow.zip",1448,"uploads\u002Fskills\u002F4d1f1b96-bc9d-4136-b334-30bd79c0b56f\u002Fux-flow.zip","34de7e2b2d8e3bbb23d1348af39b514050bb3817d6c6059ceb068fda331f561c","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":2706}]",{"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]