Run any Skill in Manus with one click

frontend-ux-chakra

Stars3

Forks0

UpdatedMarch 1, 2026 at 19:50

Use this skill when improving UX/UI in React frontend using Chakra UI, especially navigation clarity, operational dashboards, and accessible components for emergency workflows.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

nhmatsumoto

nhmatsumoto/sos_location

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	frontend-ux-chakra
description	Use this skill when improving UX/UI in React frontend using Chakra UI, especially navigation clarity, operational dashboards, and accessible components for emergency workflows.

Frontend UX Chakra

Quando usar

Pedidos para melhorar UX/UI.
Necessidade de design system consistente em páginas operacionais.
Refatorar telas com foco em rapidez de ação.

Workflow

Mapear jornada principal (ex.: abrir ocorrência, acionar equipe, concluir).
Criar shell com navegação clara (dashboard, mapa, boletins).
Implementar componentes Chakra:
- Card para KPI operacional.
- Input/Textarea/select para captura rápida.
- Table + Badge para status e prioridade.
Validar acessibilidade visual (contraste, estados e hierarquia).
Executar npm run lint e npm run build.

Padrões

Evitar telas super carregadas: separar contexto (KPI) de execução (CRUD).
Botões de ação imediata sempre visíveis.
Status semântico: aberto (vermelho), em ação (laranja), concluído (verde).

More from this repository

same repository

sos-location-orchestration

nhmatsumoto/sos_location

Use when translating SOS Location natural-language requests into a structured software-engineering plan, including domain language, specialist agents/skills, simulation flows, and AI refinement pipeline requirements.

2026-04-023

plateau-source-indexing

nhmatsumoto/sos_location

Use this skill when implementing or updating crawling/indexing of PLATEAU and geospatial portals, including source metadata registry and evidence artifacts.

2026-03-183

atlas-geodata-fusion

nhmatsumoto/sos_location

Use this skill to integrate Atlas-aligned geospatial sources (GSI, GeoSampa, INDE, OpenTopography, Earthdata) into SOS Location risk models and 3D scene pipelines.

2026-03-173

coastal-tsunami-modeling

nhmatsumoto/sos_location

Use this skill for coastal and tsunami scenario modeling, including tide/ocean sensor integration, wave ETA estimation, and evacuation map generation.

2026-03-173

multi-hazard-simulation-sdk

nhmatsumoto/sos_location

Use this skill when designing or implementing a reusable SDK for multi-disaster simulation (wildfire, flood, earthquake, tsunami) with scenario contracts and uncertainty handling.

2026-03-173

architecture-urban-infra

nhmatsumoto/sos_location

Use this skill for architecture and built-environment analysis focused on access, safety, and operational flow.

2026-03-033

name	frontend-ux-chakra
description	Use this skill when improving UX/UI in React frontend using Chakra UI, especially navigation clarity, operational dashboards, and accessible components for emergency workflows.

Frontend UX Chakra

Quando usar

Pedidos para melhorar UX/UI.
Necessidade de design system consistente em páginas operacionais.
Refatorar telas com foco em rapidez de ação.

Workflow

Mapear jornada principal (ex.: abrir ocorrência, acionar equipe, concluir).
Criar shell com navegação clara (dashboard, mapa, boletins).
Implementar componentes Chakra:
- Card para KPI operacional.
- Input/Textarea/select para captura rápida.
- Table + Badge para status e prioridade.
Validar acessibilidade visual (contraste, estados e hierarquia).
Executar npm run lint e npm run build.

Padrões

Evitar telas super carregadas: separar contexto (KPI) de execução (CRUD).
Botões de ação imediata sempre visíveis.
Status semântico: aberto (vermelho), em ação (laranja), concluído (verde).