Skip to content

Commit a066c31

Browse files
carlevisoncarlevison
committed
feat: improve CLI UX with enhanced post-scaffold guidance and clearer prompts
Addresses DOC-10676, DOC-10677, and DOC-10679 by improving the CLI user experience with clearer messaging, better explanations, and actionable next steps. Changes: - Add comprehensive post-scaffold checklist with visual separators and example prompts - Clarify upload preset setup with explanation of what it is and how to configure it - Enhance AI context files section with usage instructions and example prompts - Add proper singular/plural handling for "file" vs "files" based on actual count - Make action items more specific and aligned with documentation - Remove confusing/irrelevant messaging The CLI now provides clear, actionable guidance at each step to help users get started quickly and understand how to leverage AI assistants effectively. Made-with: Cursor
1 parent 54a3222 commit a066c31

1 file changed

Lines changed: 58 additions & 14 deletions

File tree

‎cli.js‎

Lines changed: 58 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,9 @@ async function main() {
178178
name: 'hasUploadPreset',
179179
message:
180180
'Do you have an unsigned upload preset?\n' +
181-
chalk.gray(' → You’ll need one if you want to upload new images to Cloudinary,\n but not if you only want to transform or deliver existing images.') + '\n' +
182-
chalk.gray(' → Create one here: https://console.cloudinary.com/app/settings/upload/presets') + '\n',
181+
chalk.gray(' → An unsigned upload preset allows users to upload files directly from your app.') + '\n' +
182+
chalk.gray(' → Create one here: https://console.cloudinary.com/app/settings/upload/presets') + '\n' +
183+
chalk.gray(' (Set signing mode to "Unsigned" when creating)\n'),
183184
default: false,
184185
},
185186
{
@@ -362,19 +363,30 @@ async function main() {
362363
console.log(chalk.green('✅ Project created successfully!\n'));
363364

364365
if (aiTools && aiTools.length > 0) {
365-
console.log(chalk.cyan('📋 AI assistant files created:'));
366+
// Count actual files created
367+
let fileCount = 0;
368+
if (aiTools.includes('cursor')) fileCount += 2; // .cursorrules + mcp.json
369+
if (aiTools.includes('copilot')) fileCount += 1;
370+
if (aiTools.includes('claude')) fileCount += 2; // CLAUDE.md + .mcp.json
371+
if (aiTools.includes('generic')) fileCount += 2; // AI_INSTRUCTIONS.md + PROMPT.md
372+
373+
const filesText = fileCount === 1 ? 'file' : 'files';
374+
console.log(chalk.cyan(`📋 AI assistant configuration ${filesText} created:`));
366375
if (aiTools.includes('cursor')) console.log(chalk.gray(' • Cursor: .cursorrules'));
367376
if (aiTools.includes('copilot')) console.log(chalk.gray(' • GitHub Copilot: .github/copilot-instructions.md'));
368377
if (aiTools.includes('claude')) console.log(chalk.gray(' • Claude: CLAUDE.md'));
369378
if (aiTools.includes('generic')) console.log(chalk.gray(' • Generic: AI_INSTRUCTIONS.md, PROMPT.md'));
370379
if (aiTools.includes('cursor')) console.log(chalk.gray(' • MCP (Cursor): .cursor/mcp.json'));
371380
if (aiTools.includes('claude')) console.log(chalk.gray(' • MCP (Claude Code): .mcp.json'));
372-
console.log('');
381+
console.log(chalk.gray(`\n ${fileCount === 1 ? 'This file teaches' : 'These files teach'} your AI assistant about Cloudinary patterns and best practices.`));
382+
console.log(chalk.gray(`\n 💡 How to use ${fileCount === 1 ? 'this file' : 'these files'}:`));
383+
console.log(chalk.gray(' • Simply open your project in your AI assistant - the configuration is already loaded'));
384+
console.log(chalk.gray(' • Ask your AI to help build Cloudinary features, and it will follow these patterns'));
385+
console.log(chalk.gray(' • Example prompts: "Add image upload", "Create a transformation gallery"\n'));
373386
}
374387

375388
if (!answers.hasUploadPreset) {
376389
console.log(chalk.yellow('\n📝 Note: Upload preset not configured'));
377-
console.log(chalk.gray(' • Transformations will work with sample images'));
378390
console.log(chalk.gray(' • Uploads require an unsigned upload preset'));
379391
console.log(chalk.cyan('\n To enable uploads:'));
380392
console.log(chalk.cyan(' 1. Go to https://console.cloudinary.com/app/settings/upload/presets'));
@@ -397,12 +409,33 @@ async function main() {
397409

398410
if (startDev) {
399411
console.log(chalk.blue('🚀 Starting development server...\n'));
412+
console.log(chalk.cyan.bold('━'.repeat(60)));
413+
console.log(chalk.cyan.bold('🎉 Your Cloudinary React app is now running!\n'));
414+
console.log(chalk.white('Next steps:'));
415+
console.log(chalk.gray(' 1. Open your browser and navigate to the URL shown below'));
416+
console.log(chalk.gray(' 2. Check out the generated AI context files for helpful prompts'));
417+
console.log(chalk.gray(' 3. Start building! Try asking your AI assistant:'));
418+
console.log(chalk.green(' → "Add an image upload feature"'));
419+
console.log(chalk.green(' → "Create a gallery with transformations"'));
420+
console.log(chalk.green(' → "Add image optimization"\n'));
421+
console.log(chalk.cyan.bold('━'.repeat(60) + '\n'));
400422
runPackageManagerCommand(devCmd, projectPath);
401423
} else {
402-
console.log(chalk.cyan(`\n📁 Project created at: ${projectPath}`));
403-
console.log(chalk.cyan(`\nNext steps:`));
404-
console.log(chalk.cyan(` cd ${projectName}`));
405-
console.log(chalk.cyan(` ${devCmdStr}\n`));
424+
console.log(chalk.cyan.bold('━'.repeat(60)));
425+
console.log(chalk.cyan.bold('🎉 Setup complete! Your Cloudinary React app is ready.\n'));
426+
console.log(chalk.white(`📁 Project location: ${projectPath}\n`));
427+
console.log(chalk.white('Next steps:'));
428+
console.log(chalk.cyan(` 1. cd ${projectName}`));
429+
console.log(chalk.cyan(` 2. ${devCmdStr}`));
430+
console.log(chalk.gray(` 3. Open your browser to the URL shown by the dev server\n`));
431+
console.log(chalk.white('What you can do now:'));
432+
console.log(chalk.gray(' • Open the app in your browser and see the Cloudinary features being used'));
433+
console.log(chalk.gray(' • Explore the code in src/cloudinary/ to see how it works'));
434+
console.log(chalk.gray(' • Ask your AI assistant to add features using example prompts:\n'));
435+
console.log(chalk.green(' → "Add an image gallery with transformations"'));
436+
console.log(chalk.green(' → "Add a video player component"'));
437+
console.log(chalk.green(' → "Implement image optimization"\n'));
438+
console.log(chalk.cyan.bold('━'.repeat(60) + '\n'));
406439
}
407440
} catch (error) {
408441
console.error(chalk.red('\n❌ Error installing dependencies:'), error.message);
@@ -411,11 +444,22 @@ async function main() {
411444
console.log(chalk.cyan(` ${installCmdStr}\n`));
412445
}
413446
} else {
414-
console.log(chalk.cyan(`\n📁 Project created at: ${projectPath}`));
415-
console.log(chalk.cyan(`\nNext steps:`));
416-
console.log(chalk.cyan(` cd ${projectName}`));
417-
console.log(chalk.cyan(` ${installCmdStr}`));
418-
console.log(chalk.cyan(` ${devCmdStr}\n`));
447+
console.log(chalk.cyan.bold('━'.repeat(60)));
448+
console.log(chalk.cyan.bold('🎉 Setup complete! Your Cloudinary React app is ready.\n'));
449+
console.log(chalk.white(`📁 Project location: ${projectPath}\n`));
450+
console.log(chalk.white('Next steps:'));
451+
console.log(chalk.cyan(` 1. cd ${projectName}`));
452+
console.log(chalk.cyan(` 2. ${installCmdStr}`));
453+
console.log(chalk.cyan(` 3. ${devCmdStr}`));
454+
console.log(chalk.gray(` 4. Open your browser to the URL shown by the dev server\n`));
455+
console.log(chalk.white('What you can do after setup:'));
456+
console.log(chalk.gray(' • Open the app in your browser and see the Cloudinary features being used'));
457+
console.log(chalk.gray(' • Explore the code in src/cloudinary/ to see how it works'));
458+
console.log(chalk.gray(' • Ask your AI assistant to add features using example prompts:\n'));
459+
console.log(chalk.green(' → "Add an image gallery with transformations"'));
460+
console.log(chalk.green(' → "Add a video player component"'));
461+
console.log(chalk.green(' → "Implement image optimization"\n'));
462+
console.log(chalk.cyan.bold('━'.repeat(60) + '\n'));
419463
}
420464
}
421465

0 commit comments

Comments
 (0)