Does it support complex layouts?

Absolutely. It includes patterns for HStack (horizontal), VStack (vertical), and responsive Screen components to handle sophisticated UI structures with ease.

How does this improve AI-generated code quality?

It provides Claude with specific constraints and implementation patterns, ensuring the code it writes is production-ready, accessible, and perfectly aligned with your design language.

What are design tokens in this skill?

Design tokens are semantic variables for colors, spacing, and typography (e.g., $primary500, $4) that ensure visual consistency across the entire application without hard-coding hex codes or pixel values.

Can I use this with React Native projects?

Yes, the skill is highly compatible with React Native and standard React UI frameworks, providing patterns for components like Box, Text, and Screen Layouts.

Why does this skill discourage raw platform components?

Raw components like 'View' or 'div' lack the pre-configured design system logic and token support provided by core components, which can lead to styling inconsistencies and technical debt.

Core Design System Components

Name: Core Design System Components
Author: sickn33

bysickn33

•

31,721

•

デザインツール

Standardizes UI development by enforcing design system patterns, design tokens, and reusable component architectures.

This skill provides Claude with a comprehensive framework for building consistent user interfaces using a specific design system. It eliminates the risk of hard-coded values by enforcing the use of standardized spacing, color, and typography tokens, while providing implementation patterns for foundational components like Box, HStack, and Button. By integrating this skill, developers ensure that AI-generated code adheres to production-grade styling standards, maintains visual consistency across screens, and follows organizational layout best practices.

主な機能

01Pre-defined core components including Box, Text, Button, and Input

02Advanced layout patterns using HStack and VStack flex structures

0331,721 GitHub stars

04Strict enforcement of design tokens for spacing, color, and typography

05Standardized screen and form layout templates for rapid development

06Anti-pattern detection for hard-coded values and raw platform components

ユースケース

01Developing complex form layouts and list items using standardized flexbox patterns

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

03Building new application screens that require consistent branding and styling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills core-components

For use in Claude.ai and ChatGPT

主な機能

01Pre-defined core components including Box, Text, Button, and Input

02Advanced layout patterns using HStack and VStack flex structures

0331,721 GitHub stars

04Strict enforcement of design tokens for spacing, color, and typography

05Standardized screen and form layout templates for rapid development

06Anti-pattern detection for hard-coded values and raw platform components

ユースケース

01Developing complex form layouts and list items using standardized flexbox patterns

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

03Building new application screens that require consistent branding and styling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills core-components

For use in Claude.ai and ChatGPT