← ClaudeAtlas

component-librarylisted

Scaffold component library structure with Storybook and documentation
manastalukdar/ai-devstudio · ★ 1 · Web & Frontend · score 77
Install: claude install-skill manastalukdar/ai-devstudio
# Component Library Scaffolding I'll help you set up a complete component library with Storybook, testing, documentation, and build configuration. Arguments: `$ARGUMENTS` - library type or framework (e.g., "react", "vue", "web-components", "storybook") ## Strategic Planning Process <think> Component library setup requires careful consideration: 1. **Framework Selection** - React, Vue, Angular, Svelte, Web Components? - TypeScript or JavaScript? - What's the target environment? (browser, Node.js, both) - Design system or utility components? 2. **Build & Distribution** - How will components be bundled? (Rollup, Vite, esbuild) - What formats? (ESM, CJS, UMD) - Tree-shaking support needed? - CSS bundling strategy - Type definitions generation 3. **Documentation & Development** - Storybook for component showcase - Documentation site (Docusaurus, VitePress, etc.) - Live playground/examples - Design tokens documentation - Accessibility guidelines 4. **Quality Assurance** - Unit testing (Jest, Vitest) - Visual regression testing (Chromatic) - Accessibility testing (axe, jest-axe) - Build validation - Bundle size tracking 5. **Publishing Strategy** - npm package setup - Versioning strategy (semantic versioning) - Changelog generation - CI/CD for releases </think> ## Phase 1: Project Detection & Setup **MANDATORY FIRST STEPS:** 1. Detect existing project or create new structure 2. Identify framework and bui