stencil-atomic-design-system
OfficialBuild scalable, themeable design systems.
AuthorCoRLab-Tech
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a robust framework for building Stencil.js design systems that are scalable, themeable, and adhere to Atomic Design principles, streamlining UI development and ensuring consistency across multiple clients.
Core Features & Use Cases
- Atomic Design Structure: Organizes components into atoms, molecules, organisms, and templates for maintainable UI architecture.
- Design Tokens: Implements a comprehensive design token system for consistent theming and branding.
- Multi-Client Theming: Supports distinct theming for different clients or applications.
- Slot-Based Components: Leverages Stencil's slotting for flexible and composable component design.
- Use Case: Develop a new design system for a large organization with multiple product lines, ensuring a unified look and feel while allowing for brand-specific customizations.
Quick Start
Use the stencil-atomic-design-system skill to generate a new Stencil component named 'cor-tooltip'.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 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: stencil-atomic-design-system Download link: https://github.com/CoRLab-Tech/skills/archive/main.zip#stencil-atomic-design-system 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 223,000+ vetted skills library on demand.