Can this skill help with frontend debugging?

Yes, it includes a structured 5 Whys root cause analysis procedure and techniques for error analysis, minimal reproduction code, and React DevTools inspection.

How does it handle impact analysis?

The skill mandates a three-stage Discovery, Understanding, and Identification process to ensure all callers, hierarchies, and data flows are accounted for before implementation.

How does the Rule of Three help in coding?

It provides a clear criteria for when to inline code, consider future consolidation, or implement commonalization to avoid premature abstraction and technical debt.

What are the main anti-patterns this skill detects?

It identifies violations like the Rule of Three, SRP breaches, prop drilling over 3 levels, massive components exceeding 300 lines, and excessive type assertions.

What is the Quality Check Workflow?

It is a 5-phase process covering basic checks like linting and formatting, TypeScript builds, and final verification through test execution and coverage reports.

Frontend AI Developer Guide

Name: Frontend AI Developer Guide
Author: Tahir-yamin

byTahir-yamin

•

Design Tools

Provides structured technical decision criteria, anti-pattern detection, and quality assurance workflows for frontend engineering.

About

This skill acts as a specialized architectural consultant for frontend developers using Claude, offering a robust framework for making technical decisions and maintaining code quality. It identifies common 'Red Flag' patterns like SRP violations and prop drilling while enforcing the 'Rule of Three' for intelligent refactoring. By integrating a systematic 5-step quality check workflow and a rigorous impact analysis methodology, it helps developers build maintainable, type-safe, and bug-resistant user interfaces while avoiding technical debt accumulation.

Key Features

Ensures implementation completeness with a mandatory three-stage impact analysis process.
3 GitHub stars
Identifies frontend anti-patterns such as excessive type assertions and massive components.
Guides root cause analysis through the 5 Whys debugging methodology.
Enforces the Rule of Three for smart code commonalization and refactoring decisions.
Provides a standardized 5-phase quality check workflow for linting, building, and testing.

Use Cases

Performing thorough impact analysis before making changes to shared UI components or hooks.
Refactoring legacy frontend components to improve maintainability and follow DRY principles.
Standardizing quality assurance and build procedures across a development team.

About

Key Features

Ensures implementation completeness with a mandatory three-stage impact analysis process.
3 GitHub stars
Identifies frontend anti-patterns such as excessive type assertions and massive components.
Guides root cause analysis through the 5 Whys debugging methodology.
Enforces the Rule of Three for smart code commonalization and refactoring decisions.
Provides a standardized 5-phase quality check workflow for linting, building, and testing.

Use Cases

Performing thorough impact analysis before making changes to shared UI components or hooks.
Refactoring legacy frontend components to improve maintainability and follow DRY principles.
Standardizing quality assurance and build procedures across a development team.