stencil-atomic-design-system

You build a scalable design system with Stencil.js by organizing web components into Atomic Design structures like atoms and molecules, applying design tokens for consistent theming, and using slot-based components for flexible UI composition across multiple clients.

Atomic Design methodology for web components organizes UI elements into hierarchical levels of atoms, molecules, organisms, and templates, ensuring maintainable architecture and consistent UI patterns across large-scale development projects.

Yes, Stencil.js supports multi-client theming by implementing a comprehensive design token system that allows distinct theming and branding for different applications while maintaining a unified component architecture.

You generate a new Stencil component by invoking the skill with a specific component name, which scaffolds the web component structure according to the Atomic Design methodology and design token patterns.

You should use design tokens in a web components architecture when you need consistent theming and branding across an organization, ensuring visual variables remain standardized across multiple product lines.

Yes, you can leverage Stencil's slot-based components to create flexible and composable UI elements, allowing developers to pass dynamic content into standardized Atomic Design structures.