core-components

Name: core-components
Availability: InStock
Author: twuanminn

Consolidate core UI components, tokens, and patterns into a design-system toolkit.

Updated Jan 26, 2026

Search Tags:#accessibility #frontend #react #design-tokens #ui-patterns #design-systems #component-library

Ready to run

npx skills add https://github.com/TwuanMinn/fadelab --skill core-components-twuanminn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: core-components
Source: https://github.com/TwuanMinn/fadelab/tree/main/.agent/skills/skills/core-components
Command: npx skills add https://github.com/TwuanMinn/fadelab --skill core-components-twuanminn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers struggle to achieve consistent UI without a shared design system; this skill consolidates core components, tokens, and patterns to speed up frontend work.

Core Features & Use Cases

Reusable components (Box, Text, Button, Input, Card, HStack/VStack) that enforce token-based styling.
Design tokens guidance for spacing, colors, and typography to ensure accessibility and visual consistency across apps.
Use Case: When building a new screen, adopt the core components library to quickly assemble layouts with consistent theming.

Quick Start

Install or integrate the core-components library into your project and begin composing screens with the token-enabled components.

Frequently Asked Questions about core-components

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

FAQPage Schema

How do I build consistent UI layouts with a shared design system in React?▼

You can build consistent UI layouts by adopting a core components library that supplies token-enabled elements like Box, HStack, VStack, and Card. These components enforce shared spacing, color, and typography rules automatically across your frontend project.

What are design tokens and how do they work with frontend components?▼

Design tokens are centralized variables for spacing, colors, and typography. When applied to frontend components, they translate abstract style guidelines into enforceable properties, ensuring visual consistency and accessibility across web and mobile applications.

How do I use token-based props for accessible UI components?▼

Apply token-based props by mapping component attributes directly to predefined design tokens rather than hard-coded values. This ensures that UI components like Button, Input, and Text inherit compliant color contrast and scalable typography for accessibility.

Can I use this component library for both web and mobile apps?▼

Yes, the consolidated component library applies to frontend projects requiring consistent layouts across web and mobile apps. The included UI patterns and design tokens support multi-platform theming without altering the underlying component structure.

What is the best way to standardize spacing and typography across an application?▼

The best way to standardize spacing and typography is to implement a design-system-driven toolkit using predefined design tokens. Consolidating core components like Box and Text ensures all layouts adhere to the same visual structure.

Do I need a pre-existing design system to integrate these UI patterns?▼

No, you do not need a pre-existing design system. The toolkit consolidates core UI components, tokens, and patterns internally, allowing you to install it directly and begin composing screens with consistent theming immediately.