Loading...
Loading...
Found 27 Skills
Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Use after making UI changes to verify they look correct.
Use vision models to self-review screenshots against design intent. Catches spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps. Use when reviewing designs, comparing implementations to mockups, or doing pre-ship QA.
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find typography, wrapping, overlap, overflow, responsive, route, overlay, map, transient-state, data-visualization, browser-output, file-dialog, PDF/print, or Electron-shell defects, or to compare a rendered artifact with a visual reference. Do not use for greenfield UI design, extracting a design system from screenshots, general QA-program setup, or nonvisual code debugging.
WORKFLOW tự-kiểm THỊ GIÁC khép kín cho SPA local (app do /br sinh, hoặc bất kỳ web app): chụp headless từng route → BASELINE pixel-diff (bắt thay đổi ngoài ý muốn) → bất biến máy-kiểm (design conformance) → agent ĐỌC HẾT ảnh theo rubric → FINDINGS.md → sửa → chụp lại → chỉ pass khi máy VÀ mắt cùng sạch. Dùng khi đổi theme/UI/rebrand, khi extension MCP không chụp được localhost, hoặc cần gate UI cho frame. Trigger: "qa thị giác", "visual qa", "route-shots", "screenshot từng route", "kiểm giao diện", "baseline diff", "UI có regression không", "test giao diện headless", "/visual-qa".
World-class character and art style consistency for AI-generated images and videos - ensures visual coherence across series, maintains character identity, and provides rigorous QA before deliveryUse when "character consistency, art style, same character, consistent character, visual continuity, series, turnaround sheet, character sheet, reference image, character bible, style guide, anime character, consistent look, face consistency, outfit consistency, lora training, ip-adapter, flux kontext, visual qa, art quality, generation review, style drift, character drift, character-consistency, art-style, visual-qa, ai-art, image-generation, video-generation, anime, illustration, lora, ip-adapter, flux, midjourney, stable-diffusion" mentioned.
Audit UI/UX phong cách SENIOR — bốn mục accessibility · visual-hierarchy · consistency · antipattern, mỗi mục cho ĐIỂM/10 + LỖI NẶNG NHẤT + CÁCH SỬA, rồi một kết luận PASS-sang-bước-kế hay CẦN-SỬA. Phần ĐO ĐƯỢC (contrast WCAG, tap-target, overlap/misalign hình học, missing-label) chạy tất định qua engine visual-qa (headless, 0-token, KHÔNG LLM); phần cần MẮT (hierarchy, drift design-system, dark-pattern) là LLM audit. Gọi khi user nói "qc uiux", "audit ui", "soi giao diện", "dẹp antipattern ui", "/qc-uiux", hoặc SAU khi có mockup/UI. NHÂN KHUÔN /qc-code (đắt=LLM tay, rẻ=test tất định auto). KHÁC /redesign (đổi mới thẩm mỹ) và /visual-qa (chụp+gác pixel) — qc-uiux là verdict senior 4-mục.
Dọn slop UI/UX khi onboard 1 dự án bất kỳ — quét view có sẵn, chụp playwright (before), để hallmark tự đọc project và REDESIGN thật (sinh design.md của riêng nó, không đóng khung theo token slop cũ), rồi vòng lặp sửa dựa trên slop-test 58 gate + `/impeccable audit`/`critique` + `/qc-uiux` (verdict senior 4-mục, engine tất định `visual-qa`) cho tới khi sạch hoặc hết ngân sách vòng. Gọi khi user nói "dọn slop", "làm gọn UI dự án", "chuẩn hoá UI xuyên suốt", "onboard rồi làm sạch UI", "design prim", "/design-prim".
Hub MỘT TÊN cho dây chuyền sản xuất kiểu Ralph (GH#15): biến tài liệu thô của user thành sản phẩm qua 5 mode — `/br interview` (đọc folder raw/ → đối chiếu bộ specs chuẩn S1–S10 → sinh bộ câu hỏi hỏi-bù dạng HTML xem trước + MD điền, cho phép lens chuyên gia điền thay mục chưa chắc), `/br compile` (answers → BR.md có clause_id + bảng "Giả định đang gánh"), `/br slice` (BR → frames nhỏ gắn chặt code, gác bằng frame-lint), `/br run <frame>` (mỗi frame chạy loop-runner có 6 phanh + dry-run + người gác · sau frame xanh TỰ chạy QC tất định 0-token), `/br qc` (audit senior 4-mục: /qc-code soi code + /qc-uiux soi UI/UX qua engine visual-qa), `/br status` (trang line-status.html tất định: frame nào chạy/kẹt/xong + truy ngược lỗi→frame→clause). Gọi khi user nói "br", "interview", "phỏng vấn yêu cầu", "soạn BR", "slice frame", "chạy frame", "qc frame", "audit ui mockup", "trạng thái dây chuyền", "ralph pipeline", hoặc invoke /br. User chỉ mô tả PHẠM VI, không cần nhớ lệnh con.
(NS) Normative visual appearance guides for UI surfaces (card/form/shell/overlay): block order, states, palette, Action|What-changes tables. MUST use for descrição normativa, guia visual, aparência, visual QA checklist, "how this looks", docs named *-visual.md / *-painel-visual.md / *-appearance.md (and kin), or shell vs content / card vs form / carcaça vs formulário. Prefer prototype/ as source of truth when present; after behavioral UX guides, offer ns-living-spec appearance mode. Do NOT use for business rules, ERDs, layout/grid math, API/auth, e2e, or prototype create/evolve (ns-proto-creator).
Large Language and Vision Assistant. Enables visual instruction tuning and image-based conversations. Combines CLIP vision encoder with Vicuna/LLaMA language models. Supports multi-turn image chat, visual question answering, and instruction following. Use for vision-language chatbots or image understanding tasks. Best for conversational image analysis.
Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site.
Persistent browser interaction through a normal Node.js Playwright script for fast iterative web UI debugging.