Skip to content

AI_PROMPTS.md

Latest commit

 

History

History
110 lines (83 loc) · 6.85 KB

AI_PROMPTS.md

File metadata and controls

110 lines (83 loc) · 6.85 KB
Raw

AI Prompts & Instructions for Motion Luma

This file contains copy-pasteable prompt templates that you (the website owner) can give to any AI coding assistant (like Claude, Gemini, ChatGPT, Cursor, or Claude Code) to manage the website.

It also explains the exact folder structure so that the AI knows exactly what to modify and what to leave alone.

⚠️ Important AI Instructions (Read Before Editing)

Our project documentation has some historical references that differ from the actual active codebase. Any AI working on this codebase must read this file and adhere to the following active guidelines:

  1. Content Folder: All website data lives in the data/ directory (NOT content/).
  2. Blog Posts Directory Structure:
    • Blog HTML files must be placed in nested folders structured by year and month under data/blogs/YYYY/MM/ (e.g., data/blogs/2026/06/2026-06-21-sound-design-secrets.html).
    • Blog posts must be written as .html files (NOT .json files). They use a custom header format followed by --- and then raw HTML.
  3. Media Directory Structure (Year > Month):
    • All blog media assets (cover images, inline images, local video clips) must follow the matching year/month folder structure.
    • Cover Images: Must be referenced as /images/blog/posts/YYYY/MM/slug.jpg (which maps physically to data/images/blog/posts/YYYY/MM/slug.jpg).
    • Inline Images: Must be referenced as /images/blog/posts/inline/YYYY/MM/slug-description.jpg (which maps physically to data/images/blog/posts/inline/YYYY/MM/slug-description.jpg).
  4. No Database/CMS: We do not use a database or CMS. All page copy is read from JSON files in the data/ directory. Do not hardcode text into React components.
  5. Package Manager: Use pnpm for all commands.

Prompt Templates

Copy and paste the relevant prompt below into your AI chat window when you want to make changes.

Prompt 1: Creating a New Blog Post

Copy this prompt when you want to write and publish a new article.

You are an AI assistant helping me write a new blog post for my Next.js video editing agency website.

Please follow these instructions:
1. Read the quick reference in `CLAUDE.md`, the master instructions in `INSTRUCTIONS.md` at the project root, and the AI directives in `AI_PROMPTS.md`. Note that `AI_PROMPTS.md` overrides outdated guidelines in other files.
2. The active blog post files live in `data/blogs/` (not `content/blogs/`) and must be organized into year/month subfolders, e.g., `data/blogs/YYYY/MM/YYYY-MM-DD-slug.html`. They must be created as `.html` files (not `.json` files).
3. The format of the blog post must follow the template defined in `data/blogs/_template.html`. It has key-value metadata headers at the top, a `---` separator, and then the HTML body content.
4. Set the `published` header to `true` if I want to publish it immediately, or `false` if it is a draft.
5. All media (cover images, inline images, local video clips) associated with this post MUST be organized by year/month:
   - Cover Image Header: Set `COVER_IMAGE: /images/blog/posts/YYYY/MM/slug.jpg` (which maps physically to `data/images/blog/posts/YYYY/MM/slug.jpg`).
   - Inline Images: Reference and place inside `/images/blog/posts/inline/YYYY/MM/slug-description.jpg` (which maps physically to `data/images/blog/posts/inline/YYYY/MM/slug-description.jpg`).
6. Provide a descriptive `pexelsQuery` header (e.g., "video editor working in dark room cinematic lighting color grading monitor") so the image download script can automatically fetch a cover photo.
7. Once the HTML file is created, remind me to run `pnpm fetch-images` to download the cover photo and then run `pnpm build` to verify the build succeeds before committing.

Here is the topic/outline of the new post:
[INSERT YOUR TOPIC, TITLE, OR OUTLINE HERE]

Prompt 2: Updating Website Copy & Pricing

Copy this prompt when you want to change prices, add testimonials, edit services, or update the founder's bio.

You are an AI assistant helping me update the content of my video editing agency website.

Please follow these instructions:
1. Read `CLAUDE.md`, `INSTRUCTIONS.md`, and the overrides in `AI_PROMPTS.md` for guidelines.
2. Note that all site data lives in the `data/` directory (not `content/`).
3. Identify which JSON file in `data/` needs modification:
   - `data/site.json` (Site name, tagline, SEO defaults, social links)
   - `data/menu.json` (Navigation links)
   - `data/hero.json` (Hero title, subtitle, CTAs)
   - `data/services.json` (List of services and features)
   - `data/about.json` (Founder bio and agency story)
   - `data/testimonials.json` (Client testimonials)
   - `data/portfolio.json` (Portfolio video list)
   - `data/pricing.json` (Pricing plans and monthly packages)
   - `data/contact.json` (Contact info and form settings)
4. Do NOT modify the React component files under `components/` or `app/` just to change text or pricing numbers. All content changes MUST be made in the JSON files under `data/`.
5. After updating the relevant JSON file, run `pnpm build` to ensure the project compiles cleanly.

Here is the update I want to make:
[INSERT YOUR REQUEST HERE, e.g., "Change the price of the 'Starter' package to $500/mo and add a new service for TikTok editing"]

Prompt 3: Modifying Layouts, Styling, or Design

Copy this prompt when you want to change the visual appearance, add a new section, or adjust the responsiveness.

You are an AI assistant helping me modify the layout and styling of my video editing agency website.

Please follow these instructions:
1. Read `CLAUDE.md`, `INSTRUCTIONS.md`, and the overrides in `AI_PROMPTS.md` for styling guidelines.
2. We use Next.js 13+ App Router, TypeScript, and Tailwind CSS for styling.
3. Component templates live under `components/` (e.g., `components/Pricing/`, `components/Hero/`) and pages live under `app/`.
4. If the visual change applies globally (like theme colors or fonts), check `tailwind.config.js` and `styles/` first.
5. If you need to read content, ensure you read it from the corresponding JSON file in the `data/` folder rather than hardcoding it into the component template.
6. Verify your changes locally by running `pnpm dev` and then test the build with `pnpm build` before confirming.

Here is the styling or design change I want to make:
[INSERT YOUR REQUEST HERE, e.g., "Add a hover animation to the service cards and change the background color of the CTA button to purple"]

🛠️ Handy Commands Reference

Run these commands in your terminal to manage the site:

Command Purpose
pnpm dev Starts the local preview server at http://localhost:3000
pnpm fetch-images Automatically downloads missing blog cover images from Pexels
pnpm build Compiles the production site (Run this to verify there are no errors)
pnpm lint Runs the code quality linter