[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FCMSBTE6MJH7QPPDR2NRS3":3,"skill-same:01M6FCMSBTE6MJH7QPPDR2NRS3":72},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":35,"commitSha":52,"skillDirectory":53,"forksCount":54,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M6FCMSBTE6MJH7QPPDR2NRS3","ui-component",null,"Generate a new UI component following the StyleSeed design conventions","boisenoise\u002Fskills-collections","boisenoise","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F193180?v=4","01M6CDBDQK6BDN55ZMA6B6PKBM","01M6CDBDVSJ3JPTBYN26FZ7TZK",12,"MIT","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-ui-component\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"component","ui","ui component","community","new","2026","blob","tree","ss","critical","conventions","wed","main","design","styleseed","engine","https","license","generate","github","2026-11-10 10:12:30",false,"---\nname: ui-component\ndescription: Generate a new UI component following the StyleSeed design conventions\nrisk: critical\nsource: https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Ftree\u002Fmain\u002Fengine\u002F.claude\u002Fskills\u002Fss-component\nsource_repo: bitjaru\u002Fstyleseed\nsource_type: community\ndate_added: 2026-07-01\nlicense: MIT\nlicense_source: https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002FLICENSE\n---\n\n# UI Component Generator\n## When to Use\n\nUse this skill when you need generate a new UI component following the StyleSeed design conventions.\n\n\n## When NOT to use\n\n- For full-page scaffolding → use `\u002Fss-page`\n- For composed multi-component patterns → use `\u002Fss-pattern`\n- For tweaking an existing component — just edit the file directly\n- For non-StyleSeed projects (no `components\u002Fui\u002F` directory or no Tailwind v4)\n\nGenerate a new component: **$0**\nDescription: $ARGUMENTS\n\n## Instructions\n\n1. First, read the design system seed for context:\n   - Read `CLAUDE.md` for component conventions\n   - Read `css\u002Ftheme.css` for available design tokens\n   - Read `components\u002Fui\u002Fbutton.tsx` as a reference pattern\n\n2. Follow these conventions strictly:\n   - Use `function` declaration (not `const`)\n   - Add `data-slot=\"component-name\"` attribute\n   - Use `cn()` from `@\u002Fcomponents\u002Fui\u002Futils` for all className merging\n   - Use `React.ComponentProps\u003C>` for prop typing\n   - Always support `className` prop for overrides\n   - Use CVA (`class-variance-authority`) if the component has variants\n   - Use semantic color tokens (`bg-card`, `text-foreground`) — never inline hex\n\n3. Design token usage:\n   - Colors: `text-foreground`, `bg-card`, `text-brand`, `text-muted-foreground`, `border-border`\n   - Shadows: `shadow-[var(--shadow-card)]`, `shadow-[var(--shadow-elevated)]`\n   - Radius: `rounded-md`, `rounded-lg`, `rounded-2xl`\n   - Spacing: multiples of 6px (`p-1.5`, `p-3`, `p-6`)\n   - Motion: `duration-[var(--duration-fast)]`, `ease-[var(--ease-default)]`\n\n4. Typography rules:\n   - Display (36-48px): `leading-none tracking-[-0.02em]`\n   - Heading (18-24px): `leading-snug tracking-[-0.01em]`\n   - Body (14-17px): `leading-normal` (default tracking)\n   - Caption uppercase (10-13px): `tracking-[0.05em]`\n   - Use `size-*` shorthand instead of `w-* h-*`\n   - Use `ms-*\u002Fme-*` instead of `ml-*\u002Fmr-*` (logical properties)\n\n5. Accessibility requirements:\n   - Minimum touch target: 44x44px (`min-h-11 min-w-11`)\n   - Support `aria-*` attributes passthrough\n   - Use `focus-visible:ring-2 focus-visible:ring-ring` for keyboard focus\n   - Respect `prefers-reduced-motion` for animations\n\n6. Export the component as a named export (not default)\n\n7. Place the file in the appropriate directory:\n   - Primitive\u002Freusable → `src\u002Fcomponents\u002Fui\u002F`\n   - Composed pattern → `src\u002Fcomponents\u002Fpatterns\u002F`\n\n## Example\n\n**User request:**\n\n> Generate a new UI component following the StyleSeed design conventions.\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n\n## Execution boundaries\n\nThis guide targets an existing StyleSeed project. The listed project paths, components, tokens and \u002Fss-* commands are not bundled in this single-file entrypoint. Discover the actual project root and verify those prerequisites before edits; report absent resources instead of inventing them. Use host-supported invocation and existing project conventions. Layout numbers are design-system choices, not universal usability guarantees. Test keyboard access, responsive overflow and reduced motion on the actual interface.\n","# UI Component Generator\n## When to Use\n\nUse this skill when you need generate a new UI component following the StyleSeed design conventions.\n\n\n## When NOT to use\n\n- For full-page scaffolding → use `\u002Fss-page`\n- For composed multi-component patterns → use `\u002Fss-pattern`\n- For tweaking an existing component — just edit the file directly\n- For non-StyleSeed projects (no `components\u002Fui\u002F` directory or no Tailwind v4)\n\nGenerate a new component: **$0**\nDescription: $ARGUMENTS\n\n## Instructions\n\n1. First, read the design system seed for context:\n   - Read `CLAUDE.md` for component conventions\n   - Read `css\u002Ftheme.css` for available design tokens\n   - Read `components\u002Fui\u002Fbutton.tsx` as a reference pattern\n\n2. Follow these conventions strictly:\n   - Use `function` declaration (not `const`)\n   - Add `data-slot=\"component-name\"` attribute\n   - Use `cn()` from `@\u002Fcomponents\u002Fui\u002Futils` for all className merging\n   - Use `React.ComponentProps\u003C>` for prop typing\n   - Always support `className` prop for overrides\n   - Use CVA (`class-variance-authority`) if the component has variants\n   - Use semantic color tokens (`bg-card`, `text-foreground`) — never inline hex\n\n3. Design token usage:\n   - Colors: `text-foreground`, `bg-card`, `text-brand`, `text-muted-foreground`, `border-border`\n   - Shadows: `shadow-[var(--shadow-card)]`, `shadow-[var(--shadow-elevated)]`\n   - Radius: `rounded-md`, `rounded-lg`, `rounded-2xl`\n   - Spacing: multiples of 6px (`p-1.5`, `p-3`, `p-6`)\n   - Motion: `duration-[var(--duration-fast)]`, `ease-[var(--ease-default)]`\n\n4. Typography rules:\n   - Display (36-48px): `leading-none tracking-[-0.02em]`\n   - Heading (18-24px): `leading-snug tracking-[-0.01em]`\n   - Body (14-17px): `leading-normal` (default tracking)\n   - Caption uppercase (10-13px): `tracking-[0.05em]`\n   - Use `size-*` shorthand instead of `w-* h-*`\n   - Use `ms-*\u002Fme-*` instead of `ml-*\u002Fmr-*` (logical properties)\n\n5. Accessibility requirements:\n   - Minimum touch target: 44x44px (`min-h-11 min-w-11`)\n   - Support `aria-*` attributes passthrough\n   - Use `focus-visible:ring-2 focus-visible:ring-ring` for keyboard focus\n   - Respect `prefers-reduced-motion` for animations\n\n6. Export the component as a named export (not default)\n\n7. Place the file in the appropriate directory:\n   - Primitive\u002Freusable → `src\u002Fcomponents\u002Fui\u002F`\n   - Composed pattern → `src\u002Fcomponents\u002Fpatterns\u002F`\n\n## Example\n\n**User request:**\n\n> Generate a new UI component following the StyleSeed design conventions.\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n\n## Execution boundaries\n\nThis guide targets an existing StyleSeed project. The listed project paths, components, tokens and \u002Fss-* commands are not bundled in this single-file entrypoint. Discover the actual project root and verify those prerequisites before edits; report absent resources instead of inventing them. Use host-supported invocation and existing project conventions. Layout numbers are design-system choices, not universal usability guarantees. Test keyboard access, responsive overflow and reduced motion on the actual interface.\n",{"name":5,"risk":32,"source":48,"license":14,"date_added":49,"description":7,"source_repo":50,"source_type":26,"license_source":51},"https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Ftree\u002Fmain\u002Fengine\u002F.claude\u002Fskills\u002Fss-component",1782864000000,"bitjaru\u002Fstyleseed","https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002FLICENSE","7bf2279c8a65758319526a721d5c4b75683aec9c","skills\u002Fantigravity-ui-component",3,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections","https:\u002F\u002Fgithub.com\u002Fboisenoise","2026-11-11 14:20:43",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add boisenoise\u002Fskills-collections --skill ui-component",{"tool":64,"command":65},"bunx","bunx skills add boisenoise\u002Fskills-collections --skill ui-component",{"tool":67,"command":68},"pnpm","pnpm dlx skills add boisenoise\u002Fskills-collections --skill ui-component","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-ui-component\u002FSKILL.md",true,[],[73,101,126,149,168,191],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":77,"licenseFileUrl":78,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":43},"01M6WNH92BHVFXHGPDZCPJ0AG0","web-access","Use Treg for public web or platform data only when existing search, browser and connected tools cannot cover the task, with explicit cost and data boundaries.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-web-access\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-web-access\u002FSKILL.md",[],[82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,32,97,98,99,100,28],"web","access","web access","official","development","browser","search","data","Tools","read","fetch","only","youtube","free tools","platform","free","cover","normal","when",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":77,"licenseFileUrl":105,"sourceHtmlUrl":106,"categories":107,"keywords":113,"publishedAt":43},"01M6WNF9XAYAB2CZDDJBAKNM93","treg","Use the Treg CLI or MCP catalog to discover, price and call authorized external tools with team-scoped credentials and a user-approved budget.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-treg\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-treg\u002FSKILL.md",[108],{"categoryNo":109,"categoryName":110,"taxonomyType":111,"taxonomyTypeDesc":112},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[103,114,115,42,85,86,40,90,116,117,118,119,120,121,122,32,123,124,125,29,28],"MCP","cli","Budget","credentials","team","catalog","use","call","discover","external tools","with","scoped",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":77,"licenseFileUrl":130,"sourceHtmlUrl":131,"categories":132,"keywords":136,"publishedAt":43},"01M6WN93MEAZ4E41DYAHJRPHQT","recruit","Turn a job description into an evidence-linked candidate shortlist through Treg, with job-related ranking and optional authorized business contact enrichment.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-recruit\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-recruit\u002FSKILL.md",[133],{"categoryNo":134,"categoryName":135,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000038","人力资源",[128,42,85,40,39,137,138,139,140,141,32,142,143,144,124,145,146,147,148,29,103,28],"email","enrichment","business","evidence","phone","ranking","post","job description","for","person","candidate","reason",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":77,"licenseFileUrl":153,"sourceHtmlUrl":154,"categories":155,"keywords":156,"publishedAt":43},"01M6WN8R5RXSMHM9B4D9FAFX42","rea-growth","Analyze a company’s public growth and content through Treg, distinguish observations from hypotheses, and produce an evidence-linked playbook within an approved budget.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-rea-growth\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-rea-growth\u002FSKILL.md",[],[157,158,159,42,85,40,160,161,39,162,116,163,164,165,140,32,166,167,29,103,28],"growth","rea","rea growth","produce","content","playbook","marketing","analyze","public","observations","company",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":77,"licenseFileUrl":172,"sourceHtmlUrl":173,"categories":174,"keywords":175,"publishedAt":43},"01M6WN2EVE3RQRGWAKBT4S7YT2","make-ugc","Create original AI UGC-style product videos through Treg: research hooks, approve a licensed presenter and voice, generate clips, add captions and report costs.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-make-ugc\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-make-ugc\u002FSKILL.md",[],[176,177,42,178,85,179,40,180,181,182,183,184,32,185,186,187,188,189,190,29],"make","make ugc","research","create","Video","Captions","ads","short","hooks","head","style","niche","trending","talking-head","approve",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":77,"licenseFileUrl":195,"sourceHtmlUrl":196,"categories":197,"keywords":198,"publishedAt":43},"01M6WN10ARAA63Y8K1YNGXJ2RM","lead-signals","Find and qualify public buying signals through Treg, rank fitting business accounts and optionally enrich authorized business contact information.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lead-signals\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lead-signals\u002FSKILL.md",[],[199,200,201,42,85,40,202,203,139,204,205,32,206,207,208,209,210,211,212,29],"signals","lead","lead signals","how","find","ready","as","how to","qualify","people","information","enrich","changes","funding"]