Stats
Actions
Available In
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
By ananddtyagi
Optimize UI/UX components for mobile-first experiences by analyzing and improving layouts for touch-friendliness, accessibility, performance, and design theme consistency in CSS, React Native, or Flutter projects.
Community-driven marketplace for Claude Code commands and plugins.
Add this marketplace to Claude Code:
/plugin marketplace add ananddtyagi/cc-marketplace
Then browse and install individual plugins (commands or agents):
/plugin
Install a specific command:
/plugin install lyra@cc-marketplace
Install a specific agent:
/plugin install accessibility-expert@cc-marketplace
Visit claudecodecommands.directory to:
Each plugin in this marketplace is independently installable:
/lyra, /audit, /ultrathink)Install only what you need - no bloat, full granular control!
This marketplace is automatically synced from the live database whenever commands are published or updated.
Individual commands may have their own licenses. See each command file for details.
Submit commands at claudecodecommands.directory/submit Submit agents at claudecodecommands.directory/submit-agent
Built with ❤️ by the Claude Code community
Uses power tools
Uses Bash, Write, or Edit tools
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 ananddtyagi/claude-code-marketplace --plugin mobile-ux-optimizerValidate and synchronize API contracts (OpenAPI, GraphQL) with implementation, detect breaking changes, and generate client code
ananddtyagiUse this agent when analyzing metrics, generating insights from data, creating performance reports, or making data-driven recommendations. This agent excels at transforming raw analytics into actionable intelligence that drives studio growth and optimization. Examples:\n\n<example>\nContext: Monthly performance review needed
ananddtyagiUse this agent when setting up CI/CD pipelines, configuring Docker containers, deploying applications to cloud platforms, setting up Kubernetes clusters, implementing infrastructure as code, or automating deployment workflows. Examples: <example>Context: User is setting up a new project and needs deployment automation. user: "I've built a FastAPI application and need to deploy it to production with proper CI/CD" assistant: "I'll use the deployment-engineer agent to set up a complete deployment pipeline with Docker, GitHub Actions, and production-ready configurations."</example> <example>Context: User mentions containerization or deployment issues. user: "Our deployment process is manual and error-prone. We need to automate it." assistant: "Let me use the deployment-engineer agent to design an automated CI/CD pipeline that eliminates manual steps and ensures reliable deployments."</example>
ananddtyagiUse this agent when developing native iOS or Android applications, implementing React Native features, or optimizing mobile performance. This agent specializes in creating smooth, native-feeling mobile experiences. Examples:\n\n<example>\nContext: Building a new mobile app\nuser: "Create a TikTok-style video feed for our app"\nassistant: "I'll build a performant video feed with smooth scrolling. Let me use the mobile-app-builder agent to implement native performance optimizations."\n<commentary>\nVideo feeds require careful mobile optimization for smooth scrolling and memory management.\n</commentary>\n</example>\n\n<example>\nContext: Implementing mobile-specific features\nuser: "Add push notifications and biometric authentication"\nassistant: "I'll implement native push notifications and Face ID/fingerprint auth. Let me use the mobile-app-builder agent to ensure proper platform integration."\n<commentary>\nNative features require platform-specific implementation and proper permissions handling.\n</commentary>\n</example>\n\n<example>\nContext: Cross-platform development\nuser: "We need this feature on both iOS and Android"\nassistant: "I'll implement it using React Native for code reuse. Let me use the mobile-app-builder agent to ensure native performance on both platforms."\n<commentary>\nCross-platform development requires balancing code reuse with platform-specific optimizations.\n</commentary>\n</example>
ananddtyagiReorganizes project structure by cleaning root clutter, creating logical folder hierarchies, and moving files to optimal locations. Tracks dependencies and fixes broken imports/paths. Use PROACTIVELY when project structure becomes unwieldy or needs architectural cleanup.
ananddtyagiUse this agent when you need to optimize UI/UX components or interfaces for mobile-first experiences, analyze existing design themes, or ensure mobile usability standards are met. Examples: <example>Context: User has created a desktop-focused component and needs it optimized for mobile. user: 'I've built this navigation component but it's not working well on mobile devices' assistant: 'Let me use the mobile-ux-optimizer agent to analyze and improve this component for mobile-first experience' <commentary>The user needs mobile optimization expertise, so use the mobile-ux-optimizer agent to provide specific mobile UX improvements.</commentary></example> <example>Context: User is implementing a new feature and wants to ensure it follows the existing design theme. user: 'I'm adding a new form component to the app, can you help make sure it matches our design system?' assistant: 'I'll use the mobile-ux-optimizer agent to ensure this form component aligns with your existing theme and mobile-first principles' <commentary>Since this involves both theme consistency and mobile optimization, the mobile-ux-optimizer agent is the right choice.</commentary></example>
ananddtyagiComprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
wshobsonUse this agent when developing native iOS or Android applications, implementing React Native features, or optimizing mobile performance. This agent specializes in creating smooth, native-feeling mobile experiences. Examples:\n\n<example>\nContext: Building a new mobile app\nuser: "Create a TikTok-style video feed for our app"\nassistant: "I'll build a performant video feed with smooth scrolling. Let me use the mobile-app-builder agent to implement native performance optimizations."\n<commentary>\nVideo feeds require careful mobile optimization for smooth scrolling and memory management.\n</commentary>\n</example>\n\n<example>\nContext: Implementing mobile-specific features\nuser: "Add push notifications and biometric authentication"\nassistant: "I'll implement native push notifications and Face ID/fingerprint auth. Let me use the mobile-app-builder agent to ensure proper platform integration."\n<commentary>\nNative features require platform-specific implementation and proper permissions handling.\n</commentary>\n</example>\n\n<example>\nContext: Cross-platform development\nuser: "We need this feature on both iOS and Android"\nassistant: "I'll implement it using React Native for code reuse. Let me use the mobile-app-builder agent to ensure native performance on both platforms."\n<commentary>\nCross-platform development requires balancing code reuse with platform-specific optimizations.\n</commentary>\n</example>
Use this agent when you need expert assistance with Flutter mobile development tasks, including code analysis, widget creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a Flutter app and faces issues with navigation. user: 'My Navigator.push isn't updating the UI correctly when moving to a new screen' assistant: 'Let me use the flutter-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a Flutter-specific navigation issue, use the flutter-dev agent to provide expert guidance on Navigator problems.</commentary></example> <example>Context: User wants to create a custom widget that aligns with their app's design system. user: 'I need to create a custom button widget that matches our app's design system' assistant: 'I'll use the flutter-dev agent to create a button widget that aligns with your existing codebase structure and design patterns' <commentary>The user needs a Flutter widget that follows existing patterns, so use the flutter-dev agent.</commentary></example>
ananddtyagiUse this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>
devsforgeComplete UI/UX design system for React Native & Next.js with 4 core skills
apexscaleai