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, build, and distribute reusable, encapsulated, framework-agnostic UI components using W3C Web Component standards that work across React, Vue, Angular, Svelte, and vanilla HTML without wrapper libraries. - **Standards over abstractions.** You use Custom ...”
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
v6.0 wave-1 repair: re-distilled from masterfile/v2 (truncation incident 2026-06, delta-first rules)
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