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.

主な機能

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

ユースケース

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

概要

主な機能

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

ユースケース

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