create-static-page

Create static pages with file scaffolding, webpack config, and header links.

Updated Dec 17, 2022

Search Tags:#web development #frontend #code generation #scaffolding #ui framework #static pages

Ready to run

npx skills add https://github.com/shishiv30/pure --skill create-static-page

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-static-page
Source: https://github.com/shishiv30/pure/tree/main/.cursor/skills/create-static-page
Command: npx skills add https://github.com/shishiv30/pure --skill create-static-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of new static pages within the Pure UI project, streamlining the development process and ensuring consistency.

Core Features & Use Cases

Page Scaffolding: Generates necessary files and configurations for a new static page.
Content Structure Guidance: Provides a recommended structure for page content, including sections like Hero, Main Points, and Metrics.
Header Navigation Integration: Automatically adds links to the new page in both server-side (EJS) and client-side (HTML) headers.
Use Case: When you need to add a new "About Us" page to your website, this Skill will create the client/pages/about/ directory, index.html, index.js, update the webpack config, and add the "About Us" link to your site's navigation.

Quick Start

Use the create-static-page skill to create a new page named 'contact' with default content and navigation.

Frequently Asked Questions about create-static-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scaffold a new static page in a web project?▼

Scaffolding a new static page requires generating directory structures, index files, and updating build configurations. This skill automates file creation under client/pages, adds index.html and index.js files, and modifies webpack settings to establish the page foundation.

How do I add a new page to my website's header navigation automatically?▼

Adding a page to header navigation requires updating server-side and client-side link configurations. This skill integrates new static pages by automatically injecting navigation links into EJS templates and HTML headers during the scaffolding process.

What is the recommended content structure for static page development?▼

Recommended content structure for static pages typically includes Hero, Main Points, and Metrics sections. This skill provides predefined structural guidance during page generation to ensure adherence to project conventions for consistent UI layout.

Does this page scaffolding tool update webpack configuration automatically?▼

Yes, webpack configuration is updated automatically when scaffolding static pages. This skill modifies webpack settings to recognize new directories and files under client/pages, ensuring the build system compiles the generated page without manual setup.

Can I use this to create multiple static pages with consistent project conventions?▼

Creating multiple static pages with consistent conventions is supported by enforcing standardized directory layouts and file naming. This skill ensures every generated page follows project rules for static page development, maintaining uniformity across the application.