The Agent Skills Directory

[COMMAND_EXECUTION]: The skill executes a local Python script, scripts/compare.py, to perform image processing, overlay generation, and pixel diffing. It also utilizes browser automation tools (Chrome DevTools or Playwright) to capture screenshots and extract DOM geometry at runtime.
[INDIRECT_PROMPT_INJECTION]: The skill processes external data from Figma links and live browser pages (DOM structure, styles, and images). To mitigate risks, the instructions define the Figma design as the unique visual baseline and mandate a multi-round verification process that includes functional regression tests to ensure visual changes do not introduce unintended behavioral side effects.
Ingestion points: Figma API data and images (via figma-context-mcp), and live web page content/screenshots.
Boundary markers: Explicitly defines Figma as the "only visual baseline" and uses structured templates like run.md and expected.md to isolate and track requirements.
Capability inventory: The skill writes CSS changes to the source code, creates a .ui-check/ workspace for artifacts, and executes local Python and browser scripts.
Sanitization: Includes a dedicated "Functional Regression" step (Step 6) that uses interactive assertions to verify that business logic remains intact after styling changes.
[EXTERNAL_DOWNLOADS]: The skill suggests installing the Pillow library via pip3 if it is missing from the environment. Pillow is a standard, well-known, and widely trusted image processing library.
[SAFE]: The skill includes comprehensive 'Red Lines' that prohibit faking results, using obfuscation (like display:none) to hide discrepancies, and modifying global styles without checking cross-page impact.

sdlc-ui-visual