Does it support different component states?

Yes, core components like Button and Input include built-in support for loading, disabled, and error states, ensuring a consistent user experience.

What layout utilities are provided?

It includes Box for general containers, and HStack and VStack for horizontal and vertical flex layouts with built-in gap support.

How does this skill handle styling consistency?

The skill enforces a token-based system for spacing, colors, and typography, ensuring that developers use semantic names instead of hard-coded pixel or hex values.

Is this skill compatible with React Native?

Yes, the component patterns and props like onPress and onChangeText are specifically designed for React and React Native environments.

Can I use standard View and Text components?

This skill discourages raw platform components in favor of core library components like Box and Text to ensure global styles and token support are applied.

Core Design Components

Name: Core Design Components
Author: claudiodearaujo

byclaudiodearaujo

0•

Herramientas de Diseño

Enforces design system consistency by providing standardized UI components and semantic design tokens for building production-grade interfaces.

The Core Components skill is a comprehensive design system framework for Claude Code, designed to streamline frontend development through standardized patterns. It provides a robust library of layout primitives like Box and Stacks, alongside essential UI elements such as Buttons, Inputs, and Cards. By strictly enforcing the use of semantic design tokens for spacing, typography, and color, it eliminates hard-coded values and ensures visual harmony across applications. This skill is particularly useful for teams building React or React Native applications who need to maintain strict adherence to a centralized design language while accelerating UI construction.

Características Principales

01A comprehensive suite of core UI components including Buttons, Inputs, and Cards.

02Layout primitives including Box, HStack, and VStack for flexible flexbox-based UI.

03Standardized design tokens for spacing, colors, and typography to eliminate hard-coding.

04Integrated anti-pattern detection to prevent the use of raw platform components and inline styles.

05Predefined layout patterns for rapid construction of screens, forms, and list items.

060 GitHub stars

Casos de Uso

01Building consistent user interfaces that strictly adhere to a predefined design system.

02Onboarding new developers by providing guided patterns for layout and component usage.

03Refactoring legacy codebases to replace hard-coded styles with scalable design tokens.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter core-components

For use in Claude.ai and ChatGPT

Download Skill