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

•

Design Tools

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

About

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.

Key Features

Comprehensive documentation generation including style guides and accessibility standards
Pre-configured Theme Providers for React Native and Tailwind CSS for Next.js
Instant application of design presets like minimalist, brutalist, and glassmorphism
Atomic Design folder structure scaffolding for scalable component architecture
4 GitHub stars
Automated semantic design token generation for colors, typography, and spacing

Use Cases

Standardizing UI architecture across multiple greenfield development teams
Setting up a Next.js project with a unified Tailwind CSS configuration based on tokens
Bootstrapping a new React Native mobile application with a scalable theme system

About

Key Features

Comprehensive documentation generation including style guides and accessibility standards
Pre-configured Theme Providers for React Native and Tailwind CSS for Next.js
Instant application of design presets like minimalist, brutalist, and glassmorphism
Atomic Design folder structure scaffolding for scalable component architecture
4 GitHub stars
Automated semantic design token generation for colors, typography, and spacing

Use Cases

Standardizing UI architecture across multiple greenfield development teams
Setting up a Next.js project with a unified Tailwind CSS configuration based on tokens
Bootstrapping a new React Native mobile application with a scalable theme system