improve-frontend

Scans React/TypeScript frontend and implements selected fixes from ranked findings.

411|21|Updated Dec 18, 2025
One-click install
npx skills add https://github.com/luxury-yacht/app --skill improve-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-frontend
Source: https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend
Command: npx skills add https://github.com/luxury-yacht/app --skill improve-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It reduces security, stability, and performance problems in a React/TypeScript frontend by turning messy code risk into a prioritized, actionable short list and a guided fix.

Core Features & Use Cases

  • Security-first code scanning: Detects likely XSS vectors, sensitive data exposure, insecure communication patterns, injection risks from Kubernetes data, prototype-pollution hazards, and risky/outdated dependencies.
  • Stability and correctness checks: Finds memory leaks, missing error boundaries, race conditions, null/undefined safety gaps, and multi-cluster state problems.
  • Performance and maintainability improvements: Flags unnecessary re-renders, expensive computations, redundant fetching, table rendering inefficiencies, and simplification opportunities, then fixes the user-selected item.

Quick Start

Run improve-frontend without arguments to scan the whole React/TypeScript frontend and receive 5 ranked findings for you to choose one to fix.

Frequently Asked Questions about improve-frontend

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

FAQPage Schema
How do I scan my React and TypeScript frontend for security and performance issues?

To scan a React and TypeScript frontend for vulnerabilities and performance issues, run the tool without arguments. It reads AGENTS.md conventions and outputs exactly five ranked findings with severity and file:line locations for you to review.

What is the best way to prioritize and fix frontend stability risks like memory leaks and race conditions?

The best way to fix frontend stability risks is to use a scanning tool that ranks memory leaks, race conditions, and null safety gaps by severity. It provides a prioritized short list, waits for your selection, and then applies the minimal correct fix with required tests.

Can I detect XSS vectors and sensitive data exposure in a Kubernetes GUI frontend codebase?

Yes, you can detect XSS vectors, sensitive data exposure, and injection risks from Kubernetes data in a frontend codebase. The scanner identifies these security vulnerabilities alongside prototype-pollution hazards and risky dependencies as part of its security-first code scanning.

How do I find and resolve unnecessary re-renders and redundant fetching in my React application?

To find and resolve unnecessary re-renders and redundant fetching in a React application, run a performance profiling scan. It flags these performance issues alongside expensive computations and table rendering inefficiencies, then implements your selected fix.

Does this frontend scanning tool apply fixes automatically or just report the issues?

The frontend scanning tool reports issues and applies fixes interactively. It produces five ranked findings, waits for you to select one, and then implements the minimal correct fix plus required tests and quality checks for that specific item.

What are the limitations of using an automated tool to improve frontend code quality?

A limitation of using this automated tool to improve frontend code quality is that it processes exactly five ranked findings per scan. You must manually select one of the five items to fix, meaning it addresses issues iteratively rather than resolving the entire codebase simultaneously.