docs(cli): add preset rules

Author: strausr

README.md

@@ -11,7 +11,7 @@ Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup.
 - Node.js 18+ installed
 - A Cloudinary account (free tier available)
   - [Sign up for free](https://cloudinary.com/users/register/free)
-  - Your cloud name is in your [dashboard](https://console.cloudinary.com)
+  - Your cloud name is in your [dashboard](https://console.cloudinary.com/app/home/dashboard)
 
 ## Usage
 
@@ -21,8 +21,8 @@ npx create-cloudinary-react
 
 The CLI will prompt you for:
 - Project name
-- **Cloudinary cloud name** (found in your [dashboard](https://console.cloudinary.com))
-- Upload preset (optional)
+- **Cloudinary cloud name** (found in your [dashboard](https://console.cloudinary.com/app/home/dashboard))
+- Upload preset (optional - required for uploads, but transformations work without it)
 - AI coding assistant(s) you're using (Cursor, GitHub Copilot, Claude, etc.)
 - Whether to install dependencies
 - Whether to start dev server

cli.js

@@ -51,14 +51,14 @@ async function main() {
       name: 'cloudName',
       message: 'Cloudinary Cloud Name:',
       description: chalk.gray(
-        'Your cloud name is shown in your dashboard: https://console.cloudinary.com'
+        'Your cloud name is shown in your dashboard: https://console.cloudinary.com/app/home/dashboard'
       ),
       validate: (input) => {
         if (!input.trim()) {
           return chalk.yellow(
             'Cloud name is required.\n' +
             '  → Sign up: https://cloudinary.com/users/register/free\n' +
-            '  → Find your cloud name: https://console.cloudinary.com'
+            '  → Find your cloud name: https://console.cloudinary.com/app/home/dashboard'
           );
         }
         if (!isValidCloudName(input)) {
@@ -70,8 +70,12 @@ async function main() {
     {
       type: 'confirm',
       name: 'hasUploadPreset',
-      message: 'Do you have an unsigned upload preset?',
+      message: 'Do you have an unsigned upload preset? (Required for uploads, optional for transformations)',
       default: false,
+      description: chalk.gray(
+        'Upload presets enable client-side uploads. You can set one up later at:\n' +
+        'https://console.cloudinary.com/app/settings/upload/presets'
+      ),
     },
     {
       type: 'input',
@@ -232,8 +236,11 @@ async function main() {
   console.log(chalk.green('✅ Project created successfully!\n'));
 
   if (!answers.hasUploadPreset) {
-    console.log(chalk.yellow('📝 To create an upload preset:'));
-    console.log(chalk.cyan('   1. Go to https://cloudinary.com/console/settings/upload/presets'));
+    console.log(chalk.yellow('\n📝 Note: Upload preset not configured'));
+    console.log(chalk.gray('   • Transformations will work with sample images'));
+    console.log(chalk.gray('   • Uploads require an unsigned upload preset'));
+    console.log(chalk.cyan('\n   To enable uploads:'));
+    console.log(chalk.cyan('   1. Go to https://console.cloudinary.com/app/settings/upload/presets'));
     console.log(chalk.cyan('   2. Click "Add upload preset"'));
     console.log(chalk.cyan('   3. Set it to "Unsigned" mode'));
     console.log(chalk.cyan('   4. Add the preset name to your .env file\n'));

templates/.cursorrules.template

@@ -20,6 +20,14 @@
 - ✅ CORRECT: `import.meta.env.VITE_CLOUDINARY_CLOUD_NAME` (not `process.env`)
 - Always restart dev server after adding/updating `.env` variables
 
+## Upload Presets
+- **Unsigned upload presets are required for client-side uploads** - Transformations work without them, but uploads need an unsigned preset
+- ✅ Create unsigned upload preset: https://console.cloudinary.com/app/settings/upload/presets
+- ✅ Set preset in `.env`: `VITE_CLOUDINARY_UPLOAD_PRESET=your-preset-name`
+- ✅ Use in code: `import { uploadPreset } from './cloudinary/config'`
+- ⚠️ If upload preset is missing, the Upload Widget will show an error message
+- ⚠️ Upload presets must be set to "Unsigned" mode for client-side usage (no API key/secret needed)
+
 ## Import Patterns
 - ✅ Import Cloudinary instance: `import { cld } from './cloudinary/config'`
 - ✅ Import components: `import { AdvancedImage, AdvancedVideo } from '@cloudinary/react'`

templates/README.md.template

@@ -12,7 +12,7 @@ npm run dev
 
 This project uses Cloudinary for image management. If you don't have a Cloudinary account yet:
 - [Sign up for free](https://cloudinary.com/users/register/free)
-- Find your cloud name in your [dashboard](https://console.cloudinary.com)
+- Find your cloud name in your [dashboard](https://console.cloudinary.com/app/home/dashboard)
 
 ## Environment Variables
 
@@ -22,10 +22,12 @@ Your `.env` file has been pre-configured with:
 - `VITE_CLOUDINARY_UPLOAD_PRESET`: {{UPLOAD_PRESET}}
 {{/UPLOAD_PRESET}}
 {{^UPLOAD_PRESET}}
-- `VITE_CLOUDINARY_UPLOAD_PRESET`: (not set - create an unsigned upload preset)
+- `VITE_CLOUDINARY_UPLOAD_PRESET`: (not set - required for uploads)
+
+**Note**: Transformations work without an upload preset (using sample images). Uploads require an unsigned upload preset.
 
 To create an upload preset:
-1. Go to https://cloudinary.com/console/settings/upload/presets
+1. Go to https://console.cloudinary.com/app/settings/upload/presets
 2. Click "Add upload preset"
 3. Set it to "Unsigned" mode
 4. Add the preset name to your `.env` file