What documentation is automatically generated?

It creates a full suite of Markdown documentation including a Design System overview, Component Guidelines, Style Guides, and Accessibility standards.

Can I use this for existing projects?

This skill is optimized for greenfield projects. For existing projects, it is recommended to use the UI Refactoring Workflow skill instead.

Which frameworks are supported?

It provides specialized support for React Native and Next.js, including deep integration with Tailwind CSS for web projects.

Does it support custom branding styles?

Yes, it includes several presets such as minimalist-modern, bold-brutalist, and glass-aesthetic that automatically configure all tokens to match a specific look and feel.

Design System Foundation

Name: Design System Foundation
Author: apexscaleai

byapexscaleai

•

デザインツール

Establishes a comprehensive UI/UX foundation with design tokens, atomic architecture, and documentation for new React Native and Next.js projects.

Design System Foundation is a specialized Claude Code skill designed to accelerate the initial setup of frontend projects by generating a production-ready UI architecture. It automatically creates semantic design tokens for colors, typography, and spacing while implementing a robust Atomic Design folder structure. Whether you are starting a mobile app with React Native or a web application with Next.js, this skill ensures consistency through automated theme providers, TypeScript integration, and comprehensive documentation scaffolding, allowing developers to focus on feature development rather than repetitive styling setup.

主な機能

01Comprehensive documentation generation including style guides and accessibility standards

02Pre-configured Theme Providers for React Native and Tailwind CSS for Next.js

03Instant application of design presets like minimalist, brutalist, and glassmorphism

04Atomic Design folder structure scaffolding for scalable component architecture

054 GitHub stars

06Automated semantic design token generation for colors, typography, and spacing

ユースケース

01Standardizing UI architecture across multiple greenfield development teams

02Setting up a Next.js project with a unified Tailwind CSS configuration based on tokens

03Bootstrapping a new React Native mobile application with a scalable theme system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill