skills.rest
thinhnd028
thinhnd028COMMUNITY
Explore all skills by this author →
GitHub

refactor

Refactor selected code to align with project conventions in place.

Updated Mar 22, 2026
Search Tags:#typescript#frontend#refactor#code-quality#best-practices#code-cleanup
One-click install
npx skills add https://github.com/thinhnd028/expense-management-web --skill refactor-thinhnd028
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor
Source: https://github.com/thinhnd028/expense-management-web/tree/main/.claude/skills/refactor
Command: npx skills add https://github.com/thinhnd028/expense-management-web --skill refactor-thinhnd028

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you ensure selected code adheres to the project's conventions by performing targeted refactors, reducing manual edits and inconsistent patterns.

Core Features & Use Cases

  • Duplication removal: extract repeated logic into hooks (src/hooks/) or utilities (src/lib/utils.ts)
  • Component split: break large client components into smaller focused ones
  • Type safety improvements: use types from src/types/database.ts instead of inline any
  • Readability and safety: simplify conditional rendering and improve error handling
  • Supabase patterns: apply correct client context (server vs browser) and handle errors properly

Quick Start

Select code in your IDE and invoke this skill to refactor it according to the project's conventions.

Frequently Asked Questions about refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor TypeScript components to reduce code duplication?▼

Refactoring TypeScript components to reduce duplication involves extracting repeated logic into custom hooks or shared utility files. This skill identifies duplicated frontend patterns and moves them into appropriate project directories to improve maintainability without altering behavior.

What is the best way to split large React components into smaller focused ones?▼

Splitting large React components involves breaking them down into smaller, focused client components that respect existing project patterns. This skill performs component splitting automatically while ensuring context correctness and avoiding any functional behavior changes.

How do I improve type safety in TypeScript using database types instead of any?▼

Improving TypeScript type safety requires replacing inline any types with structured types from your database definitions. This skill scans selected code for type-safety gaps and applies the correct types from src/types/database.ts to enforce stricter typing.

Can I refactor Supabase client logic to fix server versus browser context issues?▼

Yes, refactoring Supabase client logic to fix server versus browser context is supported. This skill applies correct client context based on your environment and improves error handling patterns while maintaining the existing data-fetching behavior.

Does refactoring code with this skill change the existing application behavior?▼

No, refactoring code with this skill does not change existing application behavior. It applies changes directly in place to improve readability and safety while strictly respecting current patterns and avoiding any functional modifications.

Related Skills

Explore More Software Engineering Skills→
ccfccf

nx-workspace-patterns

Codify Nx workspace patterns for monorepo setup, boundary enforcement, and caching.

Community
Advanced
kennyolofsson23-netizenkennyolofsson23-netizen

qa

Run a full QA pass across backend, frontend, ML, and config changes.

Community
Advanced
drhazemibclcdrhazemibclc

kieran-typescript-reviewer

Review TypeScript code for type safety, naming conventions, and maintainability.

Community
Advanced
htn332805htn332805

refactor

Refactor code by extracting functions and renaming variables without altering behavior.

Community
Intermediate