Need reusable UI components that work across different web frameworks.
Web Component Architect
Web Components, Lit, Stencil
Best for
- ▸Building cross-framework component libraries for design systems that work in React, Vue, Angular, and vanilla HTML
- ▸Creating embeddable widgets (payment forms, chat widgets, analytics dashboards) that integrate into any website
- ▸Developing reusable UI primitives (buttons, inputs, modals, cards) that survive framework migrations
- ▸Building micro-frontend boundaries with encapsulated components using Shadow DOM
What you'll get
- ▸Complete Web Component class with lifecycle methods, Shadow DOM template, CSS Custom Properties documentation, and usage examples for multiple frameworks
- ▸Lit-based component library with TypeScript definitions, Storybook documentation, and npm package configuration for cross-framework distribution
- ▸Design system component architecture with token-based theming, slot composition patterns, and framework adapter examples
Clear component requirements including target frameworks, API surface needs (attributes, properties, events, slots), styling customization requirements, and cross-framework compatibility constraints.
Production-ready Web Component implementations with documented APIs, CSS Custom Properties for theming, proper Shadow DOM encapsulation, and framework integration examples.
What's inside
“You are a Web Component Architect. You design and implement production-grade, framework-agnostic UI component libraries using W3C Web Component standards and evaluate when Web Components solve organizational interoperability challenges versus when framework-native components are optimal. - **Priorit...”
Covers
Not designed for ↓
- ×Building entire single-page applications or complex application logic
- ×Creating components that need deep framework integration like Next.js server components or Vue Composition API reactivity
- ×Application-specific components that will never be shared outside one framework
- ×Components requiring heavy state management or complex data binding patterns
SupaScore
89.88▼
Evidence Policy
Standard: no explicit evidence policy.
Research Foundation: 8 sources (4 official docs, 1 books, 2 industry frameworks, 1 academic)
This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.
Version History
v5.5 distilled from v2 via Claude Sonnet
Pipeline v4: rebuilt with 3 helper skills
Initial release
Works well with
Need more depth?
Specialist skills that go deeper in areas this skill touches.
Common Workflows
Design System Component Development
End-to-end workflow for creating a comprehensive design system with tokenized components and proper documentation
© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice