skills.rest
joabeoliveira
joabeoliveiraCOMMUNITY
Explore all skills by this author →
Website𝕏@joabeantonioRJGitHub

UX/UI Gov — Compras Públicas

Standardize UX/UI patterns for Brazilian public procurement interfaces with PT-BR formatting.

Updated Mar 4, 2026
Search Tags:#ui#ux#procurement#government#data-table#pt-br#csv-export
One-click install
npx skills add https://github.com/joabeoliveira/skills --skill ux-ui-gov-compras-p-blicas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UX/UI Gov — Compras Públicas
Source: https://github.com/joabeoliveira/skills/tree/main/.skills/ux-ui-gov
Command: npx skills add https://github.com/joabeoliveira/skills --skill ux-ui-gov-compras-p-blicas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Brazilian public procurement interfaces often suffer from inconsistent UI, formatting, and data presentation across MVPs. This skill defines a cohesive set of UX/UI standards and components to ensure accessibility, PT-BR formatting, and predictable behavior in government-facing screens.

Core Features & Use Cases

  • PT-BR formatting utilities for money, dates, CNPJ/CPF, and numeric values to guarantee consistent displays.
  • Server-side pagination tables with sorting, filtering, and status badges to manage large government datasets (ARPs, empenhos, licitações, fornecedores, etc.).
  • Skeleton loaders, empty states, and export capabilities (CSV) to improve perceived performance and data portability in public procurement apps.

Quick Start

Install and adopt the UX/UI Gov standards across a new MVP by wiring in the provided utilities and table components to render procurement data in PT-BR with accessible components.

Frequently Asked Questions about UX/UI Gov — Compras Públicas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI for Brazilian government procurement screens?▼

To standardize UI for Brazilian government procurement screens, apply cohesive UX/UI patterns for ARPs, empenhos, and licitações. This ensures accessibility and consistent PT-BR formatting across MVPs and dashboards using vanilla HTML, CSS, and JS.

What is the best way to format CNPJ and BRL values in public procurement interfaces?▼

The best way to format CNPJ and BRL values in public procurement interfaces is using dedicated PT-BR formatting utilities. These guarantee consistent displays for money, dates, CPF, and numeric values across government-facing applications.

How do I display large government datasets like fornecedores without performance issues?▼

To display large government datasets without performance issues, use server-side pagination-ready tables. These components support sorting, filtering, and status badges to manage large procurement records efficiently.

Can I export government item tables to CSV using vanilla JavaScript?▼

Yes, you can export government item tables to CSV using vanilla JavaScript. The implementation includes data portability capabilities alongside skeleton loaders and empty states to improve perceived performance in procurement apps.

Do I need external dependencies to build accessible BR gov dashboards?▼

No, you do not need external dependencies to build accessible BR gov dashboards. The implementation uses vanilla HTML, CSS, and JS with minimal dependencies to ensure predictable behavior in government-facing screens.

Related Skills

Explore More Design & Creative Skills→
yangqiongyangqiong

Data Cleaning Skill

Cleans raw datasets by handling missing values, duplicates, and data types.

Community
Intermediate
PostHogPostHog
58

integration-astro-ssr

Integrate PostHog analytics into Astro server-rendered apps with API routes.

Official
Intermediate
Karanjot786Karanjot786
236

frontend-design

Translate design briefs into production-grade frontend interfaces with HTML/CSS/JS or React and Vue.

Community
Advanced
magic3007magic3007
10

frontend-design

Translate frontend requirements into production-ready UI with code samples.

Community
Advanced