Can I use it for backend code?

No, this skill is restricted to frontend and BFF (Backend-for-Frontend) layers. For pure backend projects in Go or TypeScript, use the ring:dev-refactor skill.

What is the Mandatory Gap Principle?

It is a non-negotiable rule where every divergence from defined standards must be tracked as a finding, ensuring that even low-severity debt is documented for future resolution.

What frameworks does this skill support?

This skill is specifically optimized for React and Next.js codebases, supporting both App Router and Pages Router configurations.

How does it identify what needs refactoring?

It compares your codebase against the Ring/Lerian standards (or your custom standards file) to identify every divergence, which is then logged as a mandatory finding.

Does this skill automatically modify my source code?

It primarily performs analysis and generates a task list (tasks.md). Implementation is typically handled in the next step by handing off those tasks to the dev-cycle-frontend skill.

Frontend Refactor & Modernization

Name: Frontend Refactor & Modernization
Author: LerianStudio

byLerianStudio

•

135

•

Design Tools

Analyzes and refactors React and Next.js codebases to align with enterprise-grade frontend standards and architecture patterns.

This skill automates the complex process of modernizing frontend projects by performing deep architectural analysis against the Ring Standards. It dispatches specialized AI agents to identify technical debt, accessibility gaps, and performance bottlenecks, transforming legacy React or Next.js codebases into clean, standard-compliant implementations. By enforcing the 'Mandatory Gap Principle,' it ensures every architectural divergence is tracked and converted into actionable refactoring tasks, providing a clear path from legacy code to modern best practices.

Key Features

01Mandatory gap tracking ensures 100% visibility into architectural debt

02Seamless handoff to development cycles for automated implementation

03Specialized agent orchestration for UI, BFF, and Core Frontend auditing

04Generation of visual change reports and 1:1 mapped refactoring tasks

05Automated standards-based analysis for React and Next.js projects

06135 GitHub stars

Use Cases

01Standardizing component architecture and directory structures across a team

02Performing automated frontend audits to identify critical accessibility or security risks

03Modernizing legacy Next.js applications to utilize App Router and Server Components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lerianstudio/ring dev-refactor-frontend

For use in Claude.ai and ChatGPT

Download Skill