the-frame-ai 0.10.8 → 0.10.9

package/README.de.md

@@ -109,6 +109,30 @@ Führe `/frame:research <Thema>` aus — Claude erkundet die Codebasis, externe
 /frame:ship
 ```
 
+### UI-Verifizierung: Sicherstellen dass die Oberfläche funktioniert
+
+```
+/frame:build
+# → Claude implementiert die Aufgabe, sagt "fertig"
+
+/frame:verify-ui
+# → öffnet Browser über Playwright MCP, macht Screenshot
+# → vergleicht mit der Aufgabenbeschreibung
+# → PASS: Oberfläche entspricht den Erwartungen
+# → FAIL: beschreibt genau was nicht stimmt und wo nachzuschauen ist
+
+# Wenn etwas nicht stimmt:
+/frame:fast "fix: Button wird auf Mobile nicht angezeigt"
+/frame:verify-ui
+# → erneute Prüfung nach dem Fix
+```
+
+Der Befehl **prüft** nur — er behebt nicht automatisch. Wenn er ein Problem findet, beschreibt er es präzise: welches Element, welches Verhalten, was erwartet wurde.
+
+**Automatische Prüfung**: in `/frame:build`, `/frame:fast`, `/frame:wave` und `/frame:debug` — wenn die Aufgabe UI-Dateien berührt (`.tsx`, `.vue`, `.css`, `component`, `page`) — wird die Browser-Prüfung automatisch nach den Quality Gates ausgeführt.
+
+**Erfordert Playwright MCP** — wird automatisch bei `npx the-frame init` oder `npx the-frame update` hinzugefügt, wenn die Frage zum Frontend-Projekt mit "y" beantwortet wird.
+
 ### Sicherheit: Audit vor dem Launch
 
 ```

package/README.es.md

@@ -109,6 +109,30 @@ Ejecuta `/frame:research <tema>` — Claude explora la base de código, fuentes
 /frame:ship
 ```
 
+### Verificación de UI: confirmar que la interfaz funciona
+
+```
+/frame:build
+# → Claude implementa la tarea, dice "listo"
+
+/frame:verify-ui
+# → abre el navegador a través de Playwright MCP, toma una captura de pantalla
+# → compara con la descripción de la tarea
+# → PASS: la interfaz coincide con las expectativas
+# → FAIL: describe exactamente qué está mal y dónde buscar
+
+# Si algo está mal:
+/frame:fast "fix: el botón no se muestra en móvil"
+/frame:verify-ui
+# → nueva verificación después del fix
+```
+
+El comando solo **verifica** — no corrige automáticamente. Si encuentra un problema, lo describe con precisión: qué elemento, qué comportamiento, qué se esperaba.
+
+**Verificación automática**: en `/frame:build`, `/frame:fast`, `/frame:wave` y `/frame:debug` — si la tarea toca archivos de UI (`.tsx`, `.vue`, `.css`, `component`, `page`) — la verificación del navegador se ejecuta automáticamente después de los quality gates.
+
+**Requiere Playwright MCP** — se añade automáticamente en `npx the-frame init` o `npx the-frame update` si respondes "y" a la pregunta sobre proyecto frontend.
+
 ### Seguridad: auditoría antes del lanzamiento
 
 ```

package/README.hi.md

@@ -109,6 +109,30 @@ FRAME — AI-सहायता प्राप्त एकल विकास
 /frame:ship
 ```
 
+### UI सत्यापन: इंटरफ़ेस काम करता है यह सुनिश्चित करें
+
+```
+/frame:build
+# → Claude कार्य लागू करता है, "तैयार" कहता है
+
+/frame:verify-ui
+# → Playwright MCP के माध्यम से ब्राउज़र खोलता है, स्क्रीनशॉट लेता है
+# → कार्य विवरण से तुलना करता है
+# → PASS: इंटरफ़ेस अपेक्षाओं से मेल खाता है
+# → FAIL: बिल्कुल क्या गलत है और कहाँ देखना है यह बताता है
+
+# अगर कुछ गलत है:
+/frame:fast "fix: मोबाइल पर बटन नहीं दिख रहा"
+/frame:verify-ui
+# → फिक्स के बाद पुनः जांच
+```
+
+कमांड केवल **सत्यापित** करता है — स्वचालित रूप से ठीक नहीं करता। अगर कोई समस्या मिलती है — सटीक रूप से बताता है: कौन सा तत्व, कौन सा व्यवहार, क्या अपेक्षित था।
+
+**स्वचालित जांच**: `/frame:build`, `/frame:fast`, `/frame:wave` और `/frame:debug` में — अगर कार्य UI फ़ाइलों (`.tsx`, `.vue`, `.css`, `component`, `page`) को छूता है — quality gates के बाद ब्राउज़र जांच स्वचालित रूप से चलती है।
+
+**Playwright MCP आवश्यक है** — `npx the-frame init` या `npx the-frame update` पर frontend project प्रश्न का "y" उत्तर देने पर स्वचालित रूप से जोड़ा जाता है।
+
 ### सुरक्षा: लॉन्च से पहले ऑडिट
 
 ```

package/README.ja.md

