Does this skill help with form development?

Yes, it provides standardized patterns for Input components, including error state handling, labels, and validation layout structures.

What are design tokens in this skill?

Design tokens are named variables (like $4 or $textPrimary) that represent specific design values, ensuring you never have to hard-code pixel values or hex codes.

Can this skill be used for mobile development?

Absolutely. The patterns provided are optimized for React Native and modern web frameworks that utilize component-based design systems.

How do layout components like HStack and VStack work?

These are flexbox-based primitives used to align elements horizontally or vertically with built-in support for token-based gaps and alignment props.

Why should I avoid raw platform components?

Using core components like Box and Text instead of raw View or Text components ensures that all UI elements automatically inherit the correct design tokens and theme settings.

Core UI Components & Design System

Name: Core UI Components & Design System
Author: claudiodearaujo

byclaudiodearaujo

0•

设计工具

Enforces design system consistency by providing standardized UI components and tokenized styling patterns for frontend development.

The core-components skill acts as a comprehensive blueprint for building high-quality, consistent user interfaces within a structured design ecosystem. It provides technical guidance on utilizing layout primitives like Box and Stack, interactive elements such as Buttons and Inputs, and strictly enforces the use of design tokens for spacing, color, and typography. By steering developers away from raw platform components and hard-coded values, this skill ensures that all UI work remains scalable, maintainable, and visually aligned with the project's established design language.

主要功能

010 GitHub stars

02Interactive component patterns for Buttons, Inputs, and Cards

03Anti-pattern detection to prevent hard-coded styles and raw components

04Pre-defined semantic color scales and typography tokens

05Design token enforcement for spacing, colors, and typography

06Standardized layout primitives including HStack, VStack, and Box

使用场景

01Standardizing form layouts and interactive component implementation

02Refactoring legacy code to use scalable design tokens

03Building production-ready UI screens with design system compliance

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

主要功能

010 GitHub stars

02Interactive component patterns for Buttons, Inputs, and Cards

03Anti-pattern detection to prevent hard-coded styles and raw components

04Pre-defined semantic color scales and typography tokens

05Design token enforcement for spacing, colors, and typography

06Standardized layout primitives including HStack, VStack, and Box

使用场景

01Standardizing form layouts and interactive component implementation

02Refactoring legacy code to use scalable design tokens

03Building production-ready UI screens with design system compliance

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