[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-2910e46e-aac2-49b4-9002-205b316234fa":3,"$flBvfDliH8-1iPJ1o_Qxd-iCoWNqS5yyHgzidKWqiNXg":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},"2910e46e-aac2-49b4-9002-205b316234fa","core-components","核心组件库和设计系统模式。在构建UI、使用设计令牌或与组件库协作时使用。","cat_life_career","mod_other","sickn33,other","---\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\ndate_added: \"2026-02-27\"\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\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,85,1475,"2026-05-16 13:13:27",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"0920236f-661f-4ea3-8f92-89097ef291a9","1.0.0","core-components.zip",2257,"uploads\u002Fskills\u002F2910e46e-aac2-49b4-9002-205b316234fa\u002Fcore-components.zip","9f4e84c15c1d2f7ad1d92ec0d7ff87faa6f0a93926dffe57e492b7d8afdf46b2","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5274}]",{"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]