Add hero buttons for agent skills

config.rb

@@ -163,6 +163,25 @@ def combine_packages(packages)
               }
       end
   end
+
+  # Set up skill pages
+  if @app.data.skills
+    @app.data.skills.each do |org, org_skills|
+      org_skills.each do |skill_name, skill_data|
+        if skill_data && skill_data.index
+          skill = skill_data.index
+          skill_path = "/#{org}/#{skill_name}/"
+          proxy "#{skill_path}index.html",
+                '/skill.template.html',
+                :content_type => 'text/html',
+                :layout => 'layout',
+                :locals => {
+                  :skill => skill
+                }
+        end
+      end
+    end
+  end
 end
 
 set :protocol, 'https://'
@@ -174,6 +193,7 @@ def combine_packages(packages)
 
 ignore '/package.template.html.erb'
 ignore '/author.template.html.erb'
+ignore '/skill.template.html.erb'
 ignore '/api/v1/package.template.json.erb'
 ignore '/api/v1/raw.json.erb'
 

data/featured-skills.json

@@ -0,0 +1,34 @@
+[
+    {
+        "org": "dbt-labs",
+        "skill": "migrating-dbt-core-to-fusion"
+    },
+    {
+        "org": "dbt-labs",
+        "skill": "building-dbt-semantic-layer"
+    },
+    {
+        "org": "dbt-labs",
+        "skill": "answering-natural-language-questions-with-dbt"
+    },
+    {
+        "org": "dbt-labs",
+        "skill": "adding-dbt-unit-test"
+    },
+    {
+        "org": "dbt-labs",
+        "skill": "configuring-dbt-mcp-server"
+    },
+    {
+        "org": "dbt-labs",
+        "skill": "fetching-dbt-docs"
+    },
+    {
+        "org": "dbt-labs",
+        "skill": "troubleshooting-dbt-job-errors"
+    },
+    {
+        "org": "dbt-labs",
+        "skill": "using-dbt-for-analytics-engineering"
+    }
+]

data/skills/dbt-labs/adding-dbt-unit-test/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "adding-dbt-unit-test",
+    "namespace": "dbt-labs",
+    "description": "Use when adding unit tests for a dbt model or practicing test-driven development (TDD) in dbt",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com/dbt-labs/dbt-agent-skills/tree/main/skills/adding-dbt-unit-test",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/adding-dbt-unit-test/SKILL.md"
+    }
+}

data/skills/dbt-labs/answering-natural-language-questions-with-dbt/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "answering-natural-language-questions-with-dbt",
+    "namespace": "dbt-labs",
+    "description": "Use when a user asks a business question that requires querying data",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com/dbt-labs/dbt-agent-skills/tree/main/skills/answering-natural-language-questions-with-dbt",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/answering-natural-language-questions-with-dbt/SKILL.md"
+    }
+}

data/skills/dbt-labs/building-dbt-semantic-layer/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "building-dbt-semantic-layer",
+    "namespace": "dbt-labs",
+    "description": "Use when creating or modifying dbt Semantic Layer components including semantic models, metrics, and dimensions leveraging MetricFlow.",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/building-dbt-semantic-layer",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/building-dbt-semantic-layer/SKILL.md"
+    }
+}

data/skills/dbt-labs/configuring-dbt-mcp-server/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "configuring-dbt-mcp-server",
+    "namespace": "dbt-labs",
+    "description": "Use when setting up, configuring, or troubleshooting the dbt MCP server",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com//dbt-agent-skills/refs/heads/main/skills/configuring-dbt-mcp-server",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/configuring-dbt-mcp-server/SKILL.md"
+    }
+}

data/skills/dbt-labs/fetching-dbt-docs/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "fetching-dbt-docs",
+    "namespace": "dbt-labs",
+    "description": "Use when fetching dbt documentation, looking up dbt features, or answering questions about dbt Cloud, dbt Core, or the dbt Semantic Layer",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com/dbt-labs/dbt-agent-skills/tree/main/skills/fetching-dbt-docs",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/fetching-dbt-docs/SKILL.md"
+    }
+}

data/skills/dbt-labs/migrating-dbt-core-to-fusion/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "migrating-dbt-core-to-fusion",
+    "namespace": "dbt-labs",
+    "description": "Use when migrating a dbt project from dbt Core to run on the Fusion engine.",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com/dbt-labs/dbt-agent-skills/tree/main/skills/migrating-dbt-core-to-fusion",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/migrating-dbt-core-to-fusion/SKILL.md"
+    }
+}

