skills.rest
capella-hotel-group
capella-hotel-groupOFFICIAL
Explore all skills by this author →
GitHub

aem-skill-code-review

Reviews AEM Edge Delivery Services TypeScript code against project standards and captures validation screenshots.

Updated Apr 6, 2026
Search Tags:#typescript#code review#pull request#screenshots#css#playwright#aem edge delivery services
One-click install
npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill aem-skill-code-review-capella-hotel-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aem-skill-code-review
Source: https://github.com/capella-hotel-group/capella-hotel-group-poc/tree/main/.github/skills/aem-skill-code-review
Command: npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill aem-skill-code-review-capella-hotel-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve? Reviewing AEM Edge Delivery Services code manually is error-prone: reviewers must remember project-specific rules like editing only src/ sources, using @/* import aliases, sanitizing innerHTML with DOMPurify, and scoping CSS selectors. This Skill automates that review with structured checklists, blocking-issue detection, and visual screenshot validation before code reaches a pull request or merge. ## Core Features & Use Cases - Dual review modes: Run a self-review of uncommitted working-directory changes before committing, or review an existing GitHub pull request by number or URL. - Project-specific rule enforcement: Validates TypeScript block signatures, @/* import aliases, null-guarded querySelector calls, replaceChildren() DOM rebuilds, DOMPurify sanitization, design-token CSS variables, and range-syntax media queries. - Visual validation with Playwright: Captures desktop (1200px), tablet (768px), and mobile (375px) screenshots of preview URLs to detect layout, responsive, and rendering issues. - Actionable PR feedback: Posts review comments with GitHub Suggestions via the Pull Request Reviews API so authors can apply fixes with one click. - Use Case: After implementing a new hero block in src/blocks/hero/, invoke the skill to verify linting passes, no generated files were edited, XSS risks are sanitized, and the block renders correctly across viewports before opening the PR. ## Quick Start Ask the AI to run a code review on your uncommitted changes or on a specific pull request, for example by saying: review my current working directory changes against the AEM EDS coding standards and capture screenshots of the preview page.

Frequently Asked Questions about aem-skill-code-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review code for an AEM Edge Delivery Services project?▼

Run the skill in self-review mode on uncommitted changes using git status and git diff, or pass a PR number to review an existing pull request. It checks TypeScript patterns, CSS scoping, security, performance, and captures screenshots of the preview URL.

How do I capture screenshots of an AEM EDS preview page at multiple viewports?▼

Run the capture-screenshots.js script in the skill's scripts directory with a preview URL. It uses Playwright to save full-page screenshots at desktop 1200px, tablet 768px, and mobile 375px widths into an output folder.

What code issues block a pull request in AEM EDS projects?▼

Blocking issues include editing generated blocks/, scripts/, or styles/ output instead of src/ sources, missing DOMPurify sanitization on innerHTML with external content, linting failures, security vulnerabilities, and performance regressions.

Does the code review skill work with TypeScript and Vite projects?▼

Yes, it is adapted for a TypeScript-strict, Vite + Rollup stack. It enforces @/* import aliases, the async decorate(block: HTMLElement) export signature, strict null checks, and verifies changes stay in src/ rather than generated build output.

How do I add GitHub Suggestions to a pull request review?▼

The skill builds a review payload with suggestion markdown blocks and posts it via the GitHub Pull Request Reviews API using the PR head commit SHA. Comments use the diff position field so authors can apply fixes directly in the GitHub UI.

Related Skills

Explore More Software Engineering Skills→
aemsitesaemsites
1

building-blocks

Implement AEM Edge Delivery Services block code with JavaScript decoration and CSS styling.

Official
Intermediate
az0512124155azz-sysaz0512124155azz-sys

update-pr

Updates an existing pull request with new commits and refreshed metadata.

Community
Intermediate
amol-anandamol-anand

Testing Blocks

Automate unit, browser, lint, and performance tests for AEM Edge Delivery Blocks.

Community
Intermediate
dr-robert-lidr-robert-li
27

code-quality

Review WordPress code against WPCS standards and static analysis tools.

Community
Advanced