# 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. Use when this capability is needed.

- Skill: `tomevault-io/frontend` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/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

---
> Source: [neuron-one/GODMODE](https://github.com/neuron-one/GODMODE) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-22 -->