Refactor Code with Claude Code
Restructure and modernize codebases while preserving behavior
Restructure and modernize codebases while preserving behavior
60 artifacts found
Use this agent when you need modern CSS architecture design, performance optimization, or advanced styling patterns. This includes design systems, theming strategies, CSS-in-JS migrations, responsive layouts with Grid/Container Queries, and build optimization. Examples: <example>Context: Large application needs scalable theming system. user: "Implement a multi-brand theming architecture with CSS custom properties supporting light/dark modes" assistant: "I'll engage the css-architecture-specialist to design a token-based theming system with CSS layers for cascade management" <commentary>Complex theming requires architectural expertise in custom properties, cascade layers, and scalability patterns</commentary></example> <example>Context: Performance issues with 500KB CSS bundle. user: "Our CSS bundle is huge and causing slow initial paint. We're using styled-components everywhere" assistant: "I'll use the css-architecture-specialist to analyze bundle composition, implement critical CSS extraction, and evaluate zero-runtime alternatives" <commentary>CSS performance optimization requires deep understanding of build tools, runtime costs, and loading strategies</commentary></example> <example>Context: Implementing complex responsive layouts. user: "Build a dashboard with dynamic grid that adapts to container size, not just viewport" assistant: "I'll have the css-architecture-specialist implement Container Queries with CSS Grid for component-level responsive design" <commentary>Modern responsive patterns using Container Queries need specialized knowledge beyond traditional media queries</commentary></example> <example>Context: Micro-frontend style isolation needed. user: "Multiple teams' styles are conflicting in our micro-frontend setup" assistant: "I'll use the css-architecture-specialist to implement CSS Modules, Shadow DOM strategies, or CSS Layers for proper style encapsulation" <commentary>Micro-frontend CSS isolation requires architectural understanding of scoping mechanisms and build configurations</commentary></example> <example>Context: Migrating legacy CSS to modern architecture. user: "We have 10,000 lines of nested Sass with !important everywhere. Need to modernize without breaking production" assistant: "I'll engage the css-architecture-specialist to plan incremental migration using CSS Layers for specificity management and systematic refactoring" <commentary>Legacy CSS migration requires careful architectural planning to manage specificity and maintain backward compatibility</commentary></example>
npx ai-builder add agent jonza/css-architecture-specialistUse this agent when you need architectural guidance, design decisions, or implementation planning for complex features or refactoring efforts. Examples:\n\n- User: "I need to redesign how we handle timing for audio clips in the mixer"\n Assistant: "Let me use the senior-architect agent to analyze the current implementation and design an elegant solution."\n <Uses Task tool to launch senior-architect agent>\n\n- User: "We're getting inconsistent results from the LLM when generating creative scripts. How should we improve this?"\n Assistant: "This requires architectural thinking. I'll engage the senior-architect agent to review the current flow and propose a robust solution."\n <Uses Task tool to launch senior-architect agent>\n\n- User: "Should we add another voice provider or refactor how we handle voice selection?"\n Assistant: "That's an architectural decision. Let me use the senior-architect agent to evaluate both options against our codebase patterns."\n <Uses Task tool to launch senior-architect agent>\n\n- User: "The mixer timeline needs to become editable. What's the best approach?"\n Assistant: "I'll use the senior-architect agent to design a clean, maintainable solution for editable timelines."\n <Uses Task tool to launch senior-architect agent>
npx ai-builder add agent pangerc/senior-architectSystematic framework for resurrecting and modernizing legacy codebases through archaeology, resurrection, and rejuvenation phases. Activate on "legacy code", "inherited codebase", "no documentation", "technical debt", "resurrect", "modernize". NOT for greenfield projects or well-documented active codebases.
npx ai-builder add skill erichowens/code-necromancerSafely switches between TS-only types and Zod-inferred runtime validation with preflight checks.
npx ai-builder add agent marclove/zodใณใผใใใฉใผใใใใๅฎ่ก
npx ai-builder add command sayasaya8039/formatUse this agent when you need to refactor existing code to make it more concise, modular, and maintainable. This includes breaking down large functions, eliminating redundancy, improving code organization, extracting reusable components, and applying clean code principles. Perfect for code reviews, technical debt reduction, and modernizing legacy code.\n\nExamples:\n- <example>\n Context: The user has just written a large function and wants to refactor it.\n user: "I've implemented the user authentication logic but it's getting quite long"\n assistant: "I'll use the code-trimmer agent to help refactor this into more modular, maintainable code"\n <commentary>\n Since the user has bulky code that needs refactoring, use the code-trimmer agent to break it down into cleaner, more modular components.\n </commentary>\n</example>\n- <example>\n Context: The user is reviewing code and notices redundancy.\n user: "This component has a lot of repeated logic across different methods"\n assistant: "Let me invoke the code-trimmer agent to identify and eliminate the redundancy while maintaining functionality"\n <commentary>\n The user has identified code that could be more DRY (Don't Repeat Yourself), so the code-trimmer agent should be used to refactor it.\n </commentary>\n</example>
npx ai-builder add agent manutej/code-trimmerManage tsyringe DI container registration, scan injectable classes, detect missing registrations, validate injection patterns, and generate registration code. Use when registering repositories, fixing DI errors, or setting up new context (e.g., "Register ProductRepository", "Check DI setup").
npx ai-builder add skill moasadi/di-helperAnalyzes code context and suggests appropriate design patterns for the current language and task. Expert in design patterns across all 33 supported languages.
npx ai-builder add agent viperjuice/pattern-advisorExpert code refactoring specialist. Use proactively to extract types, remove unused code, and improve code quality. Focuses on type extraction, dead code elimination, and following best practices.
npx ai-builder add agent khaliqgant/refactor-cleanReduces code complexity without changing behavior. Removes, not adds.
npx ai-builder add agent jhousteau/refactoring-specialistExpert refactoring specialist mastering safe code transformation techniques and design pattern application. Specializes in improving code structure, reducing complexity, and enhancing maintainability while preserving behavior with focus on systematic, test-driven refactoring.
npx ai-builder add skill Tony363/agent-refactoring-specialist## Refactoring Strategy
npx ai-builder add command epastorc/refactorUse this agent when: (1) files or folders are about to be created, moved, or reorganized; (2) the project structure appears cluttered or inconsistent; (3) you need to validate that new components follow established organizational patterns; (4) conducting periodic reviews of project organization; (5) before committing changes that affect multiple files or directories.\n\nExamples:\n- User: "I need to add a new React component for user authentication"\n Assistant: "Let me use the project-structure-guardian agent to determine the optimal location and structure for this component."\n [Agent analyzes current structure and recommends: src/components/auth/UserAuth.tsx with supporting files]\n\n- User: "Can you create utility functions for data validation?"\n Assistant: "Before creating these utilities, I'll consult the project-structure-guardian agent to ensure proper organization."\n [Agent reviews existing utilities structure and ensures new files follow established patterns]\n\n- Assistant (proactive): "I notice we're about to create the fifth configuration file in the root directory. Let me use the project-structure-guardian agent to evaluate if we should establish a config/ directory instead."\n\n- User: "Move the API client code to a better location"\n Assistant: "I'll use the project-structure-guardian agent to analyze the current structure and recommend the most sustainable location for the API client."\n\n- Assistant (proactive after file creation): "I've just created several new test files. Let me use the project-structure-guardian agent to verify they're organized optimally and consistent with the project's testing structure.
npx ai-builder add agent yzori/project-structure-guardianFind best name
npx ai-builder add command stefansimik/fbnWrite idiomatic Python code with advanced features like decorators, generators, and async/await. Optimizes performance, implements design patterns, and ensures comprehensive testing. Use PROACTIVELY for Python refactoring, optimization, or complex Python features.
npx ai-builder add agent krzemienski/python-proApply private modules with public re-exports pattern for clean API design. Includes conditional visibility for docs and tests. Use when creating modules, organizing mod.rs files, or before creating commits.
npx ai-builder add skill r3bl-org/organize-modulesnpx ai-builder add command leedk0121/type-checkProvides Tamagui patterns for config v4, compiler optimization, styled context, and cross-platform styling. Must use when working with Tamagui projects (tamagui.config.ts, @tamagui imports).
npx ai-builder add skill 0xBigBoss/tamagui-best-practicesApply when improving code structure without changing behavior: reducing duplication, simplifying complexity, or improving readability.
npx ai-builder add skill CoderMariusz/refactoring-patterns