name: admin-ux-modernization description: Use when improving the Chokobot admin operational flow, especially dashboard usability, process tracking, handoff clarity, table-to-detail journeys, action priority, and operator-facing workflow design in the modern Next.js admin.

Admin UX Modernization

Use this skill for work on the Chokobot admin when the problem is not only visual design, but operational usability: how operators scan, decide, and act across dashboard, operações, clientes, and encomendas.

Focus Areas

• frontend/src/app/
• frontend/src/components/
• snapshot-driven admin routes
• process cards, kanban, tables, filters, empty states, quick actions

Core Goals

• reduce operator friction
• improve scanability of urgent work
• clarify what needs human action versus bot follow-up
• shorten the path from signal to action
• preserve current business flow while improving the interface

Workflow

1. Identify the operational surface:

   • dashboard overview
   • operações follow-up
   • clientes lookup
   • encomendas management

2. Inspect these questions:

   • what is the most important action on this screen?
   • is urgency visually obvious?
   • can the operator tell bot, humano, and logística states apart quickly?
   • are filters and quick actions placed near the decision point?
   • are detail pages reachable in one obvious step?
   • are empty/error/loading states operationally useful?

3. Prioritize fixes in this order:

   • information hierarchy
   • urgent versus routine work separation
   • navigation/action clarity
   • consistency across cards, tables, badges, and forms
   • polish and motion

4. Prefer reusable patterns when the same operational idea appears in multiple screens.

Project Rules

• Do not redesign away from the current warm admin language without explicit request.
• Keep operators as the primary user, not stakeholders reviewing mockups.
• Prefer clarity and density over decorative spacing.
• Avoid flows that add clicks without improving confidence or speed.

Validation

Primary check:

• cd frontend && npm run build

Also verify:

• key admin journeys still exist in one or two obvious actions
• status/handoff distinctions remain clear
• mobile and narrow-width behavior still works for dense screens

Output Expectations

When using this skill, report:

• which operational surface was improved
• what friction or ambiguity was reduced
• whether action hierarchy or follow-up flow became clearer
• build/test result