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

It follows Martin Fowler's refactoring principle: keep code inline for the first two occurrences, but implement commonalization on the third to avoid premature abstraction.

How does the impact analysis workflow prevent bugs?

It enforces a mandatory Discovery, Understanding, and Identification process to ensure all dependencies and processing flows are mapped before any code is modified.

How does this skill detect React anti-patterns?

It monitors code for specific red flags like prop drilling depth (3+ levels), component line length (300+ lines), and violations of the Single Responsibility Principle.

Does this help with TypeScript type safety?

Yes, it actively flags excessive use of type assertions and 'any' types, encouraging the use of type guards and 'unknown' for safer, more robust implementations.

Frontend AI Developer Guide

Name: Frontend AI Developer Guide
Author: tundraray

bytundraray

•

Design Tools

Enforces production-ready standards and technical decision criteria for React and TypeScript development workflows.

This skill equips Claude with a comprehensive framework for frontend engineering excellence, focusing on React and TypeScript best practices. It provides automated guidance for identifying architectural anti-patterns, implementing the 'Rule of Three' for refactoring, and performing rigorous impact analysis before code changes. By integrating deep debugging techniques and standardized quality check workflows, it ensures that frontend implementations are maintainable, type-safe, and resilient to technical debt, making it indispensable for professional web development teams.

Key Features

01Standardized 'Rule of Three' criteria for intelligent code commonalization and refactoring.

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

031 GitHub stars

04Structured three-stage impact analysis workflow to prevent regression errors.

05Integrated quality check sequences for linting, type-checking, and automated testing.

06Root cause analysis guidance using the '5 Whys' debugging methodology.

Use Cases

01Refactoring complex React components to improve maintainability and state management.

02Debugging elusive UI bugs using structured root cause analysis and minimal reproduction environments.

03Performing quality assurance and impact analysis before merging major frontend architectural changes.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tundraray/overture frontend-ai-guide

For use in Claude.ai and ChatGPT

Download Skill