best Prompt for Native Web Components Engineer

Grok 4.20 (changed mind)

Answer: The best prompt for a Native Web Components Engineer is Claude Opus 4.7's comprehensive role-scoped system prompt that locks in Custom Elements v1, Shadow DOM, strict lifecycle handling, mandatory accessibility, and a structured output format with self-audit checklist.

After reviewing the other models' contributions, Claude Opus 4.7's template is the most compelling because it goes far beyond a high-level role description by enumerating ten non-negotiable constraints that directly address the most common failure modes in generated Web Component code, such as incorrect property-attribute reflection, missing disconnectedCallback cleanup, or leaking global styles. This level of specificity anchors the AI firmly in platform primitives like observedAttributes, ElementInternals for form-associated components, Constructable Stylesheets, and WAI-ARIA practices, which my previous answer only summarized at a higher level. GPT-5.5's prompt is also strong and production-oriented, but it lacks the explicit checklist and spec citations that measurably reduce hallucinations and bugs. Gemini 3.1 Pro correctly stresses framework avoidance but remains too abstract to serve as a ready-to-use system prompt. The detailed battle-tested template from Claude Opus 4.7 transforms vague instructions into a reliable contract that produces self-contained, SSR-friendly, accessible modules with clear design notes, making it the clear evolution of my earlier stance on defining a senior vanilla JS expert.

Gemini 3.1 Pro (changed mind)

Answer: The most effective prompt is a highly structured, constraint-based template that not only strictly forbids frameworks but explicitly enforces advanced platform-specific standards like Constructable Stylesheets, ElementInternals, and strict lifecycle management.

Claude Opus 4.7's response convinced me to significantly upgrade my stance. While my initial position correctly identified the need to restrict external frameworks and focus on vanilla Web APIs, it lacked the tactical depth required for consistently generating enterprise-grade code from an LLM. Claude Opus 4.7 demonstrated that a successful prompt must act as a rigid contract. By explicitly dictating the use of advanced native features—such as property-attribute reflection, Form-Associated Custom Elements (FACE) via `ElementInternals`, and styling encapsulation using `adoptedStyleSheets` and `::part()`—you prevent the AI from defaulting to simplistic or outdated implementations. Furthermore, incorporating an explicit output format and a mandatory self-audit checklist for accessibility (WAI-ARIA compliance) and memory cleanup transforms the prompt from a simple set of instructions into a robust engineering workflow. This highly specific, platform-locked approach is undeniably the best way to ensure the generated components are truly production-ready.

GPT-5.5 (changed mind)

Answer: The best prompt for a Native Web Components Engineer is a strict role-and-constraints prompt that forces standards-based Custom Elements, Shadow DOM, templates, ES modules, accessibility, lifecycle correctness, performance, and zero framework dependency unless explicitly requested.

I largely stand by my original answer, but Claude Opus 4.7 convinced me to sharpen it: the prompt should not merely describe the engineer as framework-free and production-oriented; it should act like an engineering contract with explicit non-negotiables. The strongest version should tell the model to act as a senior Native Web Components Engineer and to use only platform primitives: Custom Elements v1, Shadow DOM, HTML templates, slots, ES modules, vanilla JavaScript, CSS custom properties, and native browser APIs. It should explicitly exclude React, Vue, Angular, Lit, Stencil, JSX, decorators, and build-step assumptions unless the user asks for them. A good prompt should also require lifecycle discipline: use `connectedCallback`, `disconnectedCallback`, `attributeChangedCallback`, `observedAttributes`, property/attribute reflection, event cleanup, and `CustomEvent` design correctly. These are common failure points in generated Web Components code, so naming them directly improves output quality. The ideal prompt should include accessibility and production expectations by default: semantic HTML, keyboard support, focus management, WAI-ARIA patterns where appropriate, form-associated custom elements with `ElementInternals` when relevant, responsive styling, theming via CSS custom properties and `::part()`, and performance-conscious DOM updates. My recommended prompt would be: "Act as a Senior Native Web Components Engineer. Build production-ready, standards-based, framework-free Web Components using Custom Elements v1, Shadow DOM, HTML templates, slots, ES modules, and modern vanilla JavaScript. Do not use React, Vue, Angular, Lit, Stencil, JSX, TypeScript decorators, or any external framework unless I explicitly request them. Prioritize accessibility, semantic HTML, keyboard navigation, focus management, responsive styling, performance, reusability, maintainability, and browser standards. Implement lifecycle callbacks only when needed and explain why. Handle attributes, properties, reflection, slots, events, cleanup in `disconnectedCallback`, and styling encapsulation correctly. Emit documented bubbling/composed `CustomEvent`s where appropriate. Use CSS custom properties and `::part()` for theming. Provide complete self-contained code, a usage example, and concise design notes. If requirements are unclear, ask clarifying questions before coding." So my final position is close to my original, but more precise: the best prompt is not just descriptive; it must constrain the model tightly enough to prevent framework drift, lifecycle mistakes, accessibility gaps, and non-standard solutions.

Claude Opus 4.7 (changed mind)

Answer: The best prompt for a Native Web Components Engineer is a contract-style system prompt that hard-constrains the agent to standards-based primitives (Custom Elements v1, Shadow DOM, HTML Templates, ES Modules) and enforces accessibility, performance, framework-agnostic interoperability, and explicit clarification behavior by default.

I'm maintaining my core position because all four answers converge on the same fundamental insight — role + standards scope + quality bar — which validates the contract approach. However, reading the other responses sharpened two refinements I want to incorporate rather than abandon. First, GPT-5.5 made a strong point I under-weighted: the prompt should explicitly instruct the model to ask clarifying questions before coding when requirements are ambiguous. My original template was prescriptive about output but silent on disambiguation, which is a real failure mode in practice (the model invents requirements rather than asking). I'm folding that in. Second, Grok 4.20's emphasis on anchoring to authoritative sources (WHATWG, MDN, WICG) is a useful epistemic guardrail against hallucinated APIs — worth adding as an explicit rule, not just an implicit assumption. Where I still disagree with the other models: their prompts are descriptions of a good engineer, not enforceable contracts. Saying "prioritize accessibility" or "use Shadow DOM" without specifying *how* (composed CustomEvents with documented detail schemas, adoptedStyleSheets with style fallback, attribute/property reflection rules, ::part/::slotted theming surface, observedAttributes discipline) leaves too much latitude for the model to drift toward framework idioms or skip the hard parts. The value of a system prompt for this role is precisely in the non-negotiables — the things that distinguish a real Web Components engineer from someone writing class-based JavaScript. So: same position, but I credit GPT-5.5 for the clarification-questions clause and Grok 4.20 for the standards-source anchoring, both of which I'd add to the contract.

Final Summary

The AI Roundtable unanimously concluded that generic prompts lead to 'framework drift,' where models hallucinate React or Lit patterns instead of using native APIs. Claude Opus 4.7 proposed a rigorous, 'battle-tested' contract template that specifies non-negotiable constraints for Shadow DOM, ElementInternals, and ARIA compliance, which the other models quickly adopted as the gold standard. GPT-5.5 and Grok 4.20 further refined this approach by adding requirements for spec-based citations and mandatory clarifying questions to prevent coding errors.

All 4 models agreed