Menu
Instructions for capturing responsive screenshots of page fragments and updating the project's visual gallery markdown.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Activate this skill whenever you are running E2E tests, capturing screenshots, promoting visual baselines, or interpreting E2E test results for Liferay fragments. It specifies the exact commands for full-suite runs, targeted fragment runs, and visual baseline promotion, and documents the current known platform blocker.
Activate this skill when a task is large enough to benefit from splitting work across concurrent or hierarchical subagents — for example, running research and implementation in parallel, or delegating lint/test execution to a background agent while the coordinator continues planning. It defines the collaboration patterns, spawn constraints, output integration rules, and conflict resolution protocol.
Activate this skill when executing any multi-phase fragment development task — scaffolding, linting, compatibility build, E2E testing, or documentation update — where the output of one phase is the required input to the next. It defines the canonical pipeline phases, their inputs/outputs, and the active constraints that prevent a downstream phase from starting before its upstream gate has passed.
Activate this skill whenever you are creating a branch, opening a Pull Request, merging code, or performing any Git / GitHub CLI operation in the liferay-fragments repository. It enforces branch naming conventions, pre-commit validation gates, the PR auto-merge protocol, and the code-review requirement.
Activate this skill whenever you are planning a new feature, bug fix, enhancement, or any tracked piece of work. It mandates issue-first development and prescribes the exact workflow for creating, syncing, and closing GitHub Issues using the gh-issue-sync.cjs automation tool.
Activate this skill whenever you are building, packaging, or releasing fragment ZIP collections. It defines the mandatory three-target build strategy that produces separate ZIPs for Liferay 2026.Q1+, pre-2026.Q1, and pre-2025.Q3, and specifies the exact dataType and checkbox default-value transformation rules for each target.
| name | liferay-visual-gallery |
| description | Instructions for capturing responsive screenshots of page fragments and updating the project's visual gallery markdown. |
This skill provides step-by-step instructions for developers and AI agents to capture E2E visual snapshots of Liferay page fragments across viewports and generate the unified documentation gallery.
To capture screenshots of page fragments, run the automated test suite. Visual snapshots are captured across three viewports:
In Windows environments, run these commands from the workspace root using Git Bash:
$env:PORT="8081"; & "C:\Program Files\Git\bin\bash.exe" scripts/test-runner.sh -p e2e-test-env -k
$env:PORT="8081"; & "C:\Program Files\Git\bin\bash.exe" scripts/test-runner.sh -p e2e-test-env -k -f "<Fragment/Collection Name>"
[!NOTE]
-p e2e-test-envhooks into the active running container, bypassing long container boot times.-kor--keep-alivekeeps the Liferay Docker container running after execution for debugging.
After executing the tests, you must synchronize the visual gallery documentation to prevent linter errors due to "gallery drift":
node scripts/generate-gallery.js
docs/gallery.md in side-by-side tables.docs/images/live/.To track visual regression across commits, the captured screenshots under docs/images/live/ must be committed to the repository:
.gitignore does not exclude the generated pngs. The override pattern in .gitignore must be:
!/docs/images/live/**/*.png
git add docs/images/live/ docs/gallery.md
e2e-tests/tests/global-setup.js for proper Guest API permissions configurations.docs/gallery.md.node scripts/generate-gallery.js to compile the visual table structures again.