skills.rest
guardiatechnology
guardiatechnologyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kata-frontend-review

Review frontend pull requests and output a Markdown report with Blocking, Recommendations, and Notes.

Updated Sep 3, 2025
Search Tags:#typescript#testing#performance#accessibility#security#code-review#frontend-review
One-click install
npx skills add https://github.com/guardiatechnology/design-system --skill kata-frontend-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kata-frontend-review
Source: https://github.com/guardiatechnology/design-system/tree/main/.claude/skills/kata-frontend-review
Command: npx skills add https://github.com/guardiatechnology/design-system --skill kata-frontend-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams catch issues early by providing a repeatable checklist to review frontend changes for correctness, accessibility, typing, tests, security, architecture, and performance.

Core Features & Use Cases

  • Structured, severity-based reporting: consolidates findings into Blocking, Recommendations, and Notes for consistent decision-making.
  • Focused review across critical quality dimensions: checks typing, test coverage quality, accessibility compliance, security risks, architecture/composition, and performance concerns.
  • PR/issue driven context support: reads issue requirements (when present) to ensure the review maps directly to acceptance criteria.

Quick Start

Ask an AI to run the Kata-frontend-review checklist for PR #123 by collecting the diff, then producing a severity-organized Markdown report with referenced Lexis/Codex categories.

Frequently Asked Questions about kata-frontend-review

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

FAQPage Schema
How do I systematically review frontend pull requests for code quality?▼

To systematically review frontend pull requests, you can apply a structured checklist that inspects diffs for correctness, accessibility, typing, testing, security, architecture, and performance. This process maps changes to acceptance criteria and outputs a severity-based Markdown report.

What is the best way to map frontend PR changes to issue acceptance criteria?▼

Mapping frontend PR changes to acceptance criteria involves reading issue requirements and validating the code diff against them. This issue-driven approach ensures the review directly checks if the implementation meets the defined business and technical requirements.

How do I structure frontend code review findings by severity?▼

Structuring frontend code review findings by severity involves categorizing issues into Blocking, Recommendations, and Notes. This consolidated Markdown report format provides evidence-based findings for consistent team decision-making.

Does this frontend review process check accessibility and security compliance?▼

Yes, the frontend review process explicitly checks accessibility compliance and security risks. It validates diffs against dedicated categories for accessibility and security, ensuring these critical quality dimensions are not missed during the review.

What dimensions should a frontend code review cover for TypeScript projects?▼

A frontend code review for TypeScript projects should cover correctness, typing, testing quality, accessibility, security, architecture, and performance. Validating against these lexis and codex categories ensures comprehensive quality control.

When do I need an issue-driven frontend review workflow?▼

You need an issue-driven frontend review workflow when processing change sets that require diff inspection and acceptance-criteria mapping. This approach ensures the review validates that the PR implementation directly fulfills the original issue requirements.

Related Skills

Explore More Software Engineering Skills→
richkuorichkuo
45

new-issue-loop

Automate issue creation, validation, implementation, and pull request review.

Community
Advanced
yanet-platformyanet-platform
15

ship-pr

Orchestrate branch creation, PR staging, CI gating, and merge workflows.

Official
Advanced
thiagoooo34252thiagoooo34252
1

engineer-accessibility

Scan web applications for WCAG 2.2 violations using axe-core.

Community
Advanced
dsifrydsifry
60

Create GitHub Issue Skill

Create GitHub issues with problem statements, technical specs, and TDD plans.

Community
Advanced