data/skills/dbt-labs/troubleshooting-dbt-job-errors/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "troubleshooting-dbt-job-errors",
+    "namespace": "dbt-labs",
+    "description": "Use when a dbt Cloud/platform job fails and you need to diagnose the root cause",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com/dbt-labs/dbt-agent-skills/tree/main/skills/troubleshooting-dbt-job-errors",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/troubleshooting-dbt-job-errors/SKILL.md"
+    }
+}

data/skills/dbt-labs/using-dbt-for-analytics-engineering/index.json

@@ -0,0 +1,10 @@
+{
+    "name": "using-dbt-for-analytics-engineering",
+    "namespace": "dbt-labs",
+    "description": "Use when doing any dbt work",
+    "_source": {
+        "type": "github",
+        "url": "https://github.com/dbt-labs/dbt-agent-skills/tree/main/skills/using-dbt-for-analytics-engineering",
+        "readme": "https://raw.githubusercontent.com/dbt-labs/dbt-agent-skills/refs/heads/main/skills/using-dbt-for-analytics-engineering/SKILL.md"
+    }
+}

source/index.html.erb

@@ -2,10 +2,19 @@
   <%= partial "nav" %>
   <section class="section ensemble center">
 	<div class="section-content section-content-small">
-      <h1 class="h0">Jumpstart your warehouse</h1>
+      <h1 class="h0">Extend dbt with Packages and Agent Skills</h1>
 	  <p class="text-large">
-        Use one of our community packages to refine the raw data in your
-        warehouse.
+        Use one of our community packages or Agent Skills to develop more effectively with dbt.
+	  </p>
+	  <div class="hero-buttons">
+	    <a href="/" class="btn btn-white btn-shadow btn-lg hero-btn active">
+	      Packages
+	    </a>
+	    <a href="/skills/" class="btn btn-white btn-shadow btn-lg hero-btn">
+	      <span class="new-badge">New!</span>
+	      Agent Skills
+	    </a>
+	  </div>
 	</div>
   </section>
 </header>

source/skill.template.html.erb

@@ -0,0 +1,96 @@
+<header class="header">
+  <%= partial "nav" %>
+  <section class="section white section-slim" style="padding-bottom:66px;">
+  </section>
+</header>
+
+<main class="main">
+  <section class="section white section-slim">
+    <div class="section-content">
+
+      <div class="package-header">
+
+        <!-- Left column: Skill info -->
+        <div class="package-info">
+          <div class="tile-body" style="box-shadow: none; overflow: visible">
+            <div class="tile-text">
+              <div class="package-title-row">
+                <h1><%= skill.name %></h1>
+              </div>
+              <em>
+                Created by
+                <a href="<%= site_url %>/<%= skill.namespace %>/"
+                   target="_self">
+                  <%= skill.namespace %>
+                </a>
+              </em><br/>
+              <% if skill._source && skill._source.url %>
+              <% source_url = skill._source.url %>
+              <% github_url = source_url.include?("/tree/") ? source_url.split("/tree/")[0] : source_url %>
+              <% url_parts = source_url.split("/") %>
+              <div class="github-link" style="height: 30px; margin-bottom: 0">
+                <a class="github-button"
+                   href="<%= github_url %>"
+                   data-size="large"
+                   data-show-count="true"
+                   aria-label="View the skill on GitHub"
+                   target="_blank">
+                  <i data-icon="star"></i>
+                  <%= url_parts[3] rescue '' %>/<%= url_parts[4] rescue '' %>
+                </a>
+              </div>
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <hr/>
+
+      <div class="row">
+        <div class="col-md-12">
+
+        <h3>About</h3>
+
+          <p>To install this skill, follow the installation instructions <a href="https://github.com/dbt-labs/dbt-agent-skills?tab=readme-ov-file#installation">here</a>. </p>
+          <% if skill._source && skill._source.url %>
+          <p>For more information, visit the <a href="<%= skill._source.url %>" target="_blank">skill repository on GitHub</a>.</p>
+          <% elsif skill._source && skill._source.readme %>
+          <p>For more information, see the <a href="<%= skill._source.readme %>" target="_blank">skill documentation</a>.</p>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </section>
+  <% if skill._source && skill._source.readme %>
+  <section class="section section-slim white offset" style="padding-top: 0">
+    <div class="section-content">
+      <div class="row">
+        <div class="col-md-12">
+          <h3>README</h3>
+          (<a href="<%= skill._source.readme %>" target="_blank">View on GitHub</a>)
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="col-md-12">
+          <% readme_base = skill._source.readme.split("/blob/")[0] rescue skill._source.url %>
+          <base href="<%= readme_base %>"
+                target="_blank">
+          <article id="readme" class='markdown-body'>
+            <div class="loading">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+  <script>
+    $.get('<%= skill._source.readme %>').done(function(data) {
+        document.getElementById('readme').innerHTML = marked.parse(data)
+    });
+  </script>
+  <% end %>
+</main>
+

