new-page

Generate React/TypeScript web pages with tokenized styling and required sections.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/0futuresystems/future-water-systems --skill new-page-0futuresystems
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-page
Source: https://github.com/0futuresystems/future-water-systems/tree/main/skills/new-page
Command: npx skills add https://github.com/0futuresystems/future-water-systems --skill new-page-0futuresystems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of new web pages by enforcing established design rules and component patterns, ensuring consistency and quality.

Core Features & Use Cases

  • Page Generation: Creates new pages adhering to the project's design system.
  • Design Enforcement: Ensures compliance with design_rules.md and client/src/design-tokens.ts.
  • Section Inclusion: Mandates specific sections like a full-blue trust-gradient and a Buy Now Pay Later style section.
  • Placeholder Images: Integrates placeholder images for visual content.
  • Use Case: A marketing team needs to quickly launch a new product landing page that matches the existing website's look and feel, including specific promotional sections and imagery.

Quick Start

Use the new-page skill to create a new page with a full-blue trust-gradient section and two sections with placeholder images.

Frequently Asked Questions about new-page

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

FAQPage Schema
How do I generate a new React page that follows my existing design system?

To generate a new React page, this Skill enforces predefined design rules and tokenized styling from your design system. It automatically structures the page with specific sections like a trust gradient and Buy Now Pay Later layout.

What sections are automatically included when generating a new web page?

Generating a new web page mandates a full-blue trust-gradient section and a Buy Now Pay Later layout, alongside placeholder images. It specifically omits any risk section unless you explicitly request it.

Can I use this to create a TypeScript page without a risk section?

Yes, you can create a TypeScript page without a risk section because the Skill omits risk sections by default. It only includes a risk section if you explicitly request one during page generation.

How does this page generation tool validate frontend code changes?

Page generation validates frontend code changes by running ESLint and build processes. This ensures the newly generated React and TypeScript code adheres to project standards and compiles successfully.

How do I add placeholder images to a new React component?

To add placeholder images to a new React component, the Skill integrates them automatically during page generation. This provides immediate visual content for sections without requiring manual image imports.

Why does my generated page include a Buy Now Pay Later layout?

Your generated page includes a Buy Now Pay Later layout because the Skill enforces specific section inclusions to match marketing design patterns. This ensures consistency with established promotional page structures.