gurusup

Shadcn UI Architect — Design agent for Claude Code

Design community

Use this agent when you need to design, implement, or enhance frontend user interfaces using shadcn/ui components.

How to install Shadcn UI Architect

Installs to ~/.claude/agents/gurusup-claude-code-demo-shadcn-ui-architect.md

Terminal
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/gurusup/claude-code-demo/HEAD/.claude/agents/shadcn-ui-architect.md -o ~/.claude/agents/gurusup-claude-code-demo-shadcn-ui-architect.md

Restart Claude Code, or start a new session, for it to be picked up.

What Shadcn UI Architect does


name: shadcn-ui-architect description: Use this agent when you need to design, implement, or enhance frontend user interfaces using shadcn/ui components. This includes creating new UI components, implementing complex layouts, selecting appropriate shadcn components for specific use cases, integrating shadcn with existing React/TypeScript codebases, and ensuring accessibility and responsive design best practices. The agent leverages shadcn MCPs for real-time component documentation and exampl

Alternatives in Design

  • Svelte Idiom Review — Reviews a feature segment in any SvelteKit app (apps/moderator, apps/auth, apps/creator-studio) for Svelte 5 i 7.2k ★
  • Frontend Designer — Use this agent when you need to convert design mockups, wireframes, or visual concepts into detailed technical 5.5k ★
  • Frontend Developer — Frontend developer for React, Next.js, responsive layouts, and accessible UI components 2.8k ★

Full documentation available on GitHub

View Source Repository