Skip to content
Development
Skill

/fec-refactoring-control

Use when behavior-preserving frontend refactoring focuses on conditional complexity, repeated branches, guards, special cases, or internal invariants, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

From plugin
frontend-craft
2156 skills14 agents11 commands5 hooks
+1
Install
$ npx -y skills add bovinphang/frontend-craft --skill fec-refactoring-control --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/fec-refactoring-control

Context preview

The summary Claude sees to decide when to auto-load this skill.

Use when behavior-preserving frontend refactoring focuses on conditional complexity, repeated branches, guards, special cases, or internal invariants, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

SKILL.md

fec-refactoring-control.SKILL.md
name: fec-refactoring-control
description: Use when behavior-preserving frontend refactoring focuses on conditional complexity, repeated branches, guards, special cases, or internal invariants, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

Conditional Logic Refactorings

Overview

Use this family after evidence identifies a fitting structural transformation. Apply one primary technique at a time and verify immediately.

Procedure

1. Confirm the selected technique and its preconditions in [Conditional Logic Refactorings](references/conditional-refactorings.md). 2. Record affected behavior and a diff budget. 3. Apply only the selected technique's smallest viable step. 4. Verify the step before composing another transformation. 5. Stop and reassess when public contracts, lifecycle, state identity, or actual scope exceed expectations.

Quick Reference

The family reference contains 6 canonical techniques with intent, signals, avoid conditions, mechanics, preservation checkpoints, smell links, composition hints, JavaScript/TypeScript notes, React/Vue notes, adaptation guidance, and original frontend examples.

Common Mistakes

  • Choosing a technique by name without checking its preconditions.
  • Combining several structural intentions in one diff.
  • Assuming a classical class-based form is mandatory in modern frontend code.
  • Treating passing tests as proof when the relevant behavior is not covered.
Read more
Ships withfrontend-craft

frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.

Get the whole plugin

Other skills on frontend-craft.