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.
Core Components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Dokhacgiakhoa
Updated Core Components by Dokhacgiakhoa · 8aa2e2d
npx skillmds@latest add dokhacgiakhoa/core-components File contents
---name: core-componentsdescription: Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.---
# 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)
Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI/tree/main/.agent/skills/core-components commit 8aa2e2d0ae
Frequently asked questions
Run npx skillmds@latest add dokhacgiakhoa/core-components in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library. It is listed under Design & Media on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Dokhacgiakhoa (@dokhacgiakhoa) published this skill. Their other Agent Skills are listed on their SkillMD profile.