Communitygithub.com

maylogger/roc-aesthetic

Gere UIUX autênticos da era ROC (Taiwan)「華國美學」— densos, remendados, estética web legada ligeiramente feia com espaçamento caótico, energia de portal antigo e sinceridade de「能用就好」.

O que é roc-aesthetic?

Este skill capacita agentes de IA a gerar, modificar, revisar e diagnosticar estilos de frontend que evocam a autêntica「華國美學」(Estética da República da China) de Taiwan. Diferente de filtros nostálgicos ou geradores de UI quebrada aleatória, este skill trata-se de uma disciplina de design intencional: preservar estruturas densas e operacionais de informação, usar tabelas em vez de cards, introduzir pequenas inconsistências acumuladas sem prejudicar a usabilidade, e redigir cópias de UI em Chinês Tradicional burocrático sincero. Ele é ideal para criar interfaces que se assemelham a sistemas de informações públicas taiwaneses, portais antigos, páginas de anúncios de baixo orçamento, dashboards mantidos por fornecedores remendados e camadas visuais cívicas improvisadas. O skill oferece regras detalhadas para roteamento de intenções, carregamento de arquivos de regras específicos (layout, espaçamento, tipografia, cores, botões, tabelas, banners, imagens, cópia) e invariantes de estilo que garantem a autenticidade, como densidade sobre espaços em branco, bordas administrativas, fontes mistas de sistemas antigos e pequenas inconsistências. Ele rejeita explicitamente polimentos modernos de SaaS e minimalismo Apple, a menos que o usuário peça explicitamente, mantendo um equilíbrio entre「feio mas sincero e utilizável」. Suportado por regras de precedência claras e ferramentas read-only (Read, Glob, Grep), o skill se adapta a diversos ambientes de agente de codificação, como Claude Code, Cursor, Codex, entre outros.

Funciona com✓Claude Code~Codex CLI✓Cursor
npx skills add maylogger/roc-aesthetic

Perguntar na sua IA favorita

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

Documentação

Skill de UIUX da Estética ROC (華國美學)

roc-aesthetic continua sendo o ID interno do skill para roteamento e instalação.

Use este como ponto de entrada único para geração, modificação, revisão e diagnóstico de estilo de frontend da era ROC (Taiwan)「華國美學」.

Este skill é para agentes que precisam criar interfaces que pareçam sistemas de informações públicas taiwaneses, sites de portal antigos, páginas de anúncios de baixo orçamento, dashboards mantidos por fornecedores remendados e camadas visuais cívicas improvisadas.

Não é um filtro nostálgico, gerador de paródia ou máquina de UI quebrada aleatória. É uma disciplina de design:

  • preservar estruturas densas e operacionais de informação
  • escolher tabelas, molduras, barras laterais e seções com bordas antes de cards limpos
  • introduzir pequenas inconsistências acumuladas sem prejudicar a usabilidade
  • escrever Chinês Tradicional burocrático sincero quando for necessária cópia de UI
  • rejeitar polimento moderno de SaaS, a menos que o usuário peça explicitamente

Roteamento de Intenções

Classifique primeiro a solicitação do usuário, depois abra e siga o menor conjunto útil de arquivos de regras. Resolva arquivos com Glob para que o skill funcione quer esteja instalado globalmente ou usado a partir deste repositório. Não assuma um caminho absoluto.

Arquivos de entrada principais:

  • Qualquer geração, modificação ou revisão de frontend UI -> Glob **/SYSTEM_PROMPT.md, depois Glob **/prompts/style.md
  • Filosofia / por que isso não deve se tornar paródia -> Glob **/rules/philosophy.md
  • Antimodernismo / prompt negativo / remover polimento SaaS -> Glob **/rules/anti-modernism.md