@@ -109,6 +109,30 @@ Claude Codeで一人でプロダクトを作っていて、チームのように
 /frame:ship
 ```
 
+### UI検証：インターフェースが動作することを確認する
+
+```
+/frame:build
+# → Claudeがタスクを実装し、「完了」と言う
+
+/frame:verify-ui
+# → Playwright MCPを通じてブラウザを開き、スクリーンショットを撮る
+# → タスクの説明と比較する
+# → PASS：インターフェースが期待通り
+# → FAIL：何が問題でどこを見ればいいか正確に説明
+
+# 何か問題がある場合：
+/frame:fast "fix: モバイルでボタンが表示されない"
+/frame:verify-ui
+# → 修正後に再確認
+```
+
+このコマンドは**確認のみ** — 自動修正はしません。問題が見つかった場合、正確に説明します：どの要素、どの動作、何が期待されていたか。
+
+**自動チェック**：`/frame:build`、`/frame:fast`、`/frame:wave`、`/frame:debug` で — タスクがUIファイル（`.tsx`、`.vue`、`.css`、`component`、`page`）に触れる場合 — ブラウザチェックがquality gatesの後に自動的に実行されます。
+
+**Playwright MCPが必要** — `npx the-frame init` または `npx the-frame update` 時にフロントエンドプロジェクトの質問に"y"と答えると自動的に追加されます。
+
 ### セキュリティ：リリース前の監査
 
 ```

package/README.md

@@ -137,6 +137,30 @@ Run `/frame:research <topic>` — Claude explores the codebase, external sources
 /frame:ship
 ```
 
+### UI verification: confirm the interface works
+
+```
+/frame:build
+# → Claude implements the task, says "done"
+
+/frame:verify-ui
+# → opens browser via Playwright MCP, takes a screenshot
+# → compares with the task description
+# → PASS: interface matches expectations
+# → FAIL: describes exactly what's wrong and where to look
+
+# If something is wrong:
+/frame:fast "fix: button not showing on mobile"
+/frame:verify-ui
+# → re-check after the fix
+```
+
+The command only **verifies** — it doesn't auto-fix. If it finds a problem, it describes it precisely: which element, what behavior, what was expected.
+
+**Automatic check**: in `/frame:build`, `/frame:fast`, `/frame:wave`, and `/frame:debug` — if the task touches UI files (`.tsx`, `.vue`, `.css`, `component`, `page`) — browser check runs automatically after quality gates.
+
+**Requires Playwright MCP** — added automatically on `npx the-frame init` or `npx the-frame update` if you answer "y" to the frontend project question.
+
 ### Security: audit before launch
 
 ```

package/README.ru.md

@@ -107,6 +107,30 @@ Research → Plan → Build → Review → Ship → Reflect
 /frame:ship
 ```
 
+### UI-верификация: убедиться что интерфейс работает
+
+```
+/frame:build
+# → Claude реализует задачу, говорит "готово"
+
+/frame:verify-ui
+# → открывает браузер через Playwright MCP, делает скриншот
+# → сравнивает с описанием задачи
+# → PASS: интерфейс соответствует ожидаемому
+# → FAIL: описывает точно что не так и где смотреть
+
+# Если что-то не так:
+/frame:fast "fix: кнопка не отображается на мобильном"
+/frame:verify-ui
+# → повторная проверка после фикса
+```
+
+Команда только **проверяет** — не исправляет автоматически. Если нашла проблему — описывает её точно: какой элемент, какое поведение, что ожидалось.
+
+**Автоматическая проверка**: в `/frame:build`, `/frame:fast`, `/frame:wave` и `/frame:debug` — если задача затрагивает UI-файлы (`.tsx`, `.vue`, `.css`, `component`, `page`) — браузерная проверка запускается автоматически после quality gates.
+
+**Требует Playwright MCP** — добавляется автоматически при `npx the-frame init` или `npx the-frame update` если ответить "y" на вопрос про фронтенд-проект.
+
 ### Безопасность: аудит перед запуском
 
 ```
@@ -264,6 +288,7 @@ npx the-frame init
 | `/frame:forensics` | Глубокий анализ причины поломки |
 | `/frame:refactor` | Рефакторинг с TDD-страховкой |
 | `/frame:migrate` | Миграция БД/API/зависимостей с планом отката |
+| `/frame:verify-ui` | Проверить UI в браузере через Playwright MCP |
 </details>
 
 <details>

package/README.zh.md

@@ -109,6 +109,30 @@ FRAME — 面向 AI 辅助独立开发的框架
 /frame:ship
 ```
 
+### UI 验证：确认界面正常工作
+
+```
+/frame:build
+# → Claude 实现任务，说"完成"
+
+/frame:verify-ui
+# → 通过 Playwright MCP 打开浏览器，截图
+# → 与任务描述对比
+# → PASS：界面符合预期
+# → FAIL：精确描述哪里有问题以及在哪里查看
+
+# 如果有问题：
+/frame:fast "fix: 按钮在移动端不显示"
+/frame:verify-ui
+# → 修复后重新检查
+```
+
+该命令只**验证** — 不自动修复。如果发现问题，会精确描述：哪个元素、什么行为、预期是什么。
+
+**自动检查**：在 `/frame:build`、`/frame:fast`、`/frame:wave` 和 `/frame:debug` 中 — 如果任务涉及 UI 文件（`.tsx`、`.vue`、`.css`、`component`、`page`）— 浏览器检查会在 quality gates 后自动运行。
+
+**需要 Playwright MCP** — 在 `npx the-frame init` 或 `npx the-frame update` 时，如果对前端项目问题回答"y"，会自动添加。
+
 ### 安全：发布前审计
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "the-frame-ai",
-  "version": "0.10.8",
+  "version": "0.10.9",
   "description": "FRAME — Framework for AI-Assisted Solo Development",
   "type": "module",
   "bin": {