[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-3655977c-7d4d-4016-978a-3a345b3748a2":3,"$fUmRaq0Ubb49NtRIJ78gno6r3ATSfLhE5G7s9ge7VaVo":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},"3655977c-7d4d-4016-978a-3a345b3748a2","ui-component","生成一个遵循StyleSeed Toss结构、标记、可访问性和组件人体工程学约定的新UI组件。","cat_design_ui","mod_design","sickn33,design","---\nname: ui-component\ndescription: \"Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.\"\ncategory: design\nrisk: safe\nsource: community\nsource_repo: bitjaru\u002Fstyleseed\nsource_type: community\ndate_added: \"2026-04-08\"\nauthor: bitjaru\ntags: [ui, components, design-system, frontend, styleseed]\ntools: [claude, cursor, codex, gemini]\n---\n\n# UI Component\n\n## Overview\n\nPart of [StyleSeed](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed), this skill generates components that respect the Toss seed's design language instead of improvising ad hoc markup and styling. It emphasizes semantic tokens, predictable typing, reusable variants, and mobile-friendly accessibility defaults.\n\n## When to Use\n- Use when you need a new UI primitive or composed component inside a StyleSeed-based project\n- Use when you want a component to match the existing Toss seed conventions\n- Use when a component should be reusable, typed, and design-token driven\n- Use when the AI might otherwise invent spacing, colors, or interaction patterns\n\n## How It Works\n\n### Step 1: Read the Local Design Context\n\nBefore generating code, inspect the seed's source of truth:\n- `CLAUDE.md` for conventions\n- `css\u002Ftheme.css` for semantic tokens\n- at least one representative component from `components\u002Fui\u002F`\n\nIf the user already has a better local example, follow the local codebase over a generic template.\n\n### Step 2: Choose the Correct Home\n\nPlace the output where it belongs:\n- `src\u002Fcomponents\u002Fui\u002F` for primitives and low-level building blocks\n- `src\u002Fcomponents\u002Fpatterns\u002F` for composed sections or multi-part patterns\n\nDo not create a new primitive if an existing one can be extended safely.\n\n### Step 3: Follow the Structural Rules\n\nUse these defaults unless the host project strongly disagrees:\n- function declaration instead of a `const` component\n- `React.ComponentProps\u003C>` or equivalent native prop typing\n- `className` passthrough support\n- `cn()` or the project's standard class merger\n- `data-slot` for component identification\n- CVA or equivalent only when variants are genuinely needed\n\n### Step 4: Use Semantic Tokens Only\n\nDo not hardcode visual values if the design system has a token for them.\n\nPreferred examples:\n- `bg-card`\n- `text-foreground`\n- `text-muted-foreground`\n- `border-border`\n- `shadow-[var(--shadow-card)]`\n\n### Step 5: Preserve StyleSeed Typography and Spacing\n\n- Use the scale already defined by the seed\n- Prefer multiples of 6px\n- Use logical spacing utilities where supported\n- Keep display and heading text tight, body text readable, captions restrained\n\n### Step 6: Bake in Accessibility\n\n- Touch targets should be at least 44x44px for interactive elements\n- Keyboard focus must be visible\n- Pass through `aria-*` attributes where appropriate\n- Respect reduced-motion preferences for nonessential motion\n\n## Output\n\nProvide:\n1. The generated component\n2. The target path\n3. Any required imports or dependencies\n4. Notes on variants, tokens, or follow-up integration work\n\n## Best Practices\n\n- Compose from existing primitives before inventing new ones\n- Keep the component API small and predictable\n- Prefer semantic layout classes over arbitrary values\n- Export named components unless the host project uses another standard consistently\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-component\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,155,1085,"2026-05-16 13:45:07",{"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},"6d05ec50-fc89-40d3-a096-3295f68c63b8","1.0.0","ui-component.zip",1937,"uploads\u002Fskills\u002F3655977c-7d4d-4016-978a-3a345b3748a2\u002Fui-component.zip","60b965096cc31cea5de3db7c2cdce70056a8a9264aeb5f143966c3e418dcefd6","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":3830}]",{"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]