fec-accessibility-chec…
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels,…
@bovinphangInstall SkillDevelopment
Skill
/fec-refactoring-functions
Use when behavior-preserving frontend refactoring focuses on function structure, naming, parameters, shared context, or phase boundaries, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.
Claude Code
$ npx -y skills add bovinphang/frontend-craft --skill fec-refactoring-functions --agent claude-code
Codex
$ npx skills add bovinphang/frontend-craft --skill fec-refactoring-functions -a codex -y
Cursor
$ npx skills add bovinphang/frontend-craft --skill fec-refactoring-functions -a cursor -y
Gemini CLI
$ npx skills add bovinphang/frontend-craft --skill fec-refactoring-functions -a gemini-cli -y
GitHub Copilot
$ npx skills add bovinphang/frontend-craft --skill fec-refactoring-functions -a github-copilot -y
OpenCode
$ npx skills add bovinphang/frontend-craft --skill fec-refactoring-functions -a opencode -y
Windsurf
$ npx skills add bovinphang/frontend-craft --skill fec-refactoring-functions -a windsurf -y
SKILL.md
fec-refactoring-functions.SKILL.mdname: fec-refactoring-functions
description: Use when behavior-preserving frontend refactoring focuses on function structure, naming, parameters, shared context, or phase boundaries, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.
Function 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 [Function Refactorings](references/function-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 11 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
name: fec-refactoring-functions description: Use when behavior-preserving frontend refactoring focuses on function structure, naming, parameters, shared context, or phase boundaries, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.
Function 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 [Function Refactorings](references/function-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 11 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.
Stats
23
Stars
3
Forks
Active
Maintenance
TypeScript
Language
MIT
License
Last commit
Created
Ships withfrontend-craft
frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
2256 skills14 agents6 MCP
Stars on GitHub
Momentum
- stars in total
- 22
Other skills on frontend-craft.
@bovinphangInstall Skillfec-alchemy
Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices…
@bovinphangInstall Skillfec-api-integration
Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client…
@bovinphangInstall Skillfec-backend-requiremen…
Use when frontend work needs to communicate data, action, state, permission, validation, or business-rule needs to backend teams…
@bovinphangInstall Skillfec-browser-storage
Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client…
@bovinphangInstall Skillfec-canvas-threejs
Use when building or reviewing Canvas 2D, Three.js/WebGL, React Three Fiber, GLSL shaders, ShaderToy-to-WebGL adaptation, 2D/3D…
@bovinphangInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about fec-refactoring-functions.
- Which coding agents can use fec-refactoring-functions?
- fec-refactoring-functions installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.