Loading...
Loading...
Found 13 Skills
Use this skill whenever you need to verify that a web UI actually works the way it's supposed to — clicking through flows, asserting state, catching console errors, taking screenshots across multiple viewports for visual review. Triggers on phrases like "驗證網頁", "verify the site", "Playwright tests", "visual regression", "RWD verification", "screenshot comparison", "responsive check", "console error check", "看看手機版有沒有壞", "視覺驗證", "Playwright 測試", "截圖比對", "RWD 驗證", "驗 sidebar", "看 console 有沒有錯", or any post-change moment where the user wants to know "did I break anything?". This is the runtime-behaviour verifier — use `web-content-audit` instead if the question is about file/data consistency rather than rendered behaviour.
Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.
Use this skill when you need to verify cross-file data/asset consistency in a content-driven site — not "does it render?" (that's `web-visual-verification`) but "do the data, files, and references all line up?". Triggers on phrases like "盤點內容", "稽核資產", "對照 course-data 跟 markdown", "找缺圖", "task ID 有沒有重複", "quiz 編號 vs 硬編碼總數", "audit", "content audit", "content drift", "asset coverage", "three-way sync check", "cross-file consistency", "find missing illustrations", "資料一致性檢查", "找出該補插圖的地方", or any moment when the user senses divergence between source files and deployed data. Output is a human-readable markdown report, not a pass/fail. Pair with `web-visual-verification` for full pre-release coverage.
Verify and release Three.js browser games. Combines playtest QA, automated bot playtests, mobile/responsive checks, production builds, preview verification, static-hosting base paths, debug gating, bundle review, screenshots, visual test harness decisions, packaged canvas-pixel inspection with measured metrics, console checks, and release risk reports.
Use when creating or editing documents (DOCX, PDF, XLSX, PPTX) that need professional output. Adds visual verification, typography hygiene, and formula patterns to the document-skills plugin.
Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.
This skill is strict implementation instruction, not advisory reference text. The skill treats the HTML as discovery-only input, forces interactive Playwright route/state capture, then moves through scored gates for source acceptance, implementation planning, authored UI reproduction, implementation integrity, visual verification, and adversarial proof before signoff.
Visual verification workflow for UI changes to accelerate code review and catch ...
Generates code from Sketch designs with 1:1 visual fidelity using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_symbol_overrides`, `get_design_assets`, targeted `run_code`). Inspects existing project code and conventions first, maps symbols and overrides to reusable components, exports assets, and validates implementations against Sketch screenshots (web: running app vs `get_screenshot`). Use when implementing or updating UI in React, Tailwind, SwiftUI, Kotlin, or other technologies from an Sketch document, page, frame, or layer.
Style spec cho mermaid diagram — "zone-tinted flowchart" (flowchart + subgraph tô nền per vùng + classDef palette + shape có nghĩa). Load TRƯỚC khi viết/sửa bất kỳ block ```mermaid``` trong tài liệu, đặc biệt C1 System Context, C2 Modules, user flow. Hình tự mang đủ màu để đọc được ở cả light mode và dark mode. Cấm C4Context/C4Container. Kèm `verify.py` — lint + render 2 nền (sáng/tối) để soát bằng mắt trước khi dán. Read-only, không sửa nội dung file.
The VISUAL gate — render a UI or visual artifact through its surface adapter, inspect the actual pixels, then fix and re-render until it passes the composed StyleSeed rule set.
Drive an engine app headlessly in a pty, record a video of the whole verification, and open a summary page (video + timeline + checks) with pixel open.