Dimensões visuais e de interação:

  • Layout / estrutura da página / dashboard / portal / navegação -> Glob **/rules/layout.md
  • Espaçamento / densidade / ritmo estranho / lacunas inconsistentes -> Glob **/rules/spacing.md
  • Microimperfeições / desvio de 1px / sensação de legado remendado -> Glob **/rules/micro-imperfections.md
  • Tipografia / pilha de fontes / texto irregular / cabeçalho WordArt -> Glob **/rules/typography.md
  • Paleta de cores / azul ROC / amarelo de aviso / deriva da mesma cor -> Glob **/rules/colors.md
  • Botões / brilhantes / chanfrados / controles de sistema antigo -> Glob **/rules/buttons.md
  • Tabelas / grades administrativas / linhas densas -> Glob **/rules/tables.md
  • Banners / faixas de anúncio / ticker / cabeçalho de campanha -> Glob **/rules/banners.md
  • Imagens / baixa resolução / comprimidas / cortes estranhos -> Glob **/rules/imagery.md

Redação de textos:

  • Qualquer texto de UI, localização, rótulos, slogans, avisos, texto de CTA ou cópia em Chinês Tradicional -> Glob **/rules/copywriting.md

Regras de Roteamento

  1. Não responda apenas com base neste arquivo quando existir um arquivo de regras correspondente.
  2. Abra SYSTEM_PROMPT.md e prompts/style.md antes de trabalho substancial de frontend UI.
  3. Abra rules/copywriting.md sempre que estiver gerando, traduzindo ou reescrevendo texto visível de UI.
  4. Para tarefas combinadas de UI, leia apenas os arquivos de regras necessários para a superfície solicitada. Exemplo: uma página inicial de portal governamental com formulários deve usar layout, espaçamento, tipografia, cores, botões, tabelas, banners e copywriting.
  5. Se o usuário pedir uma revisão, diagnostique onde a UI ficou moderna demais, vazia demais, consistente demais ou irônica demais antes de sugerir mudanças.
  6. Se o usuário pedir para "limpar" algo, preserve a estética ROC a menos que ele peça explicitamente para sair do estilo. "Mais limpo" significa mais legível e operacional, não mais Vercel/Stripe/Linear.
  7. Se o usuário fornecer uma UI existente, modifique-a no local e intensifique o estilo por meio de escolhas locais: agrupamento mais denso, mais rótulos administrativos, estruturas semelhantes a tabelas, sutil desalinhamento, tratamento de cores legadas e cópia burocrática sincera.
  8. Não crie UI intencionalmente inutilizável.「糙但能用」vence sobre quebra aleatória.
  9. Não transforme a estética em paródia retrô da internet, cosplay governamental taiwanês de meme ou cópia de piada. O tom deve permanecer sincero.

Arquivos de Trabalho

Procure no diretório de trabalho por:

  • SYSTEM_PROMPT.md - prompt de sistema canônico e padrão de qualidade
  • prompts/style.md - resumo de estilo compacto único
  • rules/philosophy.md - filosofia de design e postura histórica
  • rules/anti-modernism.md - prompt negativo para polimento moderno
  • rules/layout.md - orientação de layout com várias colunas, emoldurado, focado em anúncios
  • rules/spacing.md - orientação de espaçamento denso, inconsistente, remendado por fornecedor
  • rules/micro-imperfections.md - orientação de imperfeição controlada de 0,1px-1px
  • rules/typography.md - pilhas de fontes de sistemas antigos, texto irregular, orientação de cabeçalho WordArt
  • rules/colors.md - azul ROC, vermelho saturado, amarelo, prata, dourado barato, deriva da mesma cor
  • rules/buttons.md - tratamento de botões brilhantes, chanfrados, semelhantes ao Windows-XP
  • rules/tables.md - tratamento de tabelas e grades administrativas
  • rules/banners.md - banners empilhados, faixas de anúncio, superfícies semelhantes a ticker
  • rules/imagery.md - tratamento de imagens comprimidas, com cortes estranhos, de baixo orçamento
  • rules/copywriting.md - orientação de cópia de UI burocrática em Chinês Tradicional
  • README.md - resumo do repositório
  • .cursorrules e CLAUDE.md - notas de integração do espaço de trabalho

Se um arquivo estiver faltando, continue com o arquivo de regras disponível mais próximo e informe qual orientação estava indisponível quando isso afetar materialmente o resultado.

Invariantes de Estilo

