# core-components

A Claude skill that keeps the agent on your own component library and design tokens instead of raw platform primitives.

- skill · `type=skill` · Claude Code · 66 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/core-components
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/core-components

## What it does

The skill sets rules for building UI. The agent imports `Box`, `Text`, `HStack`, `VStack`, `Button`, `Input` and `Card` from `components/core` rather than pulling `View` and `Text` straight from `react-native`. Spacing, colour and type scale come from tokens: `$4` in place of `16`, `$textPrimary` in place of `#333333`.

Inside are token tables and ready layouts for a screen, a form and a list row. An anti-patterns section spells out what counts as a mistake: inline styles, literal colour values, direct platform imports. Component props get the same treatment — the skill suggests typing them against tokens, as in `padding?: '$2' | '$4' | '$6'`.

It assumes your project already has a library reachable at `components/core` with tokens named this way. Point it at a codebase that uses different names or plain CSS and the tables stop matching, so the agent will reference components that do not exist.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/core-components
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill core-components -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/core-components/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/core-components/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/core-components/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/core-components/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates core-components
```

2. **Manually: put the files in place**
- File: `.github/skills/core-components/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/core-components
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/core-components/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/core-components

## When to use it
- swap hard-coded spacing and colours for design tokens
- move a screen off raw `View` and `Text` onto library components
- build a form from `Input` and `Button` with one layout
- type component props against token values
- catch inline styles and other anti-patterns in markup

## Example prompts
- Build the profile screen with `Box` and `VStack`, spacing from tokens only
- Rewrite this component without inline styles or hard-coded colours
- Make a list row with an avatar and subtitle using the skill's layout

## Similar
- [building-components](https://affpapa.org/en/nevibecode/skills/building-components.md) — skill · 14700 installs
- [interaction-patterns-components](https://affpapa.org/en/nevibecode/skills/interaction-patterns-components.md) — skill · 539 installs
- [Open Components](https://affpapa.org/en/nevibecode/mcp/open-components.md) — MCP server · ★ 11
- [design-system-creation](https://affpapa.org/en/nevibecode/skills/design-system-creation.md) — skill · 537 installs
- [design-code](https://affpapa.org/en/nevibecode/skills/design-code.md) — skill · 525 installs
- [connect-figma-components](https://affpapa.org/en/nevibecode/commands/connect-figma-components.md) — command · ★ 7604

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 361 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md