How does this skill handle layout?

It utilizes layout primitives like Box, HStack (horizontal stack), and VStack (vertical stack) which support tokenized props for spacing, alignment, and padding.

What are design tokens in this skill?

Design tokens are semantic variables (such as $primary500 or $4) that replace hard-coded values for spacing, color, and typography to ensure visual consistency across the entire application.

Does this skill work with React Native?

Yes, the skill is specifically designed for React-based environments including React Native, emphasizing core components like Box and Text over raw platform views.

Can it help with form building?

Absolutely. It includes standardized Input and Button components along with recommended layout patterns for creating accessible and consistent form interfaces.

Why avoid raw platform components?

Using raw components like View or Text leads to fragmented styles and maintenance debt. Core components ensure every element follows the central design system automatically.

Core UI Components & Design System

Name: Core UI Components & Design System
Author: claudiodearaujo

byclaudiodearaujo

0•

设计工具

Standardizes UI development using a tokenized design system and a library of pre-built core components for consistent application styling.

This skill empowers Claude to build high-quality, consistent user interfaces by enforcing the use of a proprietary core component library and design system. It prevents the use of hard-coded values and raw platform components by providing a robust set of design tokens for spacing, typography, and color, alongside layout primitives like Box and Stack. It is particularly useful for maintaining visual integrity across complex React or React Native projects while accelerating frontend development through standardized, reusable patterns.

主要功能

01Includes high-level interactive components like themed Buttons, Inputs, and Cards.

02Standardizes screen and form layout patterns for a unified user experience.

03Enforces design tokens for spacing, colors, and typography to eliminate hard-coded values.

040 GitHub stars

05Identifies and corrects anti-patterns such as inline styling and raw platform component usage.

06Provides layout primitives like Box, HStack, and VStack for flexible, consistent positioning.

使用场景

01Refactoring legacy code to replace hard-coded styles with semantic design tokens.

02Creating consistent form layouts and list items across mobile or web applications.

03Building production-grade UI screens that adhere strictly to an organization's design system.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter core-components

For use in Claude.ai and ChatGPT

主要功能

01Includes high-level interactive components like themed Buttons, Inputs, and Cards.

02Standardizes screen and form layout patterns for a unified user experience.

03Enforces design tokens for spacing, colors, and typography to eliminate hard-coded values.

040 GitHub stars

05Identifies and corrects anti-patterns such as inline styling and raw platform component usage.

06Provides layout primitives like Box, HStack, and VStack for flexible, consistent positioning.

使用场景

01Refactoring legacy code to replace hard-coded styles with semantic design tokens.

02Creating consistent form layouts and list items across mobile or web applications.

03Building production-grade UI screens that adhere strictly to an organization's design system.