Does it handle accessibility checks?

Yes, it enforces WCAG 2.2 AA standards, focusing on keyboard reachability, focus management, and proper ARIA labeling for form controls.

What is 'Green Coding' in this context?

It refers to practices that optimize energy efficiency and performance, such as OnPush change detection, lazy-loaded modules, and minimizing DOM complexity.

What version of Angular does this skill support?

It is optimized for modern Angular v20+ applications utilizing standalone components, template control flow, and signals.

How does it help with PR management?

It provides standardized, line-anchored feedback categorized by severity, allowing teams to quickly identify blocking issues (P0/P1) versus advisory suggestions (P2).

Can it detect security vulnerabilities?

Yes, it monitors for unsanitized HTML, unsafe use of bypassSecurityTrust methods, and accidental inclusion of PII or secrets in the codebase.

Opal Frontend Code Reviewer

Name: Opal Frontend Code Reviewer
Author: hmcts

byhmcts

•

Collaboration Tools

Automates code reviews for Angular applications using HMCTS Opal standards to ensure security, accessibility, and performance.

This skill provides an automated review framework specifically tailored for the opal-frontend repository, enforcing strict standards for Angular v20+ standalone applications. It streamlines the pull request process by identifying P0/P1 blockers in critical areas like security, WCAG 2.2 AA accessibility, and modern Angular architecture. By applying a standardized comment format and severity levels, it helps developers maintain high code quality and consistency while adhering to the GOV.UK/HMCTS design system and 'Green Coding' efficiency principles.

Key Features

01Optimization for Angular v20+ primitives including signals and standalone components

028 GitHub stars

03Strict enforcement of WCAG 2.2 AA accessibility standards

04Security auditing for unsanitized HTML and PII leak prevention

05Green Coding efficiency checks for reduced DOM depth and computation

06Automated PR feedback with standardized P0/P1/P2 severity levels

Use Cases

01Conducting automated code reviews on HMCTS Opal Frontend pull requests

02Ensuring new Angular components adhere to the GOV.UK design system

03Identifying performance bottlenecks and accessibility violations before deployment

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hmcts/opal-frontend opal-frontend

For use in Claude.ai and ChatGPT

Download Skill