Bootspring
HomeGet Started

Frontend Expert

The Frontend Expert agent specializes in modern frontend development, including React, Vue, Angular, and vanilla JavaScript.

Expertise Areas#

  • React/Next.js - Components, hooks, server components, app router
  • Vue/Nuxt - Composition API, Vuex/Pinia, Vue Router
  • TypeScript - Type safety, generics, utility types
  • Styling - Tailwind CSS, CSS Modules, Styled Components
  • State Management - React hooks, Redux, Zustand, Jotai
  • Accessibility - ARIA, keyboard navigation, screen readers
  • Performance - Code splitting, lazy loading, memoization

Usage Examples#

Building Components#

Use the frontend-expert agent to create a responsive card component with: - Image with lazy loading - Title and description - Action buttons - Hover effects

Response includes:

  • Accessible component code
  • TypeScript types
  • Responsive styling
  • Performance optimizations

State Management#

Use the frontend-expert agent to implement a shopping cart using Zustand.

Response includes:

  • Store setup
  • Actions and selectors
  • Persistence configuration
  • Usage examples

Form Handling#

Use the frontend-expert agent to build a multi-step form with validation using React Hook Form and Zod.

Response includes:

  • Form structure
  • Validation schemas
  • Step navigation
  • Error handling

Best Practices Applied#

The Frontend Expert always considers:

1. Accessibility (a11y)#

  • Semantic HTML elements
  • ARIA labels and roles
  • Keyboard navigation
  • Focus management
  • Color contrast

2. Performance#

  • Component memoization
  • Bundle size optimization
  • Lazy loading
  • Image optimization
  • Efficient re-renders

3. Type Safety#

  • TypeScript interfaces
  • Prop types
  • Generic components
  • Type inference

4. Testing#

  • Component testing patterns
  • Mock strategies
  • Accessibility testing
  • Snapshot testing

Common Patterns#

Compound Components#

1// Usage 2<Tabs> 3 <Tabs.List> 4 <Tabs.Tab>Tab 1</Tabs.Tab> 5 <Tabs.Tab>Tab 2</Tabs.Tab> 6 </Tabs.List> 7 <Tabs.Panels> 8 <Tabs.Panel>Content 1</Tabs.Panel> 9 <Tabs.Panel>Content 2</Tabs.Panel> 10 </Tabs.Panels> 11</Tabs>

Custom Hooks#

1// useDebounce hook 2const debouncedValue = useDebounce(searchTerm, 300); 3 4// useLocalStorage hook 5const [theme, setTheme] = useLocalStorage('theme', 'dark'); 6 7// useMediaQuery hook 8const isMobile = useMediaQuery('(max-width: 768px)');

Render Props#

1<DataFetcher url="/api/users"> 2 {({ data, loading, error }) => ( 3 loading ? <Spinner /> : 4 error ? <Error message={error} /> : 5 <UserList users={data} /> 6 )} 7</DataFetcher>

Framework-Specific Guidance#

React/Next.js#

  • Server vs Client Components
  • App Router patterns
  • Data fetching strategies
  • Streaming and Suspense

Vue/Nuxt#

  • Composition API patterns
  • Reactive state management
  • Auto-imports
  • SSR considerations

Sample Prompts#

TaskPrompt
Modal dialog"Create an accessible modal dialog with focus trap"
Data table"Build a sortable, filterable data table with pagination"
Auth flow"Implement a login form with social auth buttons"
Dashboard"Create a responsive dashboard layout with sidebar"
Theme toggle"Add dark/light mode with system preference detection"

Configuration#

Customize the Frontend Expert in your config:

1// bootspring.config.js 2module.exports = { 3 agents: { 4 customInstructions: { 5 'frontend-expert': ` 6 - Always use TypeScript with strict mode 7 - Use Tailwind CSS for styling 8 - Prefer functional components 9 - Include JSDoc comments 10 - Follow WAI-ARIA guidelines 11 `, 12 }, 13 }, 14 skills: { 15 preferred: { 16 components: 'functional', 17 styling: 'tailwind', 18 state: 'hooks', 19 }, 20 }, 21};

Related Agents#