solana-frontend-engineer

by solanabr

Install

I want to set up the "solana-frontend-engineer" agent in my project.
Repository: https://github.com/solanabr/solana-claude-config

Please read the repo to find the agent definition file, then:
1. Download it to the correct location (.claude/agents/ or project root)
2. Include any companion files or templates it references
3. Explain what the agent does and how to invoke it

Description

Use this agent when you need to create, design, or improve frontend interfaces for Solana dApps. This includes building wallet connection flows, transaction UX, token displays, NFT galleries, and any React/Next.js components that interact with the Solana blockchain. The agent specializes in modern 2026 design trends (liquid glass, calm UI), accessibility compliance (WCAG 2.2 AA), and performance optimization.\n\nExamples:\n\n<example>\nContext: User asks for a new component to display token balances.\nuser: "Create a component that shows my SOL balance with a nice animation"\nassistant: "I'll use the Task tool to launch the solana-frontend-engineer agent to design and implement a polished token balance component with proper accessibility and animations."\n<commentary>\nSince the user needs a Solana-specific UI component with animation, use the solana-frontend-engineer agent to ensure it follows 2026 design patterns, includes proper Framer Motion animations, and meets accessibility requirements.\n</commentary>\n</example>\n\n<example>\nContext: User needs wallet connection UI for their dApp.\nuser: "I need a wallet connect button for my Solana app"\nassistant: "Let me use the Task tool to launch the solana-frontend-engineer agent to create a comprehensive wallet connection component with proper UX states."\n<commentary>\nWallet connection is a core Solana dApp pattern. Use the solana-frontend-engineer agent to implement the WalletButton component with dropdown menu, copy address functionality, and proper loading/connected states.\n</commentary>\n</example>\n\n<example>\nContext: User is building a transaction confirmation flow.\nuser: "How should I handle the UI when a user submits a transaction?"\nassistant: "I'll use the Task tool to launch the solana-frontend-engineer agent to design a proper transaction flow with signing, confirming, success, and error states."\n<commentary>\nTransaction UX is critical for Solana dApps. Use the solana-frontend-engineer agent to implement AnimatePresence transitions, proper status indicators, and explorer links following the TransactionDialog pattern.\n</commentary>\n</example>\n\n<example>\nContext: User wants to improve accessibility of existing components.\nuser: "Can you review my form component for accessibility issues?"\nassistant: "I'll use the Task tool to launch the solana-frontend-engineer agent to audit and improve the accessibility of your form component."\n<commentary>\nAccessibility review requires deep knowledge of WCAG 2.2 AA requirements. Use the solana-frontend-engineer agent to ensure proper ARIA attributes, focus management, color contrast, and keyboard navigation.\n</commentary>\n</example>\n\n<example>\nContext: User needs help with styling and design system setup.\nuser: "Set up Tailwind 4.0 with a proper design system for my Solana app"\nassistant: "I'll use the Task tool to launch the solana-frontend-engineer agent to configure your Tailwind 4.0 @theme with spacing, typography, colors, and Solana brand integration."\n<commentary>\nDesign system setup requires knowledge of Tailwind 4.0's new @theme syntax and 2026 design trends. Use the solana-frontend-engineer agent to establish proper semantic color tokens, spacing scales, and typography.\n</commentary>\n</example>