What are design tokens in this skill?

Design tokens are semantic variables (e.g., $textPrimary, $4) that replace hard-coded hex codes or pixel values to ensure visual consistency across the entire application.

Can I use custom layout patterns?

The skill provides foundational layout patterns like Screen, Form, and List Item layouts which can be extended using the core Box and Stack components.

Does this skill work with React Native?

Yes, the components and layout patterns are designed to work seamlessly with React and React Native, utilizing props like onPress and specialized Screen components.

How does it help with code reviews?

By defining clear anti-patterns, such as using raw platform components or inline styles, the skill helps identify and correct sub-standard UI code automatically.

Design System Core Components

Name: Design System Core Components
Author: claudiodearaujo

byclaudiodearaujo

Design Tools

Enforces design system consistency through standardized tokens, reusable UI components, and layout patterns for production-grade frontends.

About

This skill provides a comprehensive framework for building user interfaces with consistent styling and behavior using a centralized design system. It helps developers eliminate hard-coded values by enforcing the use of design tokens for spacing, color, and typography while providing a robust library of core components such as Box, Text, Button, and Input. By standardizing layout patterns and identifying common anti-patterns, it ensures that applications remain maintainable, accessible, and visually aligned with professional design standards throughout the development lifecycle.

Key Features

Prop-based styling system for rapid and consistent UI development
Standardized layout patterns for screens, forms, and list items
Strict design token enforcement for spacing, colors, and typography
Anti-pattern detection to prevent hard-coded values and raw platform components
0 GitHub stars
Library of core UI components including Box, Stack, and Interactive elements

Use Cases

Standardizing component usage across cross-platform React and React Native projects
Building new application screens that require strict adherence to brand design systems
Refactoring legacy codebases to replace inline 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

GitHub