Widget:ProjectLabel

<script> function appStart(){

 if(pageParams["page"]){
   mw.loader.using(['mediawiki.api', 'jquery']).then(()=>{
     new mw.Api().get({
         action: 'query',
         prop: 'revisions',
         rvprop: 'content',
         titles: pageParams["page"],
         format: 'json'
     }).done(function (pageData) {
         var pageId = Object.keys(pageData.query.pages)[0];
         var content = pageData.query.pages[pageId].revisions[0]['*'];
         var pageUrl = mw.util.getUrl(pageParams["page"]);
         var badges = [];

         const regex = /\[\[Category:(.*?)\]\]/gi;
         let cats = content.match(regex);
         cats = cats.map(match => /\[\[Category:(.*?)\]\]/i.exec(match)[1]);
         console.log(cats);

         cats.forEach(cat=>{
           makerSkills.forEach(skill=>{
             if(cat == skill.name) badges.push(skill.image);
           });
         });

         console.log(badges);
         badges.forEach(el=>{
           μ('+img',μ('.badgeBox')[0]).src = el;
         })
     });
   });
 }

}

if(!window.widgets) window.widgets = []; window.widgets.push(appStart); </script> <style>

1. projectLabel {

 position: relative;
 width:525px;
 height: 400px;
 --cc-badge-size: 55px;

}

1. projectLabel img{

 position: absolute;
 left: 0;
 top: 0;
 width:525px;
 height: 400px;

}

1. projectTitle{

 position: absolute;
 left: 18px;
 top: 18px;
 width: calc(525px - 36px);
 height: 78px;
 text-align: center;
 line-height: 78px;
 font-family: serif;
 font-size:48px;

}

.badgeBox {

 position: absolute; 
 left: 18px;
 top: 148px;
 width: 244px;
 height: 234px;
 background-color: rgba(0,255,0,.3);

}

.badges {

 display: inline-block;
 height: var(--cc-badge-size);
 width: auto;
 margin: 2px;

} </style>

 <img src="images/frames/projectLabelFrame.png"></img>

Test

   <img src="images/badges/crafts.png"></img>