Build modern web apps with LLMs — no frameworks, no dependencies
Learn how to build modern, zero-dependency web applications with Web Components, BCE architecture, and LLM assistance. From screenshot to deployable SPA — using effective prompts, Domain Specific Prompts, semantic HTML, modern CSS, Playwright testing, and iterative refinement. No frameworks required.
🎯 What You'll Learn
- 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
📋 Prerequisites & Setup
I will build web component applications iteratively with LLMs, answer your questions, and implement features on the fly. You will receive a Git repository containing all intermediate steps and a deployable application.
Required Software:
- Visual Studio Code (VSC)
- zws (Zero-dependency Web Server)
- Git client
- Recommended LLMs: Anthropic Claude or OpenAI ChatGPT
💡 Note: You can follow along or take notes — all source code will be provided!
🚀 80% hands-on coding — The workshop adapts to your questions!
📧 Questions or Direct Registration?
Contact: workshops[-AT-]adam-bien.com
💡 Tip: Mention in comments if you want to register for multiple workshops!
Register Now
Choose your preferred registration platform:
📄 Note: Invoice available through Eventbrite registration