Why should I use this skill with Claude Code?

It ensures UI consistency and maintainability by preventing hard-coded values and enforcing your project's specific design language during the code generation process.

Does this skill work with raw platform components like View and Text?

This skill specifically discourages using raw platform components and instead promotes the use of custom core components that support the project's token system.

What are design tokens?

Tokens are semantic names (like $primary500 or $lg) that map to specific values like colors or sizes, allowing for global style updates and consistent branding.

How does this help with layout design?

It provides predefined patterns for common layouts like Screens, Forms, and List Items, ensuring that Claude uses the correct flexbox spacing and alignment every time.

Core UI Components & Design System

Name: Core UI Components & Design System
Author: claudiodearaujo

byclaudiodearaujo

Herramientas de Diseño

Standardizes frontend development by enforcing design system patterns, semantic tokens, and reusable core components for consistent UI building.

Acerca de

This skill provides a comprehensive framework for building cohesive user interfaces using a standardized design system. It guides developers in utilizing semantic design tokens for spacing, color, and typography instead of hard-coded values, while providing a library of core components like Box, Stack, and Input. By enforcing specific layout patterns and identifying common anti-patterns, this skill ensures that Claude generates production-ready, maintainable, and visually consistent code that adheres to the project's specific design language and brand guidelines.

Características Principales

Standardized UI elements like Buttons, Inputs, and Cards with variant support
Guidance on avoiding anti-patterns like hard-coded styles and raw platform components
Pre-defined layout components including Box, HStack, and VStack
Enforcement of semantic design tokens for spacing, color, and typography
Best practices for screen, form, and list item layout patterns
0 GitHub stars

Casos de Uso

Creating high-fidelity UI layouts that strictly adhere to a predefined design system and brand tokens
Building complex, responsive mobile or web forms using consistent input and button components
Refactoring legacy code to replace hard-coded styles and raw platform components with standardized design system elements

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