skills.rest
Stack-and-Flow
Stack-and-FlowOFFICIAL
Explore all skills by this author →
GitHub

npm-architect

Configure npm package exports and Vite library builds for per-component tree-shaking.

23|4|Updated May 7, 2025
Search Tags:#npm#design system#tree shaking#peer dependencies#package exports#typescript declarations#vite lib mode
One-click install
npx skills add https://github.com/Stack-and-Flow/design-system --skill npm-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: npm-architect
Source: https://github.com/Stack-and-Flow/design-system/tree/main/.atl/skills/npm-architect
Command: npx skills add https://github.com/Stack-and-Flow/design-system --skill npm-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill resolves the challenge of turning the Stack-and-Flow design system into a correctly distributable npm package, so component consumers can import efficiently and without dependency or export issues.

Core Features & Use Cases

  • NPM export and entry-point architecture: Designs a root API barrel and per-component import paths (e.g., @stack-and-flow/design-system/button) to enable proper bundler-level tree-shaking.
  • Vite library-mode build setup: Proposes a dedicated vite.config.lib.ts to build ESM+CJS outputs in a way that preserves module structure for independent component consumption.
  • Dependency hygiene for React ecosystems: Ensures React and ReactDOM are handled via peerDependencies, while runtime packages remain in dependencies, preventing duplicate React instances.

Use case example: A developer wants import { Button } from '@stack-and-flow/design-system/button' to work in their app with correct TypeScript types, CSS availability for tokens, and minimal bundle size via per-component exports.

Quick Start

Ask the AI to audit the current package state, then generate the concrete file and package.json changes needed to publish the design system as a proper npm library with per-component exports and React-safe dependencies.

Frequently Asked Questions about npm-architect

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

FAQPage Schema
How do I set up per-component exports for a tree-shakeable npm design system?▼

To set up tree-shakeable npm exports, configure a root API barrel and per-component import paths like `@design-system/button` in your package.json. This ensures bundlers can eliminate unused modules, allowing consumers to import only the components they need.

What's the best way to build a React component library with Vite lib mode?▼

The best way to build a React component library with Vite lib mode is creating a dedicated `vite.config.lib.ts` to generate ESM and CJS outputs. This preserves module structure for independent component consumption and correct TypeScript declarations.

Why do I need peer dependencies for React when publishing an npm package?▼

You need peer dependencies for React when publishing an npm package to prevent duplicate React instances in the consumer's application. Moving React and ReactDOM to `peerDependencies` ensures the library uses the host project's single React runtime.

How does the package exports map affect tree shaking in a design system?▼

The package exports map affects tree shaking by defining explicit entry points for each component. Combined with the `sideEffects` field in package.json, it tells bundlers which modules are pure and safe to drop if unused, minimizing the final bundle size.

How do I validate the dist structure of a published npm package?▼

Validate the dist structure of a published npm package by auditing the built output against your `exports` and `files` fields. Ensure the ESM and CJS builds match the defined per-component paths and that TypeScript declaration files are correctly generated.

Can I use Vite to build a design system that supports CSS token access?▼

Yes, you can use Vite to build a design system supporting CSS token access. By configuring the library mode build to retain CSS files and mapping them correctly in the package exports, consumers can import styles and CSS variables directly.

Related Skills

Explore More Software Engineering Skills→
Stack-and-FlowStack-and-Flow
23

system-auditor

Audit design system tokens, folder structure, and npm distributable standards.

Official
Advanced
SufficientDaikonSufficientDaikon
8

sdk-beside-app

Extract web app logic into an npm package with dual CJS/ESM builds.

Community
Advanced
luyi985luyi985

tsconfig-options

Document TypeScript compiler options for reliable type checking.

Community
Intermediate
manastalukdarmanastalukdar
1

bundle-analyze

Analyze JavaScript bundle sizes for Webpack, Vite, esbuild, and Rollup projects.

Community
Advanced