[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-1cad74f9-a184-4e68-b271-8250e8935066":3,"$fEsJVsl5UHkeInP-ZLz4y0aJIc-z5oBqg0oGjzcSHiOM":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},"1cad74f9-a184-4e68-b271-8250e8935066","ui-review","审查StyleSeed设计系统的UI代码，确保符合风格规范、可访问性、移动设备人机工程学、间距规范和实施质量。","cat_design_ui","mod_design","sickn33,design","---\nname: ui-review\ndescription: \"Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.\"\ncategory: design\nrisk: safe\nsource: community\nsource_repo: bitjaru\u002Fstyleseed\nsource_type: community\ndate_added: \"2026-04-08\"\nauthor: bitjaru\ntags: [ui, review, design-system, accessibility, styleseed]\ntools: [claude, cursor, codex, gemini]\n---\n\n# UI Review\n\n## Overview\n\nPart of [StyleSeed](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed), this skill audits UI code against the Toss seed's conventions instead of reviewing it as generic frontend work. It focuses on design-token discipline, component ergonomics, accessibility, mobile readiness, typography, and spacing consistency.\n\n## When to Use\n- Use when a component or page should follow the StyleSeed Toss design language\n- Use when reviewing a UI-heavy PR for consistency and design-system violations\n- Use when the output looks \"mostly fine\" but feels off in subtle ways\n- Use when you need a structured review with concrete fixes\n\n## Review Checklist\n\n### Design Tokens\n\n- no hardcoded hex colors when semantic tokens exist\n- no improvised shadow values when tokenized shadows exist\n- no arbitrary radius choices outside the system scale\n- no random spacing values that break the seed rhythm\n\n### Component Conventions\n\n- uses the project's class merge helper\n- supports `className` extension when appropriate\n- uses the agreed typing pattern\n- avoids wrapper components that only forward one class string\n- reuses existing primitives before inventing new ones\n\n### Accessibility\n\n- touch targets large enough for mobile\n- visible keyboard focus states\n- labels and `aria-*` attributes where needed\n- adequate color contrast\n- reduced-motion respect for animation\n\n### Mobile UX\n\n- no horizontal overflow\n- safe-area handling where relevant\n- readable text sizes\n- thumb-friendly interaction spacing\n- bottom nav or sticky actions do not obscure content\n\n### Typography and Spacing\n\n- uses the system type hierarchy\n- display and headings are not overly loose\n- body text remains readable\n- spacing follows the seed grid instead of arbitrary values\n\n## Output Format\n\nReturn:\n1. A verdict: Pass, Needs Improvement, or Fail\n2. A prioritized list of issues with file and line references when available\n3. Concrete fixes for each issue\n4. Any open questions where the design intent is ambiguous\n\n## Best Practices\n\n- Review against the seed, not against personal taste\n- Separate stylistic drift from real usability or accessibility bugs\n- Prefer actionable diffs over abstract criticism\n- Call out duplication when an existing component already solves the problem\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-review\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,170,1330,"2026-05-16 13:45:13",{"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},"c4fcd532-2748-4a20-92e8-019cebad6d89","1.0.0","ui-review.zip",1690,"uploads\u002Fskills\u002F1cad74f9-a184-4e68-b271-8250e8935066\u002Fui-review.zip","87c06e6c09fe5e83f2a39ba13e4b3ac9e0185146e5a88bcd23cad586a628096b","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":3202}]",{"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]