# Core Components

> Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

- Skill: `dokhacgiakhoa/core-components` (Agent Skill, multi-file: 13 files)
- Install (CLI): `npx skillmds@latest add dokhacgiakhoa/core-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dokhacgiakhoa/core-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Dokhacgiakhoa (https://skillmd.com/u/dokhacgiakhoa)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/dokhacgiakhoa/core-components

---


# Core Components

## Design System Overview

Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.

## Design Tokens

**NEVER hard-code values. Always use design tokens.**

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [Spacing Tokens](./sub-skills/spacing-tokens.md)
### 2. [Color Tokens](./sub-skills/color-tokens.md)
### 3. [Typography Tokens](./sub-skills/typography-tokens.md)
### 4. [Box](./sub-skills/box.md)
### 5. [HStack / VStack](./sub-skills/hstack-vstack.md)
### 6. [Text](./sub-skills/text.md)
### 7. [Button](./sub-skills/button.md)
### 8. [Input](./sub-skills/input.md)
### 9. [Card](./sub-skills/card.md)
### 10. [Screen Layout](./sub-skills/screen-layout.md)
### 11. [Form Layout](./sub-skills/form-layout.md)
### 12. [List Item Layout](./sub-skills/list-item-layout.md)