build-resource-pages

Name: build-resource-pages
Author: onvoyage-ai

30installs34forks

How to install build-resource-pages?

onvoyage-ai/gtm-engineer-skills/build-resource-pages

$npx -y skills add onvoyage-ai/gtm-engineer-skills --skill build-resource-pages

Installs into the current project.

Summary

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 listing

Files · 1

View on GitHub

SKILL.md

1	# Build Resource Pages
2
3	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.
4
5	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.
6
7	Your output is code, not content. The content already exists.
8
9	---
10
11	## Workflow
12
13	### Phase 1: Discover the Stack
14
15	Before writing any code, understand what you're working with.
16
17	1. Find the frontend codebase — ask the user for the path if not obvious
18	2. Identify the framework — Next.js, Astro, Nuxt, SvelteKit, Remix, plain React, etc.
19	3. Find the design system — look for:
20	- Theme files (CSS variables, Tailwind config, styled-components theme)
21	- Color tokens (backgrounds, accents, text colors)
22	- Typography (font families, sizes, weights, line heights)
23	- Existing components (cards, shells, layouts, navigation, buttons, CTAs)
24	- Spacing system (margin/padding tokens, section spacing patterns)
25	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
26	5. Find the routing pattern — file-based routing, dynamic routes, or manual route config
27	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.
28
29	Report findings to the user before proceeding. Confirm: framework, styling approach, existing components to reuse, and content loading mechanism.
30
31	### Phase 2: Load the Content
32
33	1. Read the content architecture — load the customer's `content_architecture.md` from their workspace folder
34	2. Read the markdown files — scan `workspace/[brand]/content/resources/` for all existing content across learn/, guides/, blog/, comparisons/
35	3. Map content to pages — build a manifest of: slug, title, section, subsection, date, keywords, description, and any relationships (supports, internal links)
36	4. Identify what to build — confirm with user which sections to implement (all, or a subset)
37
38	### Phase 3: Build the Resource Center
39
40	Implement in this order — each layer builds on the previous.
41
42	#### 1. Content Loading
43
44	Set up the mechanism to read markdown files with YAML frontmatter and render them as pages.
45
46	- Use the framework's native content approach (e.g., Next.js `fs` + gray-matter + remark, Astro content collections, Nuxt content module)
47	- Parse frontmatter into typed metadata
48	- Render markdown body to HTML with full element support (tables, blockquotes, code blocks, nested lists, bold/italic, inline links)
49	- Handle JSON-LD script blocks in the markdown (pass through to rendered output, don't strip)
50
51	#### 2. Layout Components
52
53	Build or extend these using the site's existing design system — never introduce a competing style system.
54
55	Resource Shell — page wrapper for all resource pages
56	- Consistent max-width, padding, and background matching the site
57	- Breadcrumb navigation: Home → Resources → [Section] → [Page Title]
58	- Optional sidebar for table of contents on long articles
59
60	Content Card — used on listing pages
61	- Thumbnail or category badge
62	- Title (2-3 lines max, truncated with CSS — no JavaScript truncation)
63	- Description excerpt from meta_description
64	- Section/subsection label
65	- Date (formatted consistently with the rest of the site)
66	- Hover state matching the site's existing interaction patterns
67
68	Article Layout — single content page
69	- H1 from title
70	- Date, author, and section label
71	- Rendered markdown body with proper heading hierarchy styling
72	- Direct answer blocks (blockquotes or lead paragraphs) styled with emphasis — larger font, accent border, or background tint matching the site's existing callout pattern
73	- Data tables styled for readability: alternating row backgrounds, proper cell padding, horizontal scroll on mobile
74	- FAQ sections styled with clear visual separation between questions and answers
75	- Related content section at the bottom (3 cards linking to same-section pages)
76	- Single CTA matching the site's existing CTA component
77
78	#### 3. Listing Pages
79
80	Build one listing page per section, plus a resource cen

People who liked this also viewed

6 picks

Type

build-resource-pages

30installs34forks

View on GitHub

How to install build-resource-pages?

onvoyage-ai/gtm-engineer-skills/build-resource-pages

$npx -y skills add onvoyage-ai/gtm-engineer-skills --skill build-resource-pages

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Build Resource Pages
2
3	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.
4
5	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.
6
7	Your output is code, not content. The content already exists.
8
9	---
10
11	## Workflow
12
13	### Phase 1: Discover the Stack
14
15	Before writing any code, understand what you're working with.
16
17	1. Find the frontend codebase — ask the user for the path if not obvious
18	2. Identify the framework — Next.js, Astro, Nuxt, SvelteKit, Remix, plain React, etc.
19	3. Find the design system — look for:
20	- Theme files (CSS variables, Tailwind config, styled-components theme)
21	- Color tokens (backgrounds, accents, text colors)
22	- Typography (font families, sizes, weights, line heights)
23	- Existing components (cards, shells, layouts, navigation, buttons, CTAs)
24	- Spacing system (margin/padding tokens, section spacing patterns)
25	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
26	5. Find the routing pattern — file-based routing, dynamic routes, or manual route config
27	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.
28
29	Report findings to the user before proceeding. Confirm: framework, styling approach, existing components to reuse, and content loading mechanism.
30
31	### Phase 2: Load the Content
32
33	1. Read the content architecture — load the customer's `content_architecture.md` from their workspace folder
34	2. Read the markdown files — scan `workspace/[brand]/content/resources/` for all existing content across learn/, guides/, blog/, comparisons/
35	3. Map content to pages — build a manifest of: slug, title, section, subsection, date, keywords, description, and any relationships (supports, internal links)
36	4. Identify what to build — confirm with user which sections to implement (all, or a subset)
37
38	### Phase 3: Build the Resource Center
39
40	Implement in this order — each layer builds on the previous.
41
42	#### 1. Content Loading
43
44	Set up the mechanism to read markdown files with YAML frontmatter and render them as pages.
45
46	- Use the framework's native content approach (e.g., Next.js `fs` + gray-matter + remark, Astro content collections, Nuxt content module)
47	- Parse frontmatter into typed metadata
48	- Render markdown body to HTML with full element support (tables, blockquotes, code blocks, nested lists, bold/italic, inline links)
49	- Handle JSON-LD script blocks in the markdown (pass through to rendered output, don't strip)
50
51	#### 2. Layout Components
52
53	Build or extend these using the site's existing design system — never introduce a competing style system.
54
55	Resource Shell — page wrapper for all resource pages
56	- Consistent max-width, padding, and background matching the site
57	- Breadcrumb navigation: Home → Resources → [Section] → [Page Title]
58	- Optional sidebar for table of contents on long articles
59
60	Content Card — used on listing pages
61	- Thumbnail or category badge
62	- Title (2-3 lines max, truncated with CSS — no JavaScript truncation)
63	- Description excerpt from meta_description
64	- Section/subsection label
65	- Date (formatted consistently with the rest of the site)
66	- Hover state matching the site's existing interaction patterns
67
68	Article Layout — single content page
69	- H1 from title
70	- Date, author, and section label
71	- Rendered markdown body with proper heading hierarchy styling
72	- Direct answer blocks (blockquotes or lead paragraphs) styled with emphasis — larger font, accent border, or background tint matching the site's existing callout pattern
73	- Data tables styled for readability: alternating row backgrounds, proper cell padding, horizontal scroll on mobile
74	- FAQ sections styled with clear visual separation between questions and answers
75	- Related content section at the bottom (3 cards linking to same-section pages)
76	- Single CTA matching the site's existing CTA component
77
78	#### 3. Listing Pages
79
80	Build one listing page per section, plus a resource cen

People who liked this also viewed

6 picks

Type