# Sr Cardoso Frontend

> Frontend React/Vite/PWA do Sr Cardoso. Use quando editar paginas, componentes, hooks, fluxo de agendamento, painel admin, consumo de API REST e UX mobile-first.

- Skill: `majiayu000/sr-cardoso-frontend` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/sr-cardoso-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/sr-cardoso-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/sr-cardoso-frontend

---


# Sr Cardoso Frontend

## Overview
Executar tarefas no frontend web (cliente e admin) mantendo fluxo mobile-first, PT-BR e contratos com a API.

## Entradas e rotas
- Partir de `apps/web/src/App.tsx` (rotas) e `apps/web/src/main.tsx`.
- Fluxo cliente: `apps/web/src/pages/BookingPage.tsx`, `apps/web/src/pages/SuccessPage.tsx`, `apps/web/src/pages/CancelBookingPage.tsx`.
- Fluxo admin: paginas em `apps/web/src/pages/admin/*`.

## API e dados
- Usar `apps/web/src/lib/api.ts` para chamadas REST.
- Usar `apps/web/src/lib/api-compat.ts` apenas para compatibilidade legada.
- Nao usar Firebase SDK no frontend.

## Estado e storage
- Usar `apps/web/src/hooks/useBookingState.tsx` para estado do booking.
- Respeitar chaves de storage: `sr-cardoso-booking-state`, `sr_admin_token`, `sr_remembered_customer`.
- Usar `apps/web/src/hooks/useAuth.ts` para sessao admin.

## Constantes e branding
- Usar `apps/web/src/utils/constants.ts` para IDs, labels e timezone.
- Usar `apps/web/src/hooks/useBranding.ts` para logo e cache.

## UI e UX
- Manter strings em PT-BR.
- Manter timezone `America/Sao_Paulo`.
- Respeitar regras de horario e schedule do barbeiro.
- Manter layout admin em `apps/web/src/components/admin/AdminLayout.tsx`.
- Manter indicador offline em `apps/web/src/components/OfflineIndicator.tsx`.

## PWA
- Ajustar manifest e assets em `apps/web/vite.config.ts`.