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
- Não responda apenas com base neste arquivo quando existir um arquivo de regras correspondente.
- Abra
SYSTEM_PROMPT.mdeprompts/style.mdantes de trabalho substancial de frontend UI. - Abra
rules/copywriting.mdsempre que estiver gerando, traduzindo ou reescrevendo texto visível de UI. - 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.
- 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.
- 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.
- 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.
- Não crie UI intencionalmente inutilizável.「糙但能用」vence sobre quebra aleatória.
- 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 qualidadeprompts/style.md- resumo de estilo compacto únicorules/philosophy.md- filosofia de design e postura históricarules/anti-modernism.md- prompt negativo para polimento modernorules/layout.md- orientação de layout com várias colunas, emoldurado, focado em anúnciosrules/spacing.md- orientação de espaçamento denso, inconsistente, remendado por fornecedorrules/micro-imperfections.md- orientação de imperfeição controlada de 0,1px-1pxrules/typography.md- pilhas de fontes de sistemas antigos, texto irregular, orientação de cabeçalho WordArtrules/colors.md- azul ROC, vermelho saturado, amarelo, prata, dourado barato, deriva da mesma corrules/buttons.md- tratamento de botões brilhantes, chanfrados, semelhantes ao Windows-XPrules/tables.md- tratamento de tabelas e grades administrativasrules/banners.md- banners empilhados, faixas de anúncio, superfícies semelhantes a tickerrules/imagery.md- tratamento de imagens comprimidas, com cortes estranhos, de baixo orçamentorules/copywriting.md- orientação de cópia de UI burocrática em Chinês TradicionalREADME.md- resumo do repositório.cursorruleseCLAUDE.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:
Readpara abrir os arquivos de prompt e regras correspondentesGlobpara resolver locais de arquivos em instalações globais de skill e cópias de repositórioGreppara 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:
- Fundamente as recomendações nos arquivos de regras, não no gosto pessoal.
- Prefira mudanças concretas de UI a adjetivos abstratos.
- Use Chinês Tradicional para comentários e explicações voltadas ao usuário quando apropriado.
- 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.
- Se usar uma biblioteca de design, resista à sua limpeza premium padrão. Substitua espaçamento, bordas, tipografia, cores e ritmo de componentes.
- 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:
- Este
SKILL.mdprincipal - roteamento, invariantes e disciplina global SYSTEM_PROMPT.md- postura estética canônica e padrão de qualidadeprompts/style.md- resumo de geração compacto para trabalho real de UIrules/copywriting.md- texto visível de UI e cópia em Chinês Tradicionalrules/*.md- regras visuais e de layout específicas de dimensão.cursorrules,CLAUDE.mde 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.