LLM-Assisted Web Components. No Frameworks, No Dependencies: airhacks.live

# Join Adam Bien for a hands-on workshop on building modern, zero-dependency web applications with Web Components, scalable / feature-oriented architecture, and LLM assistance. From screenshot to deployable SPA — no frameworks required.

80% hands-on coding — the workshop adapts to your questions!

• From screenshot / mockup / wireframe to maintainable UIs
• Building SPAs with web standards and LLMs
• Effective prompting strategies for web components
• Iterative refinement of LLM-generated components
• Consistent and repeatable design with design.md
• Extracting DESIGN.md from existing websites and screenshots
• Detecting drift between DESIGN.md and CSS design tokens
• W3C Design Tokens as CSS custom properties — no token tooling
• Why semantic markup and BCE reduce LLM hallucinations
• Taming large applications with feature-oriented structure
• Structuring feature modules with Boundary-Control-Entity
• SBCE for the frontend: capability specs as Web Component contracts
• Spec-driven Web Components with SBCE and vanilla BCE
• Declaring UI features as specs, converging to Web Components
• package-info.md as the business component contract
• Building high performance apps with Web Components and web standards
• Zero-dependency web apps with lit-html and Redux Toolkit
• No version upgrades, no breaking changes, no migrations
• Zero dependencies: no supply chain attacks
• Using Web Baseline to guide LLM technology decisions
• Multi-browser support with web standards and Baseline
• Capturing best practices with instructions, SKILL.md and AGENTS.md
• Implementing policies, guardrails and hooks
• Using specialised sub-agents for quality
• Import maps and ES modules without a build step
• Unidirectional data flow with Redux Toolkit
• Client-side routing with the Navigation API and URLPattern
• Custom events for component communication
• Automatic state persistence with localStorage
• Semantic HTML over div/span soup
• Native form validation instead of JavaScript re-implementation
• Less JavaScript with built-in HTML: dialog, popover, details
• CSS-only interactivity: accordions, modals, tabs without JS
• Accessibility with WCAG and focus management
• Modern CSS: nesting, logical properties, clamp() and oklch()
• Dark mode with prefers-color-scheme
• Responsive design with CSS Grid and container queries
• Testing web components with Playwright and MCPs
• Cross-browser E2E testing with Playwright
• Effective GitHub / LLM integrations
• Working with local LLMs
• Working with Claude Code, Kiro, GitHub Copilot and (...)
• Effective backend integration and full stack development
• From prompt to deployable web component SPA...
• (TBD)

Checkout for details: https://workshops.adam-bien.com/llm-assisted-webcomponents.htm