Skip to main content
affpapa.org
RU EN
skill

core-components — Claude Code skill: design tokens and UI

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

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/core-components
Open on GitHub

What core-components 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.

What it helps with

  • 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 for the agent

  • 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

How to install core-components

1claude-code-templates

npx claude-code-templates@latest --skill development/core-components

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill core-components -a claude-code

3Manually: put the files in place

~/.claude/skills/core-components/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/core-components/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about core-components

How do I install core-components in Claude Code?

Run npx claude-code-templates@latest --skill development/core-components. Or use npx skills add davila7/claude-code-templates --skill core-components -a claude-code. The skill then sits at ~/.claude/skills/core-components/SKILL.md.

What does the core-components skill do?

It tells the agent to build UI from your library and to set sizes, colours and fonts through tokens. It also ships layouts for a screen, a form and a list row.

Does it work with other skills?

It points to react-ui-patterns for UI states, testing-patterns for mocking components and storybook for documenting variants.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set361

The whole set →
deployment A Claude skill that lets the agent run Railway deployment tasks: read logs, restart, redeploy, take a deploy down. Handy when a service crashes or you need deploy history. 69installs seoagent Runs SEO work inside your repo: audits, keyword clusters, briefs and article drafts land in .seoagent/, so each session picks up where the last one stopped. 69installs gws-cloudidentity A slash command that sends Google Cloud Identity calls through the gws CLI: groups, memberships, devices, SSO profiles. Useful when admin work starts in the chat. 68installs gws-people A Claude Code slash command that drives Google Workspace contacts and profiles through the gws CLI: create, search, update and delete records. 67installs cc-skill-coding-standards A skill that hands Claude a fixed set of rules for TypeScript, JavaScript, React and Node.js work: naming, immutability, errors, API shape. 66installs cover-letter-generator Turns a resume and a job posting into a cover letter: a real opening hook, your experience mapped to their requirements, gaps handled head-on. Useful when the application goes out today. 64installs mlops-mlflow A skill that gives Claude working instructions for MLflow: logging runs, versioning models in the registry, and reproducing experiments. 64installs gws-workflow A Claude slash command that runs Google Workspace CLI operations: standup reports, meeting prep, email triage. 64installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor