hcc-frontend-ai-toolkit

Use this agent when you want to safely remove a TypeScript/JavaScript file and clean up any orphaned dependencies that will become unused after the deletion. Examples: <example>Context: User wants to remove a component file and clean up unused dependencies. user: 'I want to remove src/components/OldButton.tsx' assistant: 'I'll use the dependency-cleanup-agent to analyze dependencies and find orphaned files before removal.' <commentary>The user wants to remove a specific file, so use the dependency-cleanup-agent to perform recursive dependency analysis and safe cleanup.</commentary></example> <example>Context: User is refactoring and wants to clean up unused utility files. user: 'Can you help me remove src/utils/deprecated-helper.ts and clean up any files that become orphaned?' assistant: 'I'll use the dependency-cleanup-agent to perform a comprehensive dependency analysis and cleanup.' <commentary>This is exactly the use case for the dependency-cleanup-agent - removing files and cleaning up orphaned dependencies.</commentary></example>

Simple greeting agent to verify installation and functionality of the HCC Frontend AI Toolkit plugin

Expert in creating PatternFly React components for forms, layouts, navigation, modals, and general UI elements. Use for non-data-display components like forms, buttons, modals, cards, navigation, etc. For data tables/lists, use patternfly-dataview-specialist instead.

Use this agent when you need to apply PatternFly (PF) CSS utility classes to React components and JSX elements. Examples: (1) Styling components - user: 'I need to add padding and margin to this div', assistant: 'Let me use the patternfly-css-utility-specialist to apply the appropriate PF utility classes', (2) Layout assistance - user: 'How do I make this flex container with proper spacing?', assistant: 'I'll use the patternfly-css-utility-specialist to apply PF flex and spacing utilities', (3) Component styling - user: 'I want to style this Button with proper PF spacing and colors', assistant: 'I'll use the patternfly-css-utility-specialist to apply the correct PF utility classes'

Expert in PatternFly DataView components for data display. Use this agent exclusively for implementing tables, lists, and data grids using @patternfly/react-data-view. Specializes in DataView, DataViewTable, DataViewFilters, pagination, selection, and sorting patterns.

Use this agent when you need to scan React + PatternFly projects for code quality anti-patterns and technical debt. Examples: <example>Context: The user has just completed a feature implementation and wants to review the codebase for quality issues before merging. user: 'I just finished implementing the user dashboard component. Can you scan the recent changes for any code quality issues?' assistant: 'I'll use the react-patternfly-code-quality-scanner agent to analyze your recent code for anti-patterns and quality issues.' <commentary>Since the user wants to review code quality after implementation, use the react-patternfly-code-quality-scanner agent to scan for anti-patterns.</commentary></example> <example>Context: The user is preparing for a code review and wants to proactively identify refactoring opportunities. user: 'Before submitting this PR, I want to make sure I'm not introducing any anti-patterns' assistant: 'Let me scan your code with the react-patternfly-code-quality-scanner agent to identify any potential anti-patterns or quality issues.' <commentary>Since the user wants to proactively check for code quality issues, use the scanning agent to analyze the codebase.</commentary></example>

Expert in creating Storybook stories for React components with comprehensive testing, following strict component documentation, user interaction testing, play functions, feature flag handling, and story organization standards. Enforces critical rules for .stories.tsx files including proper imports, query patterns, API testing with MSW spies, and React-Data-View patterns.

Use this agent when you need to analyze and refine TypeScript types in a specific file, particularly to replace 'any', 'unknown', or type assertions with proper, specific types. Examples: <example>Context: User wants to improve type safety in a component file that has several 'any' types. user: 'Can you look at src/components/UserCard.tsx and help me fix the type issues?' assistant: 'I'll use the typescript-type-refiner agent to analyze that file and systematically replace wildcards with proper types.' <commentary>The user is asking for TypeScript type refinement in a specific file, which is exactly what this agent is designed for.</commentary></example> <example>Context: User notices their API response handler uses 'unknown' and wants better typing. user: 'The API handler in utils/api.ts has some unknown types that need to be refined' assistant: 'Let me call the typescript-type-refiner agent to analyze the API handler and determine the proper types based on usage patterns.' <commentary>This involves analyzing unknown types and replacing them with specific types based on how the data is used.</commentary></example>

Use this agent when you need to write unit tests for JavaScript/TypeScript code that doesn't require DOM manipulation. This includes pure functions, utilities, React hooks, and business logic. Use this agent AFTER writing or modifying code that falls into these categories. Examples: <example>Context: User has written a utility function for data transformation. user: "I just wrote a utility function to format currency values. Can you review and test it?" assistant: "I'll use the unit-test-writer agent to create comprehensive unit tests for your currency formatting function, focusing on edge cases and core functionality."</example> <example>Context: User has implemented a custom React hook for form validation. user: "Here's my useFormValidation hook. I need tests for it." assistant: "I'll use the unit-test-writer agent to write unit tests for your React hook, including tests for state changes and validation scenarios."</example> <example>Context: User has written business logic functions. user: "I've implemented the shopping cart calculation logic. Time to add tests." assistant: "Let me use the unit-test-writer agent to create focused unit tests for your shopping cart calculations, ensuring edge cases are covered."</example>