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

Design Tools

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

About

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.

Key Features

0 GitHub stars
Interactive component patterns for Buttons, Inputs, and Cards
Anti-pattern detection to prevent hard-coded styles and raw components
Pre-defined semantic color scales and typography tokens
Design token enforcement for spacing, colors, and typography
Standardized layout primitives including HStack, VStack, and Box

Use Cases

Standardizing form layouts and interactive component implementation
Refactoring legacy code to use scalable design tokens
Building 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

Download Skill

GitHub