skills.rest
bryanvillamilpragma
bryanvillamilpragmaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-code-quality

Detect frontend code quality issues in Angular and React/Next.js applications.

3|Updated May 5, 2026
Search Tags:#code quality#anti-patterns#refactoring#React#code smells#Angular
One-click install
npx skills add https://github.com/bryanvillamilpragma/power-Pragma --skill frontend-code-quality-bryanvillamilpragma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-code-quality
Source: https://github.com/bryanvillamilpragma/power-Pragma/tree/main/skills-registry/frontend-code-quality
Command: npx skills add https://github.com/bryanvillamilpragma/power-Pragma --skill frontend-code-quality-bryanvillamilpragma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers identify and address common frontend code quality issues, such as anti-patterns, code smells, and inefficient component designs.

Core Features & Use Cases

  • Anti-Pattern Detection: Identifies 'God Components', prop drilling, and misuse of useEffect.
  • Code Smells: Highlights potential issues like memory leaks and dead code.
  • Component Design Principles: Provides guidance on applying Single Responsibility and Composition Over Configuration.
  • Use Cases: Ideal for code reviews, refactoring, and improving code maintainability in Angular and React/Next.js applications.

Quick Start

Run the frontend-code-quality skill to analyze your project's code quality and receive recommendations for improvements.

Frequently Asked Questions about frontend-code-quality

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

FAQPage Schema
How do I detect React anti-patterns and code smells in my frontend application?▼

To detect React anti-patterns and code smells, analyze your codebase to identify 'God Components', prop drilling, and `useEffect` misuse. This highlights memory leaks and dead code to improve component maintainability.

What are common Angular code quality issues and how can I identify them?▼

Common Angular code quality issues include anti-patterns and inefficient component designs. Identify them by detecting violations of design principles like Single Responsibility and Composition Over Configuration during code reviews.

Do I need prior JavaScript knowledge to refactor frontend component designs?▼

Yes, you need prior knowledge of JavaScript and React or Angular frameworks to effectively refactor frontend component designs. This prerequisite understanding is necessary to apply design principles and resolve detected code smells.

What is the best way to find memory leaks and dead code in a Next.js project?▼

The best way to find memory leaks and dead code in a Next.js project is to run an automated code quality analysis. This detects frontend code smells and highlights inefficient component designs for targeted refactoring.

When should I apply Single Responsibility and Composition Over Configuration in frontend refactoring?▼

You should apply Single Responsibility and Composition Over Configuration during frontend refactoring when anti-patterns like 'God Components' are detected. This resolves code smells and improves overall application maintainability.

Related Skills

Explore More Software Engineering Skills→
viably-labsviably-labs

frontend-code-review

Identify frontend code quality issues across React, Vue, and Angular projects.

Official
Advanced
dopiotrekdopiotrek

svelte-architect

Decompose SvelteKit applications into Page, Feature, and UI component hierarchies.

Community
Intermediate
macaughmacaugh
5

Static Vulnerability Analysis

Detects injection, memory safety and authorization flaws in multiple languages.

Community
Advanced
indoor47indoor47
9

analyze-code

Analyze codebases for structural issues and generate prioritized markdown reports.

Community
Advanced