CREATE
Reusable Technical Deliverables Scripts
CORE.
I realized relatively quickly that I was asking AI agents to do the same thing over and over again. Simple requests like create this page in the same way or create this component with the same specifications. This is a very very inefficient and costly way to use AI.
WHAT'S THE SOLUTION
Creating new pages
Most if not all unppps in the unparty.app contain resuable scripts to create technical deliverables without having to touch code.
In theunpartyapp, a Next.js application, you will find create-page.
Scripts
create-page - Single Page Creation
Creates a single page interactively.
Usage:
./create-pageThe script will prompt you for a page name and create:
Directory: src/app/{lowercase-pagename}/
File: src/app/{lowercase-pagename}/page.tsx
Component: {PascalCase}Page
Example:
$ ./create-page
Enter page name (will be converted to lowercase for directory):
MyAwesomePage
Created new page at src/app/myawesomepage/page.tsx
Component name: MyawesomepagePagecreate-multiple-pages.sh - Multiple Page Creation
Creates multiple pages automatically from the UnpppsConfig.json configuration file.
Usage:
./create-multiple-pages.shFeatures:
Reads all unppp IDs from src/data/UnpppsConfig.json
Creates pages for all 33 unppps automatically
Skips existing pages to avoid conflicts
Provides detailed progress reporting
Supports both jq and manual JSON parsing
Interactive confirmation before proceeding
Example Output:
š Multiple Page Creator
=================================
š Reading configuration from src/data/UnpppsConfig.json...
š Found 33 unppp IDs to process
This will create pages for the following IDs:
theunpartyapi
theunpartyapp
theunpartybot
... and 30 more
Do you want to proceed? (y/N): y
šļø Creating pages...
ā
Created page: theunpartyapi ā src/app/theunpartyapi/page.tsx (Component: TheunpartyapiPage)
āļø Skipping theunpartyapp (already exists at src/app/theunpartyapp)
ā
Created page: theunpartybot ā src/app/theunpartybot/page.tsx (Component: TheunpartybotPage)
š Summary:
ā
Pages created: 32
āļø Pages skipped: 1
š Total processed: 33
š Successfully created 32 new pages!Configuration
The multiple page creation script reads from src/data/UnpppsConfig.json, which contains an array of unppp objects. Each object must have an id property that will be used as the page name.
Configuration structure:
{
"version": 3,
"unppps": [
{
"id": "theunpartyapi",
"name": "API",
"priority": 1,
// ... other properties
}
]
}Generated Page Structure
Both scripts create pages with the same structure:
import React from 'react';
const {ComponentName}Page = () => {
return (
<main className="w-full max-w-5xl mx-auto">
{/* Add your page content here */}
<div className="flex flex-col gap-6">
</div>
</main>
);
};
export default {ComponentName}Page;Next Steps After Page Creation
1. Review generated pages: Check src/app/ for all new directories
2. Add content: Customize each page with specific unppp content
3. Run linting: npm run lint to check for any issues
4. Run build: npm run build to ensure everything compiles
5. Test navigation: Verify pages are accessible at /{pagename}
Requirements
Node.js: For running the Next.js application
jq (optional): For robust JSON parsing in the multiple pages script
Valid JSON: The UnpppsConfig.json file must be valid JSON
Error Handling
The multiple pages script includes comprehensive error handling:
Checks for configuration file existence
Validates JSON parsing
Handles directory creation failures
Reports detailed success/failure statistics
Gracefully skips existing pages
Troubleshooting
Script not executable:
chmod +x create-page
chmod +x create-multiple-pages.shJSON parsing issues:
Ensure src/data/UnpppsConfig.json exists and is valid JSON
Install jq for more correct parsing: apt-get install jq (Ubuntu/Debian) or brew install jq (macOS)
Page already exists:
The script will skip existing pages and report them
Delete the existing directory if you want to recreate it