nhmatsumoto/rescue-ui-system
skills/rescue-ui-system/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add nhmatsumoto/sos_location rescue-ui-systemInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 2:27 AM17.3s1 file scanned
SKILL.md
- name:
- rescue-ui-system
- description:
- 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.
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
- Definir jornada principal (abrir ocorrência, acionar equipe, concluir).
- Garantir barra de navegação com atalhos rápidos.
- Construir cards/KPIs com prioridade visual.
- Padronizar tabela/lista com badges e ações em 1 clique.
- Validar responsividade para operação em mobile de campo.
- Rodar
npm run lintenpm run build.
DoD
- Operador consegue registrar e despachar ocorrência em poucos cliques.
- Status da operação é compreensível sem leitura extensa.
Related Skills
nhmatsumoto/zustand-state-management
development
VerifiedTrustedCommunity
Use this skill for global/shared state in React using Zustand with simple stores, selectors, and predictable updates.
3SKILL.mdUpdated Apr 10, 2026
nhmatsumoto/web-react-typescript-zustand
development
VerifiedTrustedCommunity
Use this skill for React web apps with TypeScript, Zustand state management, and maintainable UI architecture.
3SKILL.mdUpdated Apr 10, 2026
nhmatsumoto/typescript-componentization
development
VerifiedTrustedCommunity
Use this skill when refactoring React screens into typed components and custom hooks, keeping UI clean and business logic isolated.
3SKILL.mdUpdated Apr 10, 2026
nhmatsumoto/supply-chain-operations
data-ai
VerifiedTrustedCommunity
Use this skill for supply chain planning, inventory reliability, and logistics coordination in operations.
3SKILL.mdUpdated Apr 10, 2026