用途：指导 Claude 在 Vaadin 25 Flow 应用中集成来自 npm 的第三方 Web Components 与 React 组件。集成前可用 Vaadin MCP 工具（search_vaadin_docs、get_component_java_api）查询最新文档，并将 vaadin_version 设为 "25"、ui_language 设为 "java"。
主要能力与路径选择：根据 npm 包的导出内容选择两条路径。若导出的是自定义元素（customElements.define()），走 Web Component 路径，Java 基类为 Component 或 AbstractSinglePropertyField，通常无需额外客户端代码，状态同步靠元素属性加 @Synchronize / @DomEvent。若只导出 React 组件，走 React 路径，Java 基类为 ReactAdapterComponent，需要编写一个轻量 .tsx 适配文件，状态同步用 setState() / getState() / hooks.useState()。若两者都导出，优先 Web Component 路径，以免多出 .tsx 适配层。
Web Component 路径要点：使用 @Tag、@NpmPackage（固定版本）、@JsModule 三个注解；@Tag 必须与 customElements.define() 注册的标签名一致；@JsModule 路径相对 node_modules/ 或带 ./ 前缀时相对 src/main/frontend/。属性读写用 getElement().setProperty/getProperty 或 PropertyDescriptor。属性同步可用 @Synchronize（仅适用于根元素事件）或 Element.addPropertyChangeListener()。事件用 @DomEvent 与 @EventData 映射，构造函数前两个参数 source 与 fromClient 自动填充，其余须加 @EventData；可用 callJsFunction() 调用元素方法；子元素可实现 HasComponents 或用 Element API；作为输入时继承 AbstractSinglePropertyField 以对接 Binder。
React 路径要点：Java 端继承 ReactAdapterComponent，用 @NpmPackage 装 React 库、@JsModule 指向 .tsx 适配文件、@Tag 与适配文件中的标签名一致，并始终在构造函数中调用 setState 初始化。状态 API 包括 setState、getState、addStateChangeListener。复杂类型用 Java record/bean，序列化为 JSON。客户端在 src/main/frontend/ 下创建 .tsx，继承 ReactAdapterElement，在 render(hooks) 中用 hooks.useState、hooks.useCustomEvent、hooks.useContent。自定义事件在 Java 侧用 addEventListener 监听。作为表单字段时可继承 AbstractSinglePropertyField 并派发 value-changed 自定义事件。
限制：资料仅提供上述集成指引，未提供收费、价格、平台或效果信息。