[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6ENWQ1CGS2W44CKS073ESS0":3,"skill-same:01M6ENWQ1CGS2W44CKS073ESS0":78},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6ENWQ1CGS2W44CKS073ESS0","core-components",null,"Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fchriswiles\u002Fcore-components\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"components","core","core components","design","component","design system","component library","library","ui","system","use","design tokens","design system patterns","patterns","tokens","2026-11-10 10:12:30",false,"---\nname: core-components\ndescription: Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.\n---\n\n# Core Components\n\n## Design System Overview\n\nUse components from your core library instead of raw platform components. This ensures consistent styling and behavior.\n\n## Design Tokens\n\n**NEVER hard-code values. Always use design tokens.**\n\n### Spacing Tokens\n\n```tsx\n\u002F\u002F CORRECT - Use tokens\n\u003CBox padding=\"$4\" marginBottom=\"$2\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded values\n\u003CBox padding={16} marginBottom={8} \u002F>\n```\n\n| Token | Value |\n|-------|-------|\n| `$1` | 4px |\n| `$2` | 8px |\n| `$3` | 12px |\n| `$4` | 16px |\n| `$6` | 24px |\n| `$8` | 32px |\n\n### Color Tokens\n\n```tsx\n\u002F\u002F CORRECT - Semantic tokens\n\u003CText color=\"$textPrimary\" \u002F>\n\u003CBox backgroundColor=\"$backgroundSecondary\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded colors\n\u003CText color=\"#333333\" \u002F>\n\u003CBox backgroundColor=\"rgb(245, 245, 245)\" \u002F>\n```\n\n| Semantic Token | Use For |\n|----------------|---------|\n| `$textPrimary` | Main text |\n| `$textSecondary` | Supporting text |\n| `$textTertiary` | Disabled\u002Fhint text |\n| `$primary500` | Brand\u002Faccent color |\n| `$statusError` | Error states |\n| `$statusSuccess` | Success states |\n\n### Typography Tokens\n\n```tsx\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\" \u002F>\n```\n\n| Token | Size |\n|-------|------|\n| `$xs` | 12px |\n| `$sm` | 14px |\n| `$md` | 16px |\n| `$lg` | 18px |\n| `$xl` | 20px |\n| `$2xl` | 24px |\n\n## Core Components\n\n### Box\n\nBase layout component with token support:\n\n```tsx\n\u003CBox\n  padding=\"$4\"\n  backgroundColor=\"$backgroundPrimary\"\n  borderRadius=\"$lg\"\n>\n  {children}\n\u003C\u002FBox>\n```\n\n### HStack \u002F VStack\n\nHorizontal and vertical flex layouts:\n\n```tsx\n\u003CHStack gap=\"$3\" alignItems=\"center\">\n  \u003CIcon name=\"user\" \u002F>\n  \u003CText>Username\u003C\u002FText>\n\u003C\u002FHStack>\n\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CHeading>Title\u003C\u002FHeading>\n  \u003CText>Content\u003C\u002FText>\n\u003C\u002FVStack>\n```\n\n### Text\n\nTypography with token support:\n\n```tsx\n\u003CText\n  fontSize=\"$lg\"\n  fontWeight=\"$semibold\"\n  color=\"$textPrimary\"\n>\n  Hello World\n\u003C\u002FText>\n```\n\n### Button\n\nInteractive button with variants:\n\n```tsx\n\u003CButton\n  onPress={handlePress}\n  variant=\"solid\"\n  size=\"md\"\n  isLoading={loading}\n  isDisabled={disabled}\n>\n  Click Me\n\u003C\u002FButton>\n```\n\n| Variant | Use For |\n|---------|---------|\n| `solid` | Primary actions |\n| `outline` | Secondary actions |\n| `ghost` | Tertiary\u002Fsubtle actions |\n| `link` | Inline actions |\n\n### Input\n\nForm input with validation:\n\n```tsx\n\u003CInput\n  value={value}\n  onChangeText={setValue}\n  placeholder=\"Enter text\"\n  error={touched ? errors.field : undefined}\n  label=\"Field Name\"\n\u002F>\n```\n\n### Card\n\nContent container:\n\n```tsx\n\u003CCard padding=\"$4\" gap=\"$3\">\n  \u003CCardHeader>\n    \u003CHeading size=\"sm\">Card Title\u003C\u002FHeading>\n  \u003C\u002FCardHeader>\n  \u003CCardBody>\n    \u003CText>Card content\u003C\u002FText>\n  \u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n## Layout Patterns\n\n### Screen Layout\n\n```tsx\nconst MyScreen = () => (\n  \u003CScreen>\n    \u003CScreenHeader title=\"Page Title\" \u002F>\n    \u003CScreenContent padding=\"$4\">\n      {\u002F* Content *\u002F}\n    \u003C\u002FScreenContent>\n  \u003C\u002FScreen>\n);\n```\n\n### Form Layout\n\n```tsx\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CInput label=\"Name\" {...nameProps} \u002F>\n  \u003CInput label=\"Email\" {...emailProps} \u002F>\n  \u003CButton isLoading={loading}>Submit\u003C\u002FButton>\n\u003C\u002FVStack>\n```\n\n### List Item Layout\n\n```tsx\n\u003CHStack\n  padding=\"$4\"\n  gap=\"$3\"\n  alignItems=\"center\"\n  borderBottomWidth={1}\n  borderColor=\"$borderLight\"\n>\n  \u003CAvatar source={{ uri: imageUrl }} size=\"md\" \u002F>\n  \u003CVStack flex={1}>\n    \u003CText fontWeight=\"$semibold\">{title}\u003C\u002FText>\n    \u003CText color=\"$textSecondary\" fontSize=\"$sm\">{subtitle}\u003C\u002FText>\n  \u003C\u002FVStack>\n  \u003CIcon name=\"chevron-right\" color=\"$textTertiary\" \u002F>\n\u003C\u002FHStack>\n```\n\n## Anti-Patterns\n\n```tsx\n\u002F\u002F WRONG - Hard-coded values\n\u003CView style={{ padding: 16, backgroundColor: '#fff' }}>\n\n\u002F\u002F CORRECT - Design tokens\n\u003CBox padding=\"$4\" backgroundColor=\"$backgroundPrimary\">\n\n\n\u002F\u002F WRONG - Raw platform components\nimport { View, Text } from 'react-native';\n\n\u002F\u002F CORRECT - Core components\nimport { Box, Text } from 'components\u002Fcore';\n\n\n\u002F\u002F WRONG - Inline styles\n\u003CText style={{ fontSize: 18, fontWeight: '600' }}>\n\n\u002F\u002F CORRECT - Token props\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\">\n```\n\n## Component Props Pattern\n\nWhen creating components, use token-based props:\n\n```tsx\ninterface CardProps {\n  padding?: '$2' | '$4' | '$6';\n  variant?: 'elevated' | 'outlined' | 'filled';\n  children: React.ReactNode;\n}\n\nconst Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (\n  \u003CBox\n    padding={padding}\n    backgroundColor=\"$backgroundPrimary\"\n    borderRadius=\"$lg\"\n    {...variantStyles[variant]}\n  >\n    {children}\n  \u003C\u002FBox>\n);\n```\n\n## Integration with Other Skills\n\n- **react-ui-patterns**: Use core components for UI states\n- **testing-patterns**: Mock core components in tests\n- **storybook**: Document component variants\n","# Core Components\n\n## Design System Overview\n\nUse components from your core library instead of raw platform components. This ensures consistent styling and behavior.\n\n## Design Tokens\n\n**NEVER hard-code values. Always use design tokens.**\n\n### Spacing Tokens\n\n```tsx\n\u002F\u002F CORRECT - Use tokens\n\u003CBox padding=\"$4\" marginBottom=\"$2\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded values\n\u003CBox padding={16} marginBottom={8} \u002F>\n```\n\n| Token | Value |\n|-------|-------|\n| `$1` | 4px |\n| `$2` | 8px |\n| `$3` | 12px |\n| `$4` | 16px |\n| `$6` | 24px |\n| `$8` | 32px |\n\n### Color Tokens\n\n```tsx\n\u002F\u002F CORRECT - Semantic tokens\n\u003CText color=\"$textPrimary\" \u002F>\n\u003CBox backgroundColor=\"$backgroundSecondary\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded colors\n\u003CText color=\"#333333\" \u002F>\n\u003CBox backgroundColor=\"rgb(245, 245, 245)\" \u002F>\n```\n\n| Semantic Token | Use For |\n|----------------|---------|\n| `$textPrimary` | Main text |\n| `$textSecondary` | Supporting text |\n| `$textTertiary` | Disabled\u002Fhint text |\n| `$primary500` | Brand\u002Faccent color |\n| `$statusError` | Error states |\n| `$statusSuccess` | Success states |\n\n### Typography Tokens\n\n```tsx\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\" \u002F>\n```\n\n| Token | Size |\n|-------|------|\n| `$xs` | 12px |\n| `$sm` | 14px |\n| `$md` | 16px |\n| `$lg` | 18px |\n| `$xl` | 20px |\n| `$2xl` | 24px |\n\n## Core Components\n\n### Box\n\nBase layout component with token support:\n\n```tsx\n\u003CBox\n  padding=\"$4\"\n  backgroundColor=\"$backgroundPrimary\"\n  borderRadius=\"$lg\"\n>\n  {children}\n\u003C\u002FBox>\n```\n\n### HStack \u002F VStack\n\nHorizontal and vertical flex layouts:\n\n```tsx\n\u003CHStack gap=\"$3\" alignItems=\"center\">\n  \u003CIcon name=\"user\" \u002F>\n  \u003CText>Username\u003C\u002FText>\n\u003C\u002FHStack>\n\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CHeading>Title\u003C\u002FHeading>\n  \u003CText>Content\u003C\u002FText>\n\u003C\u002FVStack>\n```\n\n### Text\n\nTypography with token support:\n\n```tsx\n\u003CText\n  fontSize=\"$lg\"\n  fontWeight=\"$semibold\"\n  color=\"$textPrimary\"\n>\n  Hello World\n\u003C\u002FText>\n```\n\n### Button\n\nInteractive button with variants:\n\n```tsx\n\u003CButton\n  onPress={handlePress}\n  variant=\"solid\"\n  size=\"md\"\n  isLoading={loading}\n  isDisabled={disabled}\n>\n  Click Me\n\u003C\u002FButton>\n```\n\n| Variant | Use For |\n|---------|---------|\n| `solid` | Primary actions |\n| `outline` | Secondary actions |\n| `ghost` | Tertiary\u002Fsubtle actions |\n| `link` | Inline actions |\n\n### Input\n\nForm input with validation:\n\n```tsx\n\u003CInput\n  value={value}\n  onChangeText={setValue}\n  placeholder=\"Enter text\"\n  error={touched ? errors.field : undefined}\n  label=\"Field Name\"\n\u002F>\n```\n\n### Card\n\nContent container:\n\n```tsx\n\u003CCard padding=\"$4\" gap=\"$3\">\n  \u003CCardHeader>\n    \u003CHeading size=\"sm\">Card Title\u003C\u002FHeading>\n  \u003C\u002FCardHeader>\n  \u003CCardBody>\n    \u003CText>Card content\u003C\u002FText>\n  \u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n## Layout Patterns\n\n### Screen Layout\n\n```tsx\nconst MyScreen = () => (\n  \u003CScreen>\n    \u003CScreenHeader title=\"Page Title\" \u002F>\n    \u003CScreenContent padding=\"$4\">\n      {\u002F* Content *\u002F}\n    \u003C\u002FScreenContent>\n  \u003C\u002FScreen>\n);\n```\n\n### Form Layout\n\n```tsx\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CInput label=\"Name\" {...nameProps} \u002F>\n  \u003CInput label=\"Email\" {...emailProps} \u002F>\n  \u003CButton isLoading={loading}>Submit\u003C\u002FButton>\n\u003C\u002FVStack>\n```\n\n### List Item Layout\n\n```tsx\n\u003CHStack\n  padding=\"$4\"\n  gap=\"$3\"\n  alignItems=\"center\"\n  borderBottomWidth={1}\n  borderColor=\"$borderLight\"\n>\n  \u003CAvatar source={{ uri: imageUrl }} size=\"md\" \u002F>\n  \u003CVStack flex={1}>\n    \u003CText fontWeight=\"$semibold\">{title}\u003C\u002FText>\n    \u003CText color=\"$textSecondary\" fontSize=\"$sm\">{subtitle}\u003C\u002FText>\n  \u003C\u002FVStack>\n  \u003CIcon name=\"chevron-right\" color=\"$textTertiary\" \u002F>\n\u003C\u002FHStack>\n```\n\n## Anti-Patterns\n\n```tsx\n\u002F\u002F WRONG - Hard-coded values\n\u003CView style={{ padding: 16, backgroundColor: '#fff' }}>\n\n\u002F\u002F CORRECT - Design tokens\n\u003CBox padding=\"$4\" backgroundColor=\"$backgroundPrimary\">\n\n\n\u002F\u002F WRONG - Raw platform components\nimport { View, Text } from 'react-native';\n\n\u002F\u002F CORRECT - Core components\nimport { Box, Text } from 'components\u002Fcore';\n\n\n\u002F\u002F WRONG - Inline styles\n\u003CText style={{ fontSize: 18, fontWeight: '600' }}>\n\n\u002F\u002F CORRECT - Token props\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\">\n```\n\n## Component Props Pattern\n\nWhen creating components, use token-based props:\n\n```tsx\ninterface CardProps {\n  padding?: '$2' | '$4' | '$6';\n  variant?: 'elevated' | 'outlined' | 'filled';\n  children: React.ReactNode;\n}\n\nconst Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (\n  \u003CBox\n    padding={padding}\n    backgroundColor=\"$backgroundPrimary\"\n    borderRadius=\"$lg\"\n    {...variantStyles[variant]}\n  >\n    {children}\n  \u003C\u002FBox>\n);\n```\n\n## Integration with Other Skills\n\n- **react-ui-patterns**: Use core components for UI states\n- **testing-patterns**: Mock core components in tests\n- **storybook**: Document component variants\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fchriswiles\u002Fcore-components",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill core-components",{"tool":64,"command":65},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill core-components",{"tool":67,"command":68},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill core-components","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fchriswiles\u002Fcore-components\u002FSKILL.md",true,[72],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"skill-report.json","REFERENCE","参考文档",13823,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fchriswiles\u002Fcore-components\u002Fskill-report.json",[79,91,101,110,116,123],{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":44},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[88,89,90],"model","model hierarchy","model hierarchy skill",{"skillNo":92,"name":93,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":97,"publishedAt":44},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[96],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[98,99,100],"MCP","zoom","zoom mcp",{"skillNo":102,"name":103,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":44},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[107,108,109,99],"sdk","zoom apps sdk","apps",{"skillNo":111,"name":112,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":44},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[112],{"skillNo":117,"name":118,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":122,"publishedAt":44},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[121],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[118],{"skillNo":124,"name":125,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":44},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[125]]