By tonone-ai
Generate shadcn-ui compatible color palettes tailored to industries like fintech, healthcare, or SaaS, with built-in light/dark mode support and WCAG AA accessibility compliance.
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub tonone-ai/tonone --plugin form-paletteUI/UX design intelligence. 107 styles, 127 palettes, 107 font pairings, 106 charts, 131 reasoning rules, 129 UX guidelines, 16 stacks (React, Next.js, Vue, Nuxt.js, Svelte, Astro, Angular, Remix, SolidJS, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Nuxt UI). 8 Python scripts: BM25 search, contrast checker, palette generator, token generator, type scale calculator, design system generator, UI auditor, CLI. Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, liquid glass, cyberpunk, spatial UI, data brutalism. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient, design tokens, contrast checker.
Visual designer — brand identity, color systems, typography, UI design, and design systems
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
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Tailwind v4 theming and shadcn/ui component installation, customisation, and recipes.
Craft polished user interfaces with layout grids, color systems, typography scales, responsive patterns, and visual hierarchy.
Design and build networking infrastructure — VPCs, subnets, DNS, load balancers, firewall rules. Use when asked to "set up networking", "VPC design", "configure DNS", "load balancer setup", "network architecture", or "firewall rules".
Generate onboarding documentation — what this project does, how to set up locally, where things live, key decisions, how to deploy. Written for day-one engineers who know nothing. Use when asked for "onboarding docs", "new engineer guide", "how to get started", or "developer setup".
Implement a reusable, accessible, typed component from a design spec. Use when asked to "create a component", "build a widget", "implement this design", or "reusable UI element".
Verify observability posture — audit monitoring coverage, find blind spots, prioritize gaps. Use when asked "is monitoring sufficient", "observability review", "are we covered", or "pre-launch monitoring check".
ML reconnaissance — inventory all models, pipelines, data sources, and monitoring. Use when asked "what ML do we have", "model inventory", or "ML assessment".