[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FCNDR8MA32DMHTKMWYZEW0":3,"skill-same:01M6FCNDR8MA32DMHTKMWYZEW0":77},{"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":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":26,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6FCNDR8MA32DMHTKMWYZEW0","ui-pattern",null,"Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives","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-pattern\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,43,44,45,46,47],"ui","ui pattern","pattern","main","blob","section","grid","tree","ss","form","card","critical","layout","wed","design","community","styleseed","list","engine","system","https","license","generate","design system","github","2026-11-10 10:12:30",false,"---\nname: ui-pattern\ndescription: Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives\nrisk: critical\nsource: https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Ftree\u002Fmain\u002Fengine\u002F.claude\u002Fskills\u002Fss-pattern\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 Pattern Generator\n## When to Use\n\nUse this skill when you need generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.\n\n\n## When NOT to use\n\n- For a single primitive component → use `\u002Fss-component`\n- For a full mobile screen → use `\u002Fss-page`\n- For an entire multi-page user flow → use `\u002Fss-flow`\n- For design tokens and color\u002Fspacing decisions → use `\u002Fss-tokens`\n\nPattern type: **$0**\nDescription: $ARGUMENTS\n\n## Available Pattern Types\n\n### Layout Patterns\n- **card-section**: Card with title + content inside page section (`mx-6`)\n- **grid-2col**: 2-column grid of cards (`grid grid-cols-2 gap-4 px-6`)\n- **scroll-horizontal**: Horizontal scrolling card list (`flex gap-3 overflow-x-auto scrollbar-hide`)\n- **list-section**: Vertical list of items inside a card\n- **form-section**: Form with labeled inputs in a card\n- **stat-grid**: Grid of StatCard components\n\n### Data Display Patterns\n- **data-table**: Table with header and rows\n- **detail-card**: Key-value pair display\n- **chart-card**: Card wrapper for a Recharts chart\n- **ranking-list**: Numbered ranking with highlight\n\n### Interactive Patterns\n- **action-sheet**: Bottom sheet with action buttons\n- **filter-bar**: Horizontal filter\u002Ftab bar\n- **search-header**: Search input in header area\n\n## Instructions\n\n1. Read the design system reference:\n   - `CLAUDE.md` for conventions\n   - `components\u002Fui\u002F` for available primitives\n   - `components\u002Fpatterns\u002F` for existing patterns\n\n2. Compose the pattern from existing components — DO NOT recreate primitives.\n\n3. Follow the design system layout rules:\n   - Cards: `bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]`\n   - Section wrapper: `mx-6` for horizontal margin\n   - Section title: `text-foreground font-bold text-[18px] mb-4`\n   - List gap: `space-y-3`\n   - Grid gap: `gap-4`\n\n4. Use semantic tokens for all visual properties.\n\n5. Make the pattern a reusable component with props for dynamic content.\n\n## Example\n\n**User request:**\n\n> Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.\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 Pattern Generator\n## When to Use\n\nUse this skill when you need generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.\n\n\n## When NOT to use\n\n- For a single primitive component → use `\u002Fss-component`\n- For a full mobile screen → use `\u002Fss-page`\n- For an entire multi-page user flow → use `\u002Fss-flow`\n- For design tokens and color\u002Fspacing decisions → use `\u002Fss-tokens`\n\nPattern type: **$0**\nDescription: $ARGUMENTS\n\n## Available Pattern Types\n\n### Layout Patterns\n- **card-section**: Card with title + content inside page section (`mx-6`)\n- **grid-2col**: 2-column grid of cards (`grid grid-cols-2 gap-4 px-6`)\n- **scroll-horizontal**: Horizontal scrolling card list (`flex gap-3 overflow-x-auto scrollbar-hide`)\n- **list-section**: Vertical list of items inside a card\n- **form-section**: Form with labeled inputs in a card\n- **stat-grid**: Grid of StatCard components\n\n### Data Display Patterns\n- **data-table**: Table with header and rows\n- **detail-card**: Key-value pair display\n- **chart-card**: Card wrapper for a Recharts chart\n- **ranking-list**: Numbered ranking with highlight\n\n### Interactive Patterns\n- **action-sheet**: Bottom sheet with action buttons\n- **filter-bar**: Horizontal filter\u002Ftab bar\n- **search-header**: Search input in header area\n\n## Instructions\n\n1. Read the design system reference:\n   - `CLAUDE.md` for conventions\n   - `components\u002Fui\u002F` for available primitives\n   - `components\u002Fpatterns\u002F` for existing patterns\n\n2. Compose the pattern from existing components — DO NOT recreate primitives.\n\n3. Follow the design system layout rules:\n   - Cards: `bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]`\n   - Section wrapper: `mx-6` for horizontal margin\n   - Section title: `text-foreground font-bold text-[18px] mb-4`\n   - List gap: `space-y-3`\n   - Grid gap: `gap-4`\n\n4. Use semantic tokens for all visual properties.\n\n5. Make the pattern a reusable component with props for dynamic content.\n\n## Example\n\n**User request:**\n\n> Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.\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":34,"source":53,"license":14,"date_added":54,"description":7,"source_repo":55,"source_type":38,"license_source":56},"https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Ftree\u002Fmain\u002Fengine\u002F.claude\u002Fskills\u002Fss-pattern",1782864000000,"bitjaru\u002Fstyleseed","https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002FLICENSE","7bf2279c8a65758319526a721d5c4b75683aec9c","skills\u002Fantigravity-ui-pattern",3,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections","https:\u002F\u002Fgithub.com\u002Fboisenoise","2026-11-10 14:20:15",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add boisenoise\u002Fskills-collections --skill ui-pattern",{"tool":69,"command":70},"bunx","bunx skills add boisenoise\u002Fskills-collections --skill ui-pattern",{"tool":72,"command":73},"pnpm","pnpm dlx skills add boisenoise\u002Fskills-collections --skill ui-pattern","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-ui-pattern\u002FSKILL.md",true,[],[78,107,132,155,174,197],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":82,"licenseFileUrl":83,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":48},"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",[],[87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,34,102,103,104,105,106],"web","access","web access","official","development","browser","search","data","Tools","read","fetch","only","youtube","free tools","platform","free","cover","normal","when","2026",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":82,"licenseFileUrl":111,"sourceHtmlUrl":112,"categories":113,"keywords":119,"publishedAt":48},"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",[114],{"categoryNo":115,"categoryName":116,"taxonomyType":117,"taxonomyTypeDesc":118},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[109,120,121,47,90,91,44,95,122,123,124,125,126,127,128,34,129,130,131,27,106],"MCP","cli","Budget","credentials","team","catalog","use","call","discover","external tools","with","scoped",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":82,"licenseFileUrl":136,"sourceHtmlUrl":137,"categories":138,"keywords":142,"publishedAt":48},"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",[139],{"categoryNo":140,"categoryName":141,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000038","人力资源",[134,47,90,44,43,143,144,145,146,147,34,148,149,150,130,151,152,153,154,27,109,106],"email","enrichment","business","evidence","phone","ranking","post","job description","for","person","candidate","reason",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":82,"licenseFileUrl":159,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":48},"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",[],[163,164,165,47,90,44,166,167,43,168,122,169,170,171,146,34,172,173,27,109,106],"growth","rea","rea growth","produce","content","playbook","marketing","analyze","public","observations","company",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":82,"licenseFileUrl":178,"sourceHtmlUrl":179,"categories":180,"keywords":181,"publishedAt":48},"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",[],[182,183,47,184,90,185,44,186,187,188,189,190,34,191,192,193,194,195,196,27],"make","make ugc","research","create","Video","Captions","ads","short","hooks","head","style","niche","trending","talking-head","approve",{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":82,"licenseFileUrl":201,"sourceHtmlUrl":202,"categories":203,"keywords":204,"publishedAt":48},"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",[],[205,206,207,47,90,44,208,209,145,210,211,34,212,213,214,215,216,217,218,27],"signals","lead","lead signals","how","find","ready","as","how to","qualify","people","information","enrich","changes","funding"]