Can this skill identify specific code red flags?

Yes, it monitors for red flags such as components exceeding 300 lines, prop drilling through three or more levels, and excessive use of type assertions or error suppression.

What is the 'Rule of Three' in this guide?

It is a principle derived from Martin Fowler's refactoring patterns: implement code inline the first two times, and only abstract or commonalize when a pattern is established for the third time.

Does it support automated testing and build workflows?

Yes, it includes a multi-phase quality check workflow that sequences linting, type-checking, building, and comprehensive test execution with fresh coverage reports.

How does this skill help with debugging complex frontend issues?

It utilizes a structured '5 Whys' root cause analysis, guides the creation of minimal reproduction code, and leverages React DevTools insights to isolate problems.

Frontend AI Developer Guide

Name: Frontend AI Developer Guide
Author: shinpr

byshinpr

•

開発者ツール

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

概要

The Frontend AI Developer Guide is a comprehensive framework designed to enhance Claude's ability to build and maintain high-quality frontend applications. It provides a rigorous set of technical decision criteria, such as the Rule of Three for code duplication and Fail-Fast principles for error handling, to prevent the accumulation of technical debt. By codifying advanced debugging techniques like the '5 Whys' and a multi-stage quality check workflow covering linting, type-checking, and test coverage, this skill ensures that every frontend change is performant, maintainable, and architecturally sound.

主な機能

Structured three-stage impact analysis for safer refactoring and dependency management
Standardized Rule of Three logic for intelligent code abstraction and commonalization
35 GitHub stars
Integrated multi-phase quality check workflow for linting, building, and testing
Automated detection of frontend anti-patterns like prop drilling and massive components
Root cause analysis framework using the 5 Whys and minimal reproduction code

ユースケース

Evaluating technical decisions during frontend architecture and component planning
Refactoring legacy frontend code while ensuring type safety and functional reliability
Conducting automated quality assurance and code reviews to maintain high standards

概要

主な機能

Structured three-stage impact analysis for safer refactoring and dependency management
Standardized Rule of Three logic for intelligent code abstraction and commonalization
35 GitHub stars
Integrated multi-phase quality check workflow for linting, building, and testing
Automated detection of frontend anti-patterns like prop drilling and massive components
Root cause analysis framework using the 5 Whys and minimal reproduction code

ユースケース

Evaluating technical decisions during frontend architecture and component planning
Refactoring legacy frontend code while ensuring type safety and functional reliability
Conducting automated quality assurance and code reviews to maintain high standards