Web Skills: o mapa visual que todo dev web deveria ter como referência
por Fabricio Telles··design.app.br
O que é o Web Skills?
Não é uma skill para Claude ou Cursor. É algo diferente — e possivelmente mais fundamental. Web Skills é um mapa visual interativo criado por Andreas Mehlsen que organiza mais de 100 habilidades de desenvolvimento web em uma árvore de aprendizado navegável.
O projeto tem 7.5k stars no GitHub e cobre desde HTML básico até WebAssembly, passando por acessibilidade, Web Components, PWAs, algoritmos e bancos de dados. Cada habilidade tem links curados para os melhores recursos de aprendizado.
Por que incluir aqui?
Porque toda skill de design para IA precisa de fundamento. Se você usa Impeccable para tipografia mas não entende CSS Variables, o resultado vai ser superficial. Se usa Taste Skill para estética mas não sabe sobre acessibilidade, vai gerar interfaces bonitas que excluem pessoas.
Web Skills funciona como o mapa de pré-requisitos para todas as outras skills desta série.
Estrutura do conteúdo
O mapa é organizado em 8 grandes áreas:
| Área | Exemplos de habilidades |
|---|---|
| Fundamentals | HTML, CSS, JavaScript, DOM, Promises |
| Accessibility | Screen Readers, ARIA, Keyboard Navigation |
| Web Components | Custom Elements, Shadow DOM, Slots |
| Progressive Webapps | Service Workers, Push Notifications, Offline |
| Build Tools | NPM, Webpack, Babel, TypeScript |
| Frameworks | React, Vue, Angular, Svelte, Stencil |
| Testing | Unit, Integration, E2E, A/B Testing |
| Architecture | Design Patterns, SOLID, Functional Programming |
Cada habilidade tem entre 3 e 10 links curados — MDN, Google Devs, CSS Tricks, tutoriais interativos. O que salva o projeto é justamente essa curadoria. Não é uma lista aleatória de links — é uma sequência de aprendizado pensada.
Limitações
O projeto não é atualizado há 6 anos. Algumas referências estão desatualizadas (Snowpack, por exemplo, foi descontinuado). Faltam tecnologias modernas como Astro, Vite, Tailwind, e o ecossistema de IA. Mas os fundamentos — HTML semântico, CSS layout, JavaScript core, acessibilidade — continuam relevantes.
Como usar junto com skills de IA
Na prática, Web Skills funciona bem como checklist de fundamentos antes de adotar skills de design com IA. Se você não domina CSS Layout e Responsive Design, nenhuma skill vai compensar isso.
Fonte: github.com/andreasbm/web-skills | andreasbm.github.io/web-skills