core-components

Provide reusable UI components and design tokens for consistent interfaces.

Updated Jan 15, 2026

Search Tags:#ui #frontend #react #design system #components #tokens

Ready to run

npx skills add https://github.com/lips85/antigravity-skills-bootstrap --skill core-components-lips85

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: core-components
Source: https://github.com/lips85/antigravity-skills-bootstrap/tree/main/skills/core-components
Command: npx skills add https://github.com/lips85/antigravity-skills-bootstrap --skill core-components-lips85

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized library of UI components and design tokens, ensuring visual consistency and efficient development across applications.

Core Features & Use Cases

Reusable Components: Utilize pre-built components like Buttons, Inputs, and Layouts.
Design Token System: Enforce consistent spacing, colors, and typography.
Use Case: When developing a new feature, use the Button component with $primary500 color tokens instead of manually styling a native button, ensuring brand alignment and reducing development time.

Quick Start

Use the core-components skill to render a Card with padding set to $4 and a Heading inside.

Frequently Asked Questions about core-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I maintain UI consistency using design tokens in React?▼

Maintain UI consistency by mapping design tokens for spacing, color, and typography directly to pre-built layout and interactive components. This enforces visual uniformity across applications and ensures brand alignment without manual styling.

What are design tokens and when do I need them for a component library?▼

Design tokens are predefined variables for spacing, color, and typography. You need them when building a component library to enforce consistent styling and visual uniformity across different UI elements and application features.

How do I build a consistent UI layout with Box, HStack, and VStack components?▼

Build consistent UI layouts by composing structural components like Box, HStack, and VStack. These layout primitives utilize predefined spacing tokens to ensure uniform alignment and arrangement of interactive elements across your application.

Can I use these pre-built components instead of manually styling native HTML elements?▼

Yes, you can use pre-built components like Button and Input instead of manually styling native elements. They automatically apply predefined color tokens like $primary500, ensuring brand alignment and reducing overall development time.

Does this design system approach work for standardizing new feature development?▼

Yes, this design system approach works for standardizing new feature development by providing a standardized library of UI components and design tokens. This ensures visual consistency and efficient development across all applications.