# Rescue UI System > Use this skill when designing or refactoring emergency operations UI in React with a modern clean visual language, semantic rescue colors, and fast task-oriented navigation. - Skill: `tomevault-io/rescue-ui-system` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/rescue-ui-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/rescue-ui-system/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/rescue-ui-system --- # Rescue UI System ## Quando usar - Evolução de UX/UI para operação de resgate. - Padronização visual em dashboard, mapa e fluxos de ação rápida. ## Princípios visuais - Visual limpo com baixa carga cognitiva. - Semântica de risco: - `critical`: vermelho (incidente crítico) - `active`: laranja (equipe em ação) - `stable`: verde (resolvido) - `info`: azul (contexto/mapa) - Tipografia objetiva e hierarquia clara (KPI -> ação -> detalhe). ## Workflow 1. Definir jornada principal (abrir ocorrência, acionar equipe, concluir). 2. Garantir barra de navegação com atalhos rápidos. 3. Construir cards/KPIs com prioridade visual. 4. Padronizar tabela/lista com badges e ações em 1 clique. 5. Validar responsividade para operação em mobile de campo. 6. Rodar `npm run lint` e `npm run build`. ## DoD - Operador consegue registrar e despachar ocorrência em poucos cliques. - Status da operação é compreensível sem leitura extensa. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/nhmatsumoto) — claim your Tome and manage your conversions.