source/skills.html.erb

@@ -0,0 +1,105 @@
+<header class="header">
+  <%= partial "nav" %>
+  <section class="section ensemble center">
+	<div class="section-content section-content-small">
+      <h1 class="h0">Extend dbt with Packages and Agent Skills</h1>
+	  <p class="text-large">
+        Use one of our community packages or Agent Skills to develop more effectively with dbt.
+	  </p>
+	  <div class="hero-buttons">
+	    <a href="/" class="btn btn-white btn-shadow btn-lg hero-btn">
+	      Packages
+	    </a>
+	    <a href="/skills/" class="btn btn-white btn-shadow btn-lg hero-btn active">
+	      <span class="new-badge">New!</span>
+	      Agent Skills
+	    </a>
+	  </div>
+	</div>
+  </section>
+</header>
+
+<main class="main">
+
+  <section class="section offset white">
+	<div class="section-content">
+      <div class="row">
+          <div class="col-md-12 center">
+              <h4 class="h4">Featured Agent Skills</h4>
+              <p style="margin-top: 16px; max-width: 800px; margin-left: auto; margin-right: auto;">
+                A curated collection of Agent Skills for working with dbt. These skills help AI agents understand and execute dbt workflows more effectively. <a href="https://github.com/dbt-labs/dbt-agent-skills/" target="_blank">Learn more</a>
+              </p>
+          </div>
+      </div>
+      <div class="tiles">
+        <% featured_skills_data = data['featured-skills'] || data.featured_skills rescue nil %>
+        <% if featured_skills_data && featured_skills_data.any? %>
+          <% skills_loaded = 0 %>
+          <% featured_skills_data.each do |feat| %>
+            <% org = feat['org'] %>
+            <% skill_name = feat['skill'] %>
+            <% 
+              # Access skill data - Middleman loads data/skills/org/name/index.json
+              skill_data = nil
+              begin
+                if data.skills && data.skills[org]
+                  skill_data = data.skills[org][skill_name]
+                end
+              rescue
+                skill_data = nil
+              end
+            %>
+            <% if skill_data && skill_data.index %>
+              <% skill = skill_data.index %>
+              <% skills_loaded += 1 %>
+              <a href="/<%= org %>/<%= skill_name %>/" class="tile">
+                <div class="tile-content">
+                  <div class="tile-body" style="padding: 30px 30px 30px 30px; position: relative;">
+                    <div class="tile-text">
+                      <h4 style="color: #3b3f43;font-size:1.2rem"><%= skill.name || skill['name'] || skill_name %></h4>
+                      <% if skill.description || skill['description'] %>
+                        <p style="color: #666; margin-top: 8px;"><%= skill.description || skill['description'] %></p>
+                      <% end %>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            <% end %>
+          <% end %>
+          <% if skills_loaded == 0 %>
+            <div class="tile">
+              <div class="tile-content">
+                <div class="tile-body" style="padding: 30px 30px 30px 30px; position: relative;">
+                  <div class="tile-text">
+                    <h4 style="color: #3b3f43;font-size:1.2rem">Coming Soon</h4>
+                    <p style="color: #666; margin-top: 8px;">Agent Skills will be available here soon.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        <% else %>
+          <div class="tile">
+            <div class="tile-content">
+              <div class="tile-body" style="padding: 30px 30px 30px 60px; position: relative;">
+                <div class="tile-graphic">
+                  <span style="font-size: 48px;">🤖</span>
+                </div>
+                <div class="tile-text" style="padding-top: 25px">
+                  <h4 style="color: #3b3f43;font-size:1.2rem">Coming Soon</h4>
+                  <p style="color: #666; margin-top: 8px;">Agent Skills will be available here soon.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <div class="row" style="margin-top: 40px;">
+        <div class="col-md-12 center">
+          <p>Want to contribute? Join the discussion in the community slack at <strong>#dbt-agent-skills</strong></p>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+