hangsiahong/síntese-avançada-de-ui

O que síntese-avançada-de-ui faz?

MONTE, não gere. Uma habilidade do Codex que força a IA a construir UIs web premium usando componentes pré-construídos em vez de escrever do zero.

Visão Geral

Esta habilidade transforma a maneira como a IA cria interfaces web. Em vez de gerar código HTML/CSS/JS do zero, ela instrui o modelo a:

• Identificar componentes reutilizáveis de uma biblioteca existente (ex: shadcn/ui, Material UI, Tailwind UI) ou de um design system personalizado.
• Montar a UI combinando esses componentes como blocos de construção, passando props e configurando estilos por meio de variantes predefinidas.
• Evitar escrita manual de CSS ou estilos inline — tudo deve ser feito via componentes e classes utilitárias existentes.
• Garantir consistência visual seguindo as regras de espaçamento, tipografia e cores definidas no design system.

Como Usar

1. Inclua esta habilidade no seu arquivo SKILL.md ou configure-a via interface do Codex.
2. Defina qual biblioteca de componentes será usada (ex: shadcn/ui, Material UI, Tailwind UI).
3. Ao solicitar uma interface, descreva o layout desejado — a IA montará a solução usando componentes existentes.

Exemplo de Prompt

Crie um formulário de login com campo de email e senha, botão de submit e link para recuperação de senha.

A IA responderá montando algo como:

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { ForgotPasswordLink } from '@/components/auth/forgot-password-link'

export function LoginForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Login</CardTitle>
      </CardHeader>
      <CardContent>
        <form>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="[email protected]" />
          <Label htmlFor="password">Senha</Label>
          <Input id="password" type="password" />
          <Button type="submit">Entrar</Button>
          <ForgotPasswordLink />
        </form>
      </CardContent>
    </Card>
  )
}

Plataformas Suportadas

• Codex (principal)
• Claude Code
• Cursor
• Qualquer agente que suporte instruções via SKILL.md

Boas Práticas

• Defina uma biblioteca padrão no início da SKILL.md ou via prompt para que a IA saiba qual usar.
• Liste os componentes disponíveis (ou a localização deles) para ajudar a IA a fazer escolhas corretas.
• Use exemplos concretos no prompt para guiar a montagem.

Exemplo de Configuração

# .cursorrules ou similar
habilidade: hangsiahong/síntese-avançada-de-ui
biblioteca: shadcn/ui
componentes:
  - Card
  - Input
  - Button
  - Label
  - ForgotPasswordLink

Contribuição

Pull requests são bem-vindos. Certifique-se de que a habilidade permaneça agnóstica a frameworks, focando no princípio de montagem sobre geração.

Licença

MIT