{"id":"ccdf7383-0e8b-4fc8-a6c3-0ebadce81142","shortId":"8rQbr4","kind":"skill","title":"core-components","tagline":"Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.","description":"# 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// CORRECT - Use tokens\n<Box padding=\"$4\" marginBottom=\"$2\" />\n\n// WRONG - Hard-coded values\n<Box padding={16} marginBottom={8} />\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// CORRECT - Semantic tokens\n<Text color=\"$textPrimary\" />\n<Box backgroundColor=\"$backgroundSecondary\" />\n\n// WRONG - Hard-coded colors\n<Text color=\"#333333\" />\n<Box backgroundColor=\"rgb(245, 245, 245)\" />\n```\n\n| Semantic Token | Use For |\n|----------------|---------|\n| `$textPrimary` | Main text |\n| `$textSecondary` | Supporting text |\n| `$textTertiary` | Disabled/hint text |\n| `$primary500` | Brand/accent color |\n| `$statusError` | Error states |\n| `$statusSuccess` | Success states |\n\n### Typography Tokens\n\n```tsx\n<Text fontSize=\"$lg\" fontWeight=\"$semibold\" />\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<Box\n  padding=\"$4\"\n  backgroundColor=\"$backgroundPrimary\"\n  borderRadius=\"$lg\"\n>\n  {children}\n</Box>\n```\n\n### HStack / VStack\n\nHorizontal and vertical flex layouts:\n\n```tsx\n<HStack gap=\"$3\" alignItems=\"center\">\n  <Icon name=\"user\" />\n  <Text>Username</Text>\n</HStack>\n\n<VStack gap=\"$4\" padding=\"$4\">\n  <Heading>Title</Heading>\n  <Text>Content</Text>\n</VStack>\n```\n\n### Text\n\nTypography with token support:\n\n```tsx\n<Text\n  fontSize=\"$lg\"\n  fontWeight=\"$semibold\"\n  color=\"$textPrimary\"\n>\n  Hello World\n</Text>\n```\n\n### Button\n\nInteractive button with variants:\n\n```tsx\n<Button\n  onPress={handlePress}\n  variant=\"solid\"\n  size=\"md\"\n  isLoading={loading}\n  isDisabled={disabled}\n>\n  Click Me\n</Button>\n```\n\n| Variant | Use For |\n|---------|---------|\n| `solid` | Primary actions |\n| `outline` | Secondary actions |\n| `ghost` | Tertiary/subtle actions |\n| `link` | Inline actions |\n\n### Input\n\nForm input with validation:\n\n```tsx\n<Input\n  value={value}\n  onChangeText={setValue}\n  placeholder=\"Enter text\"\n  error={touched ? errors.field : undefined}\n  label=\"Field Name\"\n/>\n```\n\n### Card\n\nContent container:\n\n```tsx\n<Card padding=\"$4\" gap=\"$3\">\n  <CardHeader>\n    <Heading size=\"sm\">Card Title</Heading>\n  </CardHeader>\n  <CardBody>\n    <Text>Card content</Text>\n  </CardBody>\n</Card>\n```\n\n## Layout Patterns\n\n### Screen Layout\n\n```tsx\nconst MyScreen = () => (\n  <Screen>\n    <ScreenHeader title=\"Page Title\" />\n    <ScreenContent padding=\"$4\">\n      {/* Content */}\n    </ScreenContent>\n  </Screen>\n);\n```\n\n### Form Layout\n\n```tsx\n<VStack gap=\"$4\" padding=\"$4\">\n  <Input label=\"Name\" {...nameProps} />\n  <Input label=\"Email\" {...emailProps} />\n  <Button isLoading={loading}>Submit</Button>\n</VStack>\n```\n\n### List Item Layout\n\n```tsx\n<HStack\n  padding=\"$4\"\n  gap=\"$3\"\n  alignItems=\"center\"\n  borderBottomWidth={1}\n  borderColor=\"$borderLight\"\n>\n  <Avatar source={{ uri: imageUrl }} size=\"md\" />\n  <VStack flex={1}>\n    <Text fontWeight=\"$semibold\">{title}</Text>\n    <Text color=\"$textSecondary\" fontSize=\"$sm\">{subtitle}</Text>\n  </VStack>\n  <Icon name=\"chevron-right\" color=\"$textTertiary\" />\n</HStack>\n```\n\n## Anti-Patterns\n\n```tsx\n// WRONG - Hard-coded values\n<View style={{ padding: 16, backgroundColor: '#fff' }}>\n\n// CORRECT - Design tokens\n<Box padding=\"$4\" backgroundColor=\"$backgroundPrimary\">\n\n\n// WRONG - Raw platform components\nimport { View, Text } from 'react-native';\n\n// CORRECT - Core components\nimport { Box, Text } from 'components/core';\n\n\n// WRONG - Inline styles\n<Text style={{ fontSize: 18, fontWeight: '600' }}>\n\n// CORRECT - Token props\n<Text 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  <Box\n    padding={padding}\n    backgroundColor=\"$backgroundPrimary\"\n    borderRadius=\"$lg\"\n    {...variantStyles[variant]}\n  >\n    {children}\n  </Box>\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.","tags":["core","components","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-core-components","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/core-components","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34831 github stars · SKILL.md body (5,037 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T06:50:58.723Z","embedding":null,"createdAt":"2026-04-18T21:35:18.565Z","updatedAt":"2026-04-24T06:50:58.723Z","lastSeenAt":"2026-04-24T06:50:58.723Z","tsv":"'1':75,265,276 '12px':80,126 '14px':128 '16':70,291 '16px':82,130 '18':322 '18px':132 '2':77,343 '20px':134 '24px':84,136 '2xl':135 '3':79,261 '32px':86 '4':81,259,344,355 '4px':76 '6':83,345 '600':324 '8':72,85 '8px':78 'action':191,194,197,200,408 'alignitem':262 'alway':53 'anti':280 'anti-pattern':279 'applic':402 'ask':446 'avatar':268 'backgroundcolor':292,363 'backgroundprimari':364 'base':140,337 'behavior':45 'borderbottomwidth':264 'bordercolor':266 'borderlight':267 'borderradius':365 'boundari':454 'box':68,139,312,360 'brand/accent':112 'build':13 'button':167,169,173,249 'card':222,226,228,353 'cardprop':341,359 'center':263 'children':147,350,358,369 'clarif':448 'clear':421 'click':184 'code':51,66,96,286 'color':87,97,113 'compon':3,5,22,25,30,39,138,142,300,310,328,333,380,389,394 'components/core':315 'consist':42 'const':235,352 'contain':224 'content':158,223,229,237 'core':2,4,24,33,137,309,379,388 'core-compon':1 'correct':60,90,294,308,325 'creat':332 'criteria':457 'describ':409,425 'design':8,16,26,46,55,295 'disabl':183 'disabled/hint':109 'document':393 'elev':347,357 'email':247 'emailprop':248 'ensur':41 'enter':213 'environ':437 'environment-specif':436 'error':115,215 'errors.field':217 'execut':404 'expert':442 'fff':293 'field':220 'fill':349 'flex':153,275 'fontsiz':321 'fontweight':323 'form':202,238 'gap':260 'ghost':195 'handlepress':175 'hard':50,65,95,285 'hard-cod':49,64,94,284 'hello':165 'horizont':150 'hstack':148,257 'imageurl':271 'import':301,311 'inlin':199,317 'input':201,203,207,241,245,451 'instead':35 'integr':370 'interact':168 'interfac':340 'isdis':182 'isload':180,250 'item':254 'label':219,242,246 'layout':141,154,230,233,239,255 'lg':131,366 'librari':6,23,34 'limit':413 'link':198 'list':253 'load':181,251 'main':103 'marginbottom':71 'match':422 'md':129,179,273 'miss':459 'mock':387 'myscreen':236 'name':221,243 'nameprop':244 'nativ':307 'never':48 'onchangetext':210 'onpress':174 'outlin':192,348 'output':431 'overview':28,412 'pad':69,258,290,342,354,361,362 'pattern':10,231,281,330,377,386 'permiss':452 'placehold':212 'platform':38,299 'primari':190 'primary500':111 'prop':327,329,338 'raw':37,298 'react':306,375 'react-nat':305 'react-ui-pattern':374 'react.reactnode':351 'requir':450 'review':443 'safeti':453 'scope':424 'screen':232 'secondari':193 'semant':91,98 'setvalu':211 'size':124,178,272 'skill':373,400,416 'skill-core-components' 'sm':127 'solid':177,189 'sourc':269 'source-sickn33' 'space':57 'specif':438 'state':116,119,383 'statuserror':114 'statussuccess':117 'stop':444 'storybook':392 'style':43,289,318,320 'submit':252 'substitut':434 'subtitl':278 'success':118,456 'support':106,145,163 'system':9,27 'task':420 'tertiary/subtle':196 'test':385,391,440 'testing-pattern':384 'text':104,107,110,159,214,303,313,319 'textprimari':102 'textsecondari':105 'texttertiari':108 'titl':157,227,277 'token':17,47,56,58,62,73,88,92,99,121,123,144,162,296,326,336 'token-bas':335 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touch':216 'treat':429 'tsx':59,89,122,146,155,164,172,206,225,234,240,256,282,339 'typographi':120,160 'ui':14,376,382 'undefin':218 'uri':270 'use':11,15,29,54,61,100,187,334,378,398,414 'usernam':156 'valid':205,439 'valu':52,67,74,208,209,287 'variant':171,176,186,346,356,368,395 'variantstyl':367 'vertic':152 'view':288,302 'vstack':149,274 'work':19 'workflow':406 'world':166 'wrong':63,93,283,297,316 'xl':133 'xs':125","prices":[{"id":"f33c3176-ac69-4338-bffd-2fb7cac472b5","listingId":"ccdf7383-0e8b-4fc8-a6c3-0ebadce81142","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:35:18.565Z"}],"sources":[{"listingId":"ccdf7383-0e8b-4fc8-a6c3-0ebadce81142","source":"github","sourceId":"sickn33/antigravity-awesome-skills/core-components","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/core-components","isPrimary":false,"firstSeenAt":"2026-04-18T21:35:18.565Z","lastSeenAt":"2026-04-24T06:50:58.723Z"}],"details":{"listingId":"ccdf7383-0e8b-4fc8-a6c3-0ebadce81142","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"core-components","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34831,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"9b21b2b4b55b8173d71418644724c1bbe2dd274a","skill_md_path":"skills/core-components/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/core-components"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"core-components","description":"Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/core-components"},"updatedAt":"2026-04-24T06:50:58.723Z"}}