Are the included design presets accessible?

Yes, all presets are built with accessibility-first principles, ensuring WCAG AA/AAA contrast ratios and readable typography scales.

Can I use this skill with an existing project?

Yes, the Design Preset System is designed to work with refactoring workflows to analyze your current UI and map styles to a chosen preset.

Which frameworks are supported by these presets?

The system provides native support for React Native styling and Next.js environments, specifically optimized for Tailwind CSS integration.

Can I mix elements from different presets?

While the system allows for hybrid token mapping, it is generally recommended to stick to one preset to maintain visual cohesion and consistent user experience.

Modular UI Design Presets

Name: Modular UI Design Presets
Author: apexscaleai

byapexscaleai

•

디자인 도구

Applies curated design systems and tokens to React Native and Next.js applications using pre-configured aesthetic presets.

The Design Preset System is a specialized Claude Code skill that enables developers to rapidly implement or switch between diverse design aesthetics—ranging from professional minimalism to experimental brutalism. By providing a comprehensive system of tokens for colors, typography, and spacing, it ensures visual consistency and accessibility across React Native and Next.js projects. Whether starting a greenfield project or refactoring an existing application, this skill automates the application of design philosophies like Glassmorphism, Neumorphism, and Bold Brutalism while maintaining production-grade quality and WCAG compliance.

주요 기능

01Built-in accessibility guidelines and contrast-checked color palettes

024 GitHub stars

03Six distinct pre-configured design themes including Minimalist, Glass, and Brutalist styles

04Smart switching logic to migrate existing applications between design systems

05Automated token mapping for consistent colors, typography, and spacing scales

06Support for both React Native StyleSheet and Next.js Tailwind CSS configurations

사용 사례

01Rapidly prototyping multiple design directions for stakeholders using pre-built aesthetics

02Establishing a professional-grade design foundation for cross-platform mobile and web apps

03Modernizing legacy UI by refactoring components to a new, consistent design language

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add apexscaleai/claude-ui-design-system design-preset-system

For use in Claude.ai and ChatGPT

Download Skill