npm-architect
OfficialPublish a tree-shakeable design system on npm
System Documentation
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.tsto 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 independencies, 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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: npm-architect Download link: https://github.com/Stack-and-Flow/design-system/archive/main.zip#npm-architect Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.