Can I use raw platform components with this skill?

The skill identifies raw platform components (like View or Text from react-native) as anti-patterns and recommends using core library components like Box or the design system's Text component instead.

Is this skill compatible with React Native?

Yes, the component patterns and props (like onPress and onChangeText) are specifically designed to work within React and React Native environments.

What is the primary benefit of the Core Components skill?

It ensures visual and structural consistency across an application by enforcing the use of standardized components and design tokens instead of hard-coded values.

How are design tokens used in this system?

Design tokens use a '$' prefix (e.g., $primary500, $4) to represent semantic values for colors, spacing, and typography, allowing for easy global updates to the design system.

Core Components Design System

Name: Core Components Design System
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Enforces standardized UI patterns and design tokens to ensure visual consistency and high-quality frontend development.

This skill equips Claude with a comprehensive framework for building professional interfaces using a structured design system. It provides a library of core components and semantic design tokens for spacing, typography, and colors, effectively eliminating hard-coded values and inconsistent styling. By leveraging standardized layout patterns like Box, HStack, and VStack, the skill ensures that all UI development adheres to production-grade implementation patterns, making it ideal for maintaining large-scale React and React Native projects.

Key Features

01Standardized form and list item layout patterns

02Reusable UI elements including Buttons, Inputs, and Cards

03Standardized layout components (Box, HStack, VStack, Screen)

040 GitHub stars

05Anti-pattern detection for hard-coded values and inline styles

06Semantic Design Tokens for colors, spacing, and typography

Use Cases

01Building new application screens using pre-defined design system patterns

02Creating consistent, accessible forms and interactive UI elements

03Refactoring legacy code to replace hard-coded styles with design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front core-components

For use in Claude.ai and ChatGPT

Download Skill