Loading...
Loading...
Found 58 Skills
Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.
Builds UI from a Figma file or a design image so it matches the design, using your project's existing tokens and components.
Runs the golden re-baselining ritual — the one sanctioned way committed reference images are overwritten. Enforces the order: land and green the non-golden geometry, contrast and a11y tests FIRST, re-baseline only in the pinned blessing environment that produced the committed images, with loadAppFonts() so nothing renders in Ahem, via `flutter test --update-goldens --tags golden` (never in CI, never to make a red pipeline green), then inspect every changed PNG by eye, delete the orphans left by renamed or removed tests, land the images as their own commit naming why they moved, and prove it by re-running the suite WITHOUT the flag. Manual, side-effecting workflow. Use when a deliberate visual change breaks matchesGoldenFile, when adding or renaming a golden test, or when someone reaches for --update-goldens.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Build or improve a UI testing strategy covering visual regression, interaction testing, and accessibility assertions. Use when the user asks to add tests, set up testing, fix flaky tests, improve test coverage, validate UI behavior, catch visual bugs, or establish confidence in shipping frontend changes.
Write repeatable QA regression e2e tests from test cases, tickets, or acceptance criteria. Use when the user asks to write, automate, or generate an e2e test or preserve an automated regression scenario, with deterministic setup, stable targets, executable structural or visual evidence, and two consecutive full passes. For one-off UI checks or replayable paths without acceptance criteria, use argent-test-ui-flow or argent-create-e2e. Supports iOS, Android, Chromium, and Vega (Fire TV), where recorded tv-remote steps replace touch directives. Apple TV and Android TV are unsupported; use argent-tv-interact there and report the limitation.
Capture screenshots of the Sentry UI in a web browser, lay them out in a pull request description as before/after tables, and upload them with `gh --attach`.
Show the user real screenshots of the work as it progresses, without being asked. Capture the start, the key moment and the result of every visual change, send them as files with captions as soon as each is ready, and look at every image before sending it. Use on any task with a visible result (UI, pages, games, 3D, charts, motion), when the user says "show me", "screenshots", "keep giving me screenshots" or "where are the screenshots?", and before any report that claims a visual change works.
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".
Clone a website — two modes. SNAPSHOT = a faithful, self-contained offline copy of a page (HTML+CSS+JS+images in one file, exact bytes, SingleFile-style). RECONSTRUCT = AI reverse- engineer the page into a clean editable Next.js/Tailwind codebase (design tokens → component specs → parallel builders → visual-diff QA, the ai-website-cloner-template method). Use when the user wants to "clone this site", copy a page's design/UI + interactions, mirror a layout, save offline, or rebuild a site as editable code. Built-now-adapt-later: snapshot builtin works now; faithful live capture + the reconstruct pipeline are one-config engine adapters.