By ComposioHQ
Build complex React UIs with Tailwind CSS, shadcn/ui components, state management, and routing, then bundle them into standalone HTML artifacts for direct use in Claude.ai.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub composiohq/awesome-claude-plugins --plugin artifacts-builderAnalyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and sends a personalized growth report.
Use this agent when code changes have been made and you need to write new tests, run existing tests, analyze failures, and fix them while maintaining test integrity. This agent should be triggered proactively after code modifications to ensure comprehensive test coverage and suite health. Examples:\n\n<example>\nContext: The user has just implemented a new feature or modified existing code.\nuser: "I've updated the user authentication logic to support OAuth"\nassistant: "I've successfully updated the authentication logic. Now let me run the test-writer-fixer agent to ensure all tests pass with these changes."\n<commentary>\nSince code changes were made, use the Task tool to launch the test-writer-fixer agent to run relevant tests and fix any failures.\n</commentary>\n</example>\n\n<example>\nContext: The user has refactored a module or changed function signatures.\nuser: "Please refactor this payment processing module to use async/await"\nassistant: "I've completed the refactoring to use async/await throughout the payment module."\n<function call omitted for brevity>\nassistant: "Now I'll use the test-writer-fixer agent to run the tests and fix any issues caused by the refactoring."\n<commentary>\nAfter refactoring code, proactively use the test-writer-fixer agent to ensure tests still pass.\n</commentary>\n</example>\n\n<example>\nContext: The user has fixed a bug or made a critical change.\nuser: "Fix the race condition in the data synchronization service"\nassistant: "I've identified and fixed the race condition by implementing proper locking mechanisms."\n<function call omitted for brevity>\nassistant: "Let me run the test-writer-fixer agent to verify the fix doesn't break existing functionality."\n<commentary>\nAfter bug fixes, use the test-writer-fixer agent to ensure the fix works and doesn't introduce regressions.\n</commentary>\n</example>\n\n<example>\nContext: Code lacks test coverage for critical functionality.\nuser: "Our payment processing module has no tests"\nassistant: "That's a critical gap. Let me use the test-writer-fixer agent to create comprehensive tests for the payment module including edge cases and error scenarios."\n<commentary>\nCritical modules without tests are high-risk areas that need immediate test coverage.\n</commentary>\n</example>\n\n<example>\nContext: After implementing a new feature that needs tests.\nuser: "I've added the social sharing functionality"\nassistant: "Great! The social sharing is implemented. Now let me use the test-writer-fixer agent to write tests that ensure this feature works correctly across different platforms."\n<commentary>\nNew features should always include comprehensive test coverage from the start.\n</commentary>\n</example>
Streamlines pull request creation by handling the entire workflow: creating a new branch, committing changes, formatting modified files with Biome, and submitting the PR.
Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues.
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples:\n\n<example>\nContext: Building a new user interface\nuser: "Create a dashboard for displaying user analytics"\nassistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface."\n<commentary>\nComplex UI components require frontend expertise for proper implementation and performance.\n</commentary>\n</example>\n\n<example>\nContext: Fixing UI/UX issues\nuser: "The mobile navigation is broken on small screens"\nassistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes."\n<commentary>\nResponsive design issues require deep understanding of CSS and mobile-first development.\n</commentary>\n</example>\n\n<example>\nContext: Optimizing frontend performance\nuser: "Our app feels sluggish when loading large datasets"\nassistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering."\n<commentary>\nFrontend performance requires expertise in React rendering, memoization, and data handling.\n</commentary>\n</example>
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
Tailwind v4 theming and shadcn/ui component installation, customisation, and recipes.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Builds production-grade UI. Tokens-first, anti-AI-slop aesthetics, design tokens enforced.
AI-powered generative UI with Thesys - create React components from natural language.
Web development tools including frontend design workflows