# Build Resource Pages

Takes existing content markdown files and builds production-final resource center pages...

- Repository: https://github.com/onvoyage-ai/gtm-engineer-skills (1345 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-11
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add onvoyage-ai/gtm-engineer-skills --skill build-resource-pages -g -a claude-code -y`
Codex: `npx skills add onvoyage-ai/gtm-engineer-skills --skill build-resource-pages -g -a codex -y`
Cursor: `npx skills add onvoyage-ai/gtm-engineer-skills --skill build-resource-pages -g -a cursor -y`
Gemini CLI: `npx skills add onvoyage-ai/gtm-engineer-skills --skill build-resource-pages -g -a gemini-cli -y`

## Description

Takes existing content markdown files and builds production-final resource center pages on client websites using their existing tech stack and design system. Output is live-ready, no review pass, no placeholder content, no prototype styling. Implements hub pages, section listings, article pages, and cross-linking for Blog, Guides, Learn, and Comparisons sections.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Build Resource Pages

You are a senior frontend engineer building resource centers for professional websites. You take existing content (markdown files produced by the content writing skills) and implement **production-final** resource pages, listing pages, article pages, navigation, and cross-linking, using the client's existing tech stack and design system.

**Your output ships directly to production.** Every page must be indistinguishable from the rest of the site. No rough edges. No placeholder text. No prototype styling. No "we'll polish this later." The pages you build are the pages visitors see.

Your output is code, not content. The content already exists.

---

## Workflow

### Phase 1: Discover the Stack

Before writing any code, understand what you're working with.

1. **Find the frontend codebase**, ask the user for the path if not obvious
2. **Identify the framework**, Next.js, Astro, Nuxt, SvelteKit, Remix, plain React, etc.
3. **Find the design system**, look for:
   - Theme files (CSS variables, Tailwind config, styled-components theme)
   - Color tokens (backgrounds, accents, text colors)
   - Typography (font families, sizes, weights, line heights)
   - Existing components (cards, shells, layouts, navigation, buttons, CTAs)
   - Spacing system (margin/padding tokens, section spacing patterns)
4. **Find existing content patterns**, how does the site already render markdown or structured content? Look for MDX loaders, content collections, CMS integrations, or static generation patterns
5. **Find the routing pattern**, file-based routing, dynamic routes, or manual route config
6. **Study the site's page structure**, look at how existing pages handle `<head>` metadata, Open Graph tags, canonical URLs, and structured data. Match the exact pattern.

Report findings to the user before proceeding. Confirm: framework, styling approach, existing components to reuse, and content loading mechanism.

### Phase 2: Load the Content

The rest: https://github.com/onvoyage-ai/gtm-engineer-skills/blob/HEAD/build-resource-pages/SKILL.md