# Frontend

> React and Next.js frontend development. Components, hooks, state management, routing, Tailwind CSS styling. Don't use for React Native mobile or backend API development.

- Skill: `neuron-one/frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add neuron-one/frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/neuron-one/frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: neuron-one (https://skillmd.com/u/neuron-one)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/neuron-one/frontend

---


# Frontend Development

## React Patterns
- Functional components only (no class components)
- Custom hooks for shared logic
- Context API for global state, local state for component state
- Lazy loading for heavy components
- Error boundaries for graceful failures

## Component Structure
```
ComponentName/
  ├── index.tsx        # Main component
  ├── styles.css       # Styles (or Tailwind)
  └── types.ts         # TypeScript interfaces
```

## Styling
- Tailwind CSS as primary
- CSS Modules when Tailwind insufficient
- Mobile-first responsive design
- Design tokens for consistency

## Performance
- React.memo for expensive renders
- useMemo/useCallback where measurably beneficial
- Image optimization (lazy loading, proper formats)
- Code splitting with dynamic imports

## Accessibility
- Semantic HTML elements
- ARIA labels where needed
- Keyboard navigation support
- Color contrast compliance