Frontend & UI
pick-ui-library
Associa uma tarefa de frontend a uma única escolha de biblioteca, curada e com opinião.
O que é
Uma skill de consulta chamada explicitamente. Ela mapeia uma tarefa declarada para uma única biblioteca recomendada, a partir de uma tabela curada que cobre primitivos, movimento, gráficos, virtualização, estado e estilização.
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly i
Por que isso importa para design
- Uma recomendação por tarefa, então não sobra um cardápio de opções para discutir.
- Confere o package.json primeiro, então reaproveita o que o projeto já tem.
- Pega dropdowns e toasts feitos na mão e os troca por primitivos acessíveis.
O que cobre
- How to use this
- UI components and primitives
- Motion and visuals
- Charts
- State and styling
- Common mismatches to catch
Como instalar
pick-ui-library
-
Clone o repositório.
git clone https://github.com/emilkowalski/skills -
Aponte o Codex para o arquivo da skill.
skills/pick-ui-library/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Chame-a explicitamente; ela nunca dispara sozinha.
-
Descreva a tarefa, não o nome da biblioteca, algo como ‘preciso de toasts’.
-
Ela indica uma biblioteca, explica o uso e faz a integração.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.