Toda UI da estética ROC deve preservar estas invariantes:

  • Densidade sobre espaços em branco.
  • Tabelas antes de cards.
  • Bordas administrativas, separadores cinza, caixas aninhadas e molduras de seção visíveis.
  • Layouts de várias colunas, barras laterais, navegação repetida e estrutura focada em anúncios.
  • Azul ROC, vermelho saturado, amarelo de aviso, gradientes prateados, cinza escuro, links ciano brilhantes e ocasional dourado barato.
  • Pilhas de fontes mistas de sistemas antigos: MingLiU, PMingLiU, DFKai-SB, Microsoft JhengHei, Arial, Tahoma.
  • Pequena inconsistência em preenchimento, margem, espessura da borda, estado de foco, ênfase de fonte e alinhamento.
  • Cópia de UI que parece formal, repetitiva, excessivamente explicativa e sinceramente orientada ao serviço.
  • Clareza operacional: os usuários ainda podem ler, clicar, escanear, enviar e concluir a tarefa.

Padrões Proibidos

A menos que o usuário peça explicitamente o contrário, não gere:

  • Minimalismo estilo Apple
  • Estéticas de página de destino Stripe, Linear, Vercel, fintech ou SaaS moderno
  • espaços em branco exagerados, seções hero arejadas e layouts de três cards de recursos
  • tipografia premium, direção de arte editorial luxuosa ou sistemas de design impecáveis
  • escalas de espaçamento perfeitamente uniformes de 4px/8px
  • dashboards monocromáticos suaves que parecem recém-financiados
  • UX quebrada aleatória, contraste ilegível ou interações falsamente desativadas
  • cópia de paródia, referências de meme ou piadas retrô sarcásticas

Em caso de dúvida, escolha「醜一點但真誠的官僚維運系統」(feio mas um sistema de manutenção burocrática sincero) sobre「漂亮但現代的新創介面」(interface inicial bonita mas moderna).

Superfície de Ferramentas

Este SKILL.md principal declara apenas as ferramentas somente leitura que usa:

  • Read para abrir os arquivos de prompt e regras correspondentes
  • Glob para resolver locais de arquivos em instalações globais de skill e cópias de repositório
  • Grep para localizar regras ou termos específicos quando o usuário pergunta sobre uma dimensão de design restrita

Este skill não precisa de permissões de escrita por si só. O agente de codificação anfitrião ainda pode editar arquivos do projeto quando a tarefa do usuário é implementação, mas o roteamento e a seleção de regras deste skill são somente leitura.

Disciplina de Saída

Ao aplicar este skill:

  1. Fundamente as recomendações nos arquivos de regras, não no gosto pessoal.
  2. Prefira mudanças concretas de UI a adjetivos abstratos.
  3. Use Chinês Tradicional para comentários e explicações voltadas ao usuário quando apropriado.
  4. Ao escrever código, mantenha a estrutura existente e o estilo do componente; injete a estética ROC por meio de layout, CSS, densidade de marcação, cópia e pequenas inconsistências controladas.
  5. Se usar uma biblioteca de design, resista à sua limpeza premium padrão. Substitua espaçamento, bordas, tipografia, cores e ritmo de componentes.
  6. Mantenha a acessibilidade e a usabilidade básica intactas, mesmo enquanto torna a interface visualmente estranha.

Precedência e Conflitos

Quando as orientações entrarem em conflito, use esta ordem:

  1. Este SKILL.md principal - roteamento, invariantes e disciplina global
  2. SYSTEM_PROMPT.md - postura estética canônica e padrão de qualidade
  3. prompts/style.md - resumo de geração compacto para trabalho real de UI
  4. rules/copywriting.md - texto visível de UI e cópia em Chinês Tradicional
  5. rules/*.md - regras visuais e de layout específicas de dimensão
  6. .cursorrules, CLAUDE.md e README do repositório - lembretes do espaço de trabalho e do projeto

Se uma regra tornasse a UI inutilizável, preserve a usabilidade e aplique um tratamento ROC mais suave. Se um padrão de componente moderno entrar em conflito com este skill, este skill vence, a menos que o usuário solicite explicitamente o estilo moderno.

Habilidades Relacionadas