skills.rest
mojwang
mojwangCOMMUNITY
Explore all skills by this author →
𝕏@MarvinIsHimGitHub

init-design-system

Bootstrap a shadcn/ui design system with tokens and components for Next.js projects.

Updated Aug 23, 2026
Search Tags:#typography#nextjs#web-development#design-system#spacing#shadcn-ui#token-mapping
One-click install
npx skills add https://github.com/mojwang/macbook-dev-setup --skill init-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: init-design-system
Source: https://github.com/mojwang/macbook-dev-setup/tree/main/config/skills/init-design-system
Command: npx skills add https://github.com/mojwang/macbook-dev-setup --skill init-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires shadcn, and includes scripts (resource) components.

What problem does it solve?

Bootstrap a domain-specific design system for new web projects using shadcn/ui to standardize UI components and tokens.

Core Features & Use Cases

  • Initialize shadcn/ui scaffolding, map tokens to a design token system, set typography and spacing scales, and generate basic docs.
  • Provide domain variants (Healthcare, SaaS, Ecommerce) and a ready-to-use component catalog for consistent UI.

Quick Start

Run the init-design-system process on your project to bootstrap the design system and generate documentation.

Frequently Asked Questions about init-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bootstrap a design system in Next.js using shadcn/ui?▼

You can bootstrap a design system in Next.js using shadcn/ui by running deterministic scripts that initialize scaffolding, map design tokens, and set typography and spacing scales.

What is token mapping in a shadcn/ui design system?▼

Token mapping in a shadcn/ui design system is the process of linking raw UI attributes to standardized design tokens, ensuring consistent typography and spacing scales across your web application.

Can I use shadcn/ui to create domain-specific design system variants for healthcare or SaaS?▼

Yes, shadcn/ui supports domain-specific design system variants for healthcare, SaaS, and ecommerce by applying deterministic scripts to configure tailored components and token mappings.

What do I need to set up before initializing a design system with shadcn/ui?▼

Before initializing a design system with shadcn/ui, you need a Next.js-based project environment, as the process implements prerequisites detection and requires the shadcn dependency for scaffolding.

Does shadcn/ui initialization automatically generate documentation for my design system?▼

Yes, shadcn/ui initialization automatically generates documentation for your design system by running deterministic scripts that output basic docs alongside the standardized component catalog and token scales.

Related Skills

Explore More Design & Creative Skills→
bwbioinfobwbioinfo
4

skill-installer

Install and manage Dioxus agent skills from the official repository.

Community
Advanced
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
HaydernCenterpointHaydernCenterpoint

frontend-design

Align frontend UI components to a cohesive design system.

Community
Intermediate
AlejandroFiginiAlejandroFigini

ckm:ui-styling

Integrate shadcn/ui components with Tailwind CSS and canvas visuals for React-based frameworks.

Community
Advanced