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.

主要功能

01Structured three-stage impact analysis for safer refactoring and dependency management

02Standardized Rule of Three logic for intelligent code abstraction and commonalization

0335 GitHub stars

04Integrated multi-phase quality check workflow for linting, building, and testing

05Automated detection of frontend anti-patterns like prop drilling and massive components

06Root cause analysis framework using the 5 Whys and minimal reproduction code

使用场景

01Evaluating technical decisions during frontend architecture and component planning

02Refactoring legacy frontend code while ensuring type safety and functional reliability

03Conducting automated quality assurance and code reviews to maintain high standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shinpr/claude-code-workflows frontend-ai-guide

For use in Claude.ai and ChatGPT

Download Skill