Communitygithub.com

Gentle-Programming/gentle-ai-tui-design

Gatilho: design de UI de terminal, redesenho de TUI, aparência do Gentle Shell, IDE no terminal, barra lateral/barra de status, criticar TUI. Projete, critique e refine interfaces de terminal com prova visual.

O que é gentle-ai-tui-design?

Esta skill capacita agentes de IA (como Claude Code ou Codex) a projetar, revisar e refinar interfaces de usuário de terminal (TUIs) — especialmente para o ecossistema Gentle Shell. Ao contrário de ferramentas genéricas de UI web, ela segue regras rigorosas para garantir que as interfaces pareçam um IDE moderno dentro de um terminal: denso, calmo, focado no desenvolvedor e sem 'cosplay' retrô. A skill executa um 'loop visual': antes de qualquer alteração, captura o estado atual da TUI como PNG, aplica comandos como `critique`, `shape`, `distill` ou `polish`, e compara o antes e depois. Ela impõe fundamentos de design como hierarquia por peso e cor (não por linhas em branco), economia de informações (cada fato uma vez por tela) e renderização eficiente (sem I/O em caminhos de renderização). Os mockups devem ser escritos em grid monoespaçado com unidades `ch`, usando apenas cores fg/bg, estilos de fonte e glifos de caixa — garantindo que qualquer design seja implementável em terminal real. A skill entrega um relatório final com o comando executado, caminhos dos PNGs, problemas corrigidos com prioridade (P0-P3) e itens abertos.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Gentleman-Programming/gentle-shell/tree/HEAD/skills/tui-design

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Contrato de Ativação

Use para projetar, revisar ou refinar uma interface de terminal (painéis, trilhos, barras de status, cartões, prompts), especialmente o Gentle Shell. A sensação alvo é um IDE dentro de um terminal: denso, calmo, focado no desenvolvedor, nunca um disfarce de cromado retrô de TUI. Não para páginas web (use gentle-design).

Regras Rígidas

  • Nunca julgue uma interface de terminal a partir de código ou memória: capture-a (references/visual-loop.md) e veja o PNG antes e depois de cada alteração.
  • Leia references/terminal-craft.md antes de qualquer edição de UI; é o piso, não uma sugestão.
  • Modo de operação: familiaridade vence expressão. Use vocabulário de IDE (painéis, árvore, abas, barra de status, paleta de comandos); a marca reside na paleta, densidade e um movimento característico.
  • Cada linha custa. Hierarquia vem de função de cor, peso e alinhamento, nunca de linhas em branco ou caixas aninhadas.
  • Diga cada fato uma vez por tela. Dados mostrados no cabeçalho nunca se repetem em um painel.
  • Um comando, um alvo. Refinamento preserva o sistema; redesenho o substitui. Nunca polir um visual que será descartado.
  • Renderização deve ser barata: sem E/S ou recomputação em caminhos de renderização, cache chaveado em tudo que altera a saída (estilo, largura, tema).
  • Mockups (via gentle-design) devem ser expressáveis em terminal: grade de células monoespaçadas em unidades ch, apenas cores fg/bg, negrito/dim/itálico/sublinhado/riscado, desenho de caixas e glifos.

Portões de Decisão

PerguntaComandoCarregar
Nenhum contexto de produto/design aindadocumentreferences/design-doc.md
Nova superfície ou redesignshape, depois mockups, depois implementarreferences/commands.md
"Como está a aparência / o que está errado"critiquereferences/critique.md
Muito cheio, espaço desperdiçado, redundantedistill / layout / quieterreferences/commands.md
Plano, sem hierarquia, ilegíveltypeset / colorize / bolderreferences/commands.md
Casos extremos, terminais estreitos, texto longoharden / adaptreferences/commands.md
Passagem final antes do commitpolishreferences/commands.md

Etapas de Execução

  1. Carregue o contexto de DESIGN.md se o projeto tiver um; caso contrário, proponha document primeiro.
  2. Capture o estado atual com o loop visual nos tamanhos fornecidos (180x50 largo, 140 ponto de quebra, 80x24 estreito).
  3. Execute o comando escolhido contra um alvo nomeado; escreva as descobertas antes de alterar o código.
  4. Altere, recapture, compare com o PNG anterior e o briefing; itere no máximo 3 rodadas, depois relate.
  5. Termine cada comando de refinamento com as verificações polish e os testes focados do repositório (contagens de renderização, overflow).

Contrato de Saída

Retorne: alvo, comando executado, caminhos dos PNGs antes/depois, descobertas corrigidas com tags P0-P3, descobertas deixadas em aberto e verificações realizadas.

Referências

  • references/terminal-craft.md: regras básicas e anti-padrões de terminal.
  • references/commands.md: playbooks de comandos adaptados para terminais.
  • references/critique.md: rubrica de crítica e severidade com pontuação.
  • references/design-doc.md: formato de DESIGN.md para um produto de terminal.
  • references/visual-loop.md: harness de captura de tela e loop de comparação.
  • NOTICE.md: atribuição.

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

Gentleman-Programming/gentle-ai-issue-creation

Create and triage GitHub issues from repository evidence. Trigger: issue creation, bug reports, feature requests, or issue approval.

Gentleman-Programming/gentle-ai-judgment-day

Trigger: judgment day, judgement day, dual review, adversarial review, juzgar. Run explicit blind dual review with at most two scoped fix/re-judgment rounds.

Gentleman-Programming/gentle-ai-rdd-defect-workflow

Trigger: RDD, receipt-driven development, review authority, receipt/lineage, correction/recovery, delivery gate/kill switch, bounded review defects. Guide work.

Gentleman-Programming/gentle-ai-skill-creator

Trigger: /skill-creation, skill creation, skill creator, create skill, new skill. Create LLM-first skills with valid frontmatter.

Gentleman-Programming/gentle-ai-skill-improver

Trigger: improve skills, audit skills, refactor skills, skill quality. Audit and upgrade existing LLM-first skills.

Gentleman-Programming/gentle-ai-skill-registry

Trigger: update skills, skill registry, actualizar skills, after skill changes. Index available skills by trigger and path.

Gentleman-Programming/gentle-ai-work-unit-commits

Plan commits as reviewable work units. Trigger: implementation, commit splitting, chained PRs, or keeping tests and docs with code.

Gentleman-Programming/gentle-design

Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach, design system sync. Write self-contained HTML design directions under design/<slug>/.

Gentleman-Programming/release

Release gentle-pi through GitHub and npm. Trigger: release, publish, npm publish, GitHub release, version bump.

Habilidades Relacionadas