push-page-cms — community push-page-cms, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing dynamic page integration with Content Management Systems (CMS) via pure JavaScript frameworks try to made framwork with pure js

shishiv30 shishiv30
[0]
[0]
Updated: 2/26/2026

Agent Capability Analysis

The push-page-cms skill by shishiv30 is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for Frontend Agents needing dynamic page integration with Content Management Systems (CMS) via pure JavaScript frameworks

Core Value

Empowers agents to push dynamic page data to CMS and update header links using pure JavaScript, facilitating seamless integration with server configurations and CMS page naming conventions, while leveraging route parameters like `GET /page/:key`

↓ Capabilities Granted for push-page-cms

Automating CMS page updates for new dynamic pages
Generating nav links in the header for newly added pages
Updating page data files in the `data/page` directory
Configuring server settings in `server/configs/page.js` for dynamic page fetching

! Prerequisites & Limits

  • Requires pure JavaScript environment
  • Dependent on server configuration files like `server/configs/page.js`
  • Limited to dynamic pages served at `/page/:key` route
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

push-page-cms

Install push-page-cms, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Push Page Data to CMS and Update Header Links

Use this workflow when you add a new dynamic page (served at /page/:key) and want its content in the CMS and a nav link in the header.

How dynamic pages work

ItemValue
RouteGET /page/:key (e.g. /page/index, /page/about)
Configserver/configs/page.js — fetches by key
CMS page namepage${key}.toLowerCase() (e.g. index → pageindex)
Page data filedata/page/<name>.js (e.g. data/page/index.js, data/page/ai-trend.js for key ai-trend) — default export: array of sections
Header comp keyheader — link shape: { id, text, path, order, parentId }; path for page = /page/<key>

Main app fetches: GET {cmsUrl}/api/pages/content/{pageName} and GET {cmsUrl}/api/comp/public/header.

Step 1: Post page data to CMS

Script (recommended): cms/scripts/seed-and-sync.js

Seeds local DB from data/page/*.js (pages from pagePath in data/page/header.js) and data/theme.js, then syncs to remote CMS.

bash
1# From repo root
2node cms/scripts/seed-and-sync.js [--local-only] [CMS_URL] [CMS_EMAIL] [CMS_PASSWORD]
  • --local-only — Seed local DB only.
  • With credentials — Seeds local, then syncs to remote via API.

Without script: Use CMS API (admin auth): POST /api/pages — body: { name, title, type: "json", data, meta, status }. Page name = key (e.g. index, ai-trend). Add page key to pagePath in data/page/header.js for seed-and-sync to include it.

If you use --update-header, the script:

  1. Reads current header comp (API or DB).
  2. Ensures there is a link with path: '/page/<key>'; adds one if missing (text = page title or key, order = after existing).
  3. Writes the updated links back to the comp header.

Manual update: Edit data/page/header.js to add a link, then run node cms/scripts/seed-and-sync.js to sync.

Checklist

  • Page data file exists (e.g. data/page<key>.js or data/page/<name>.js) with default export = section array.
  • Add page to pagePath in data/page/header.js, add data/page/<key>.js, run node cms/scripts/seed-and-sync.js.
  • Main app has CMS_URL set so it can fetch the page and header from CMS.

Reference

  • Dynamic page route and config: server/routes/page.js, server/configs/page.js
  • Page section order and helpers: helpers/pageData.js (arrayToPageData, PAGE_SECTIONS_ORDER)
  • Seed and sync: cms/scripts/seed-and-sync.js; header and pages: data/page/header.js
  • CMS pages API: cms/routes/pages.js (POST /api/pages, PUT /api/pages/:id)
  • CMS comp API: cms/routes/comp.js (GET /api/comp/public/:key, POST /api/comp)

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is push-page-cms?

Perfect for Frontend Agents needing dynamic page integration with Content Management Systems (CMS) via pure JavaScript frameworks try to made framwork with pure js

How do I install push-page-cms?

Run the command: npx killer-skills add shishiv30/pure/push-page-cms. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for push-page-cms?

Key use cases include: Automating CMS page updates for new dynamic pages, Generating nav links in the header for newly added pages, Updating page data files in the `data/page` directory, Configuring server settings in `server/configs/page.js` for dynamic page fetching.

Which IDEs are compatible with push-page-cms?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for push-page-cms?

Requires pure JavaScript environment. Dependent on server configuration files like `server/configs/page.js`. Limited to dynamic pages served at `/page/:key` route.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add shishiv30/pure/push-page-cms. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use push-page-cms immediately in the current project.

Related Skills

Looking for an alternative to push-page-cms or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI