Usando JSF Facelets com Primefaves

Estou fazendo um sistema para fixar meu conhecimentos dos diversos cursos que fiz aqui na Alura. Estou tenando gerar um Template com uso de Facelets.

_Template.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />

<title>Sistema Cartola do Gui</title>
<link rel="stylesheet" href="#{request.contextPath}/resources/css/geral.css" />
<script type="text/javascript" src="#{request.contextPath}/resources/js/jquery.min.js"></script>
</head>

<h:body>
    <header role="banner" class="cabecalhoPrincipal container">
        <h1 class="cabecalhoPrincipal-titulo">CARTOLA GUI</h1>

        <div id="navegacaoCabecalho" class="cabecalhoPrincipal-navegacao">
            <div class="cabecalhoPrincipal-categoriasEBusca" role="presentation">
                <nav role="navigation" aria-label=""
                    class="colecoesDaCDC">
                        <li class="colecoesDaCDC-colecaoItem"><a
                            href="https://www.casadocodigo.com.br/collections/todos"
                            class="colecoesDaCDC-colecaoLink"> Jogos </a></li>
                </nav>
            </div>
        </div>
    </header>
    <!-- Comeco da parte de conteudo -->
    <div id="page" class="ui-fluid">
        <div id="content">
            <ui:insert name="content">
                Content
            </ui:insert>
        </div>

        <div id="footer">
            <ui:insert name="footer">
                Rodapé
            </ui:insert>
        </div>

    </div>

</h:body>
</html>

Quando tento usar esse template em uma pagina com formulario, que utiliza componentes do primefaces, os componentes não funcionam com os efeitos e aparencia do Primefaces, parecem campos padrão.

Cadastro.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>


<ui:composition template="/resources/template/_layout.xhtml">
    <ui:define name="content">
        <h2>Cadastro de Jogadores</h2>
        <p:panelGrid columns="2" columnClasses="ui-grid-col-2,ui-grid-col-10"
            layout="grid" styleClass="ui-panelgrid-blank">
            <h:form id="formJogador" enctype="multipart/form-data">
                <h:messages />
                <p:panel header="Cadastro de Jogador de Futebol">
                    <p:panelGrid columns="2">

                        <h:outputLabel value="Nome Completo:" for="itJogador" />
                        <p:inputText id="itJogador"
                            value="#{jogadorBean.jogador.nomeJogador}" />

                        <h:outputLabel value="Apelido:" for="itApelido" />
                        <p:inputText id="itApelido" value="#{jogadorBean.jogador.apelido}" />

                        <h:outputLabel value="Data de Nascimento" />
                        <p:calendar locale="pt" id="data"
                            value="#{jogadorBean.jogador.dataNascimento.time}"
                            pattern="dd/MM/yyyy" mask="true" />

                        <h:outputLabel value="Estado:" for="soEstado" />
                        <p:selectOneMenu id="soEstado"
                            value="#{estadoProducer.estadoSelecionado}" required="true"
                            requiredMessage="Estado obrigatório" style="width:250px">
                            <p:ajax listener="#{estadoProducer.onEstadoChange}"
                                update="soCidade" />
                            <f:selectItem itemLabel="Selecione" itemValue=""
                                noSelectionOption="true" />
                            <f:selectItems value="#{estadoProducer.estados}" var="uf"
                                itemLabel="#{uf.nome}" itemValue="#{uf}" />
                        </p:selectOneMenu>

                        <h:outputLabel value="Cidade:" for="soCidade" />
                        <p:selectOneMenu id="soCidade"
                            value="#{jogadorBean.jogador.naturalidade}"
                            converter="cidadeConverter" required="true"
                            requiredMessage="Cidade obrigatório">
                            <f:selectItem itemLabel="Selecione" itemValue=""
                                noSelectionOption="true" />
                            <f:selectItems value="#{estadoProducer.cidades}" var="cid"
                                itemValue="#{cid}" itemLabel="#{cid.nome}" />
                        </p:selectOneMenu>

                        <h:outputLabel value="Pé:" for="soPE" />
                        <p:selectOneMenu id="soPE" value="#{jogadorBean.jogador.destresa}">
                            <f:selectItem itemLabel="Selecione" itemValue=""
                                noSelectionOption="true" />
                            <f:selectItems value="#{jogadorBean.destresas}" />
                        </p:selectOneMenu>

                        <h:outputLabel value="Posição:" for="soPosicao" />
                        <p:selectOneMenu id="soPosicao"
                            value="#{jogadorBean.jogador.posicaoPrimaria}">
                            <f:selectItem itemLabel="Selecione" itemValue=""
                                noSelectionOption="true" />
                            <f:selectItems value="#{jogadorBean.posicoes}" />
                        </p:selectOneMenu>

                        <h:outputLabel value="Posição Secundária:" for="soPosicaoSec" />
                        <p:selectOneMenu id="soPosicaoSec"
                            value="#{jogadorBean.jogador.posicaoSecundaria}">
                            <f:selectItem itemLabel="Selecione" itemValue=""
                                noSelectionOption="true" />
                            <f:selectItems value="#{jogadorBean.posicoes}" />
                        </p:selectOneMenu>

                        <h:outputLabel value="Foto" />
                        <h:inputFile value="#{jogadorBean.foto}" id="foto" />

                    </p:panelGrid>
                    <h:commandButton value="Salvar" action="#{jogadorBean.salvar}" />
                </p:panel>
            </h:form>
        </p:panelGrid>
    </ui:define>
</ui:composition>
</html>

Se eu tiro o composition e troco por h:body, funciona normalmente.

Chegou a hora de transformar