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

设计工具

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.

主要功能

Standardized form and list item layout patterns
Reusable UI elements including Buttons, Inputs, and Cards
Standardized layout components (Box, HStack, VStack, Screen)
0 GitHub stars
Anti-pattern detection for hard-coded values and inline styles
Semantic Design Tokens for colors, spacing, and typography

使用场景

Building new application screens using pre-defined design system patterns
Creating consistent, accessible forms and interactive UI elements
Refactoring 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

GitHub

关于