[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6G2YN4XR64A8Z3YC113HAD2":3,"skill-same:01M6G2YN4XR64A8Z3YC113HAD2":74},{"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":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":14,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":57,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6G2YN4XR64A8Z3YC113HAD2","core-components",null,"Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.","reikiplanet\u002Fdaoskills","reikiplanet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96377599?v=4","01M6CVWCMD740YHQDK7E9QYBW4","Reiki Planet","01M6CVWCS4KXVA2CWFVJ43EAXK",0,"MIT","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fdevelopment\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,44,45],"components","core components","core","design system","component","component library","library","ui","design","system","use","design tokens","community","design system patterns","patterns","tokens","with","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.\"\nrisk: unknown\nsource: community\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\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\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\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":5,"risk":51,"source":41,"description":7},"unknown","master","dff58085da947e81e8418c922055644bf0082b1b","skills\u002Fdevelopment\u002Fcore-components","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills","https:\u002F\u002Fgithub.com\u002Freikiplanet","https:\u002F\u002Fwww.reiki-planet.com","Reiki Planet Game","2026-03-29 06:02:29",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add reikiplanet\u002Fdaoskills --skill core-components",{"tool":66,"command":67},"bunx","bunx skills add reikiplanet\u002Fdaoskills --skill core-components",{"tool":69,"command":70},"pnpm","pnpm dlx skills add reikiplanet\u002Fdaoskills --skill core-components","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fdevelopment\u002Fcore-components\u002FSKILL.md",true,[],[75,101,113,127,145,168],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":46},"01M6G614JTEQJHPT8AKK3YQ18S","web-games","Web browser game development principles. Framework selection, WebGPU, optimization, PWA.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fweb-games\u002FSKILL.md",[],[82,83,84,85,86,87,41,88,89,90,91,92,93,94,95,96,97,98,99,100],"games","web games","web","grep","principles","selection","framework selection","edit","write","read","pwa","game","web browser","game development","Optimization","framework","browser","development","webgpu",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":46},"01M6G611H2YGV0GZFP90D38ZMJ","vr-ar","VR\u002FAR development principles. Comfort, interaction, performance requirements.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fvr-ar\u002FSKILL.md",[],[108,109,99,110,111,41,89,90,91,85,112,86],"ar","vr ar","interaction","requirements","performance",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":46},"01M6G60XNMHAMV1SV0EJ1CX0AY","templates","Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Ftemplates\u002FSKILL.md",[],[115,120,121,122,123,124,41,39,91,125,126,85],"project scaffolding","From Scratch","tech","project","scaffolding","projects","applications",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"publishedAt":46},"01M6G60T0GATMK3Q5H8GDC1Z8S","wcag-audit-patterns","Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fwcag-audit-patterns\u002FSKILL.md",[],[134,135,43,136,137,41,138,45,139,140,39,141,142,143,144],"wcag audit patterns","wcag audit","WCAG","audit","manual","automated testing","guidance","remediation","verification","accessibility","testing",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":151,"publishedAt":46},"01M6G60PMCHW1FRZ63F931QK3R","vulnerability-scanner","Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fvulnerability-scanner\u002FSKILL.md",[],[152,153,154,155,156,157,158,159,41,91,85,160,86,161,162,163,164,165,166,167],"scanner","vulnerability scanner","vulnerability","prioritization","2025","mapping","chain","supply chain","Bash","analysis","risk","owasp","supply chain security","security","supply","advanced",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":174,"publishedAt":46},"01M6G60JZBB8DK0W3DSG1WNMZK","threat-modeling-expert","Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement extraction. Use for security architecture r...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fthreat-modeling-expert\u002FSKILL.md",[],[175,176,177,178,179,180,181,182,165,39,183,184,185,41,186,187,188,162,189,190],"modeling","threat modeling expert","threat modeling","expert","threat","risk assessment","architecture review","architecture","security architecture review","trees","security architecture","security requirement extraction","assessment","extraction","review","stride"]