💻 Google Gemini Prompts for Web Developers

Your AI-Powered Pair Programmer for Faster Development

A ChromeGeek.com Resource

Supercharge your web development workflow with Google Gemini. This cheat sheet provides powerful prompts for code generation , debugging, performance optimization, and platform-specific tasks like WordPress and Joomla development.

🛠 Code Generation & Refactoring

Use Gemini to scaffold components, refactor legacy code, or generate boilerplate faster.

Task Gemini Prompt

Generate a React component "Create a responsive React component for a pricing table with 3

tiers."

Refactor legacy PHP "Refactor this PHP function to use modern syntax and improve

readability: [paste code]."

Convert JS to TypeScript "Convert this JavaScript function to TypeScript with proper types:

[paste code]."

Generate HTML boilerplate "Create a basic HTML5 template with meta tags, favicon, and responsive

viewport."

Build a REST API route "Write an Express.js route for GET /users that returns JSON data."

Generate a custom React Hook "Generate a React custom hook named `useLocalStorage` to manage state

in local storage."

Convert PHP class to function "Convert this PHP class to a modern functional component without a

class structure: [paste PHP class]."

Scaffold SASS structure "Scaffold a basic SASS/SCSS file structure for a frontend project with

partials for variables, mixins, base, layout, and components."

🐞 Debugging & Troubleshooting

Paste your error messages or broken code and let Gemini help you fix it.

Task Gemini Prompt

Fix a JavaScript error "Explain and fix this 'undefined is not a function' error in my JS

code: [paste code/error]."

Diagnose WordPress plugin "Help me troubleshoot a plugin conflict causing a 500 error in conflict WordPress. What are the common steps?"

Resolve CORS issue "Why am I getting a CORS error when calling this API from my frontend,

and how do I fix it on the server-side (Node.js)?"

Debug a Joomla module "This Joomla module is not rendering on the homepage. What could be

wrong and how can I debug it?"

Explain a stack trace "Explain this Node.js stack trace and suggest a fix: [paste stack

trace]."

Interpret console error (Vue.js) "I'm seeing this error in my Vue.js console: `[Vue warn]: Failed to

resolve component: MyComponent`. What does it mean and how do I fix it?"

Troubleshoot DB connection "My PHP application can't connect to the MySQL database. What are the

common reasons for this error and how can I troubleshoot?"

Identify performance "Analyze this JavaScript function for potential performance bottlenecks bottlenecks: [paste function]."

🔍 Regex & Shell Scripting

Let Gemini write or explain regular expressions and shell commands for you .

Task Gemini Prompt

Write a regex "Write a regex to match email addresses with only .edu or .org

domains."

Explain a regex "Explain what this regex does: `^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]

{2,}$`"

Create a shell script "Write a bash script to back up a WordPress site (files and database)

and compress it into a .tar.gz file."

Find files by extension "Give me a shell command to find all .js and .jsx files in a directory

recursively, excluding node_modules."

Batch rename files "Create a shell script to rename all .txt files to .md in a folder,

adding a `_backup` suffix to the original name."

Extract URLs from log "Write a shell command to extract all unique URLs from an Apache

access log file."

Secure file permissions "What are the recommended chmod permissions for WordPress files and

directories on a web server?"

Git command for reverting "What Git command should I use to revert the last three commits changes without affecting subsequent commits?"

📄 Documentation & Comments

Use Gemini to generate docstrings, inline comments, or README content.

Task Gemini Prompt

Generate a docstring "Write a JSDoc comment for this async function that fetches user data

from a REST API: [paste function]."

Add inline comments "Add inline comments to this PHP function explaining each step and its

purpose: [paste PHP function]."

Summarize a file "Summarize what this JavaScript file does in 3 concise bullet points:

[paste JS file content]."

Write a README "Create a README.md for this Node.js project with install, usage

instructions, and a section for contributing guidelines."

Explain a function "Explain what this Joomla helper function does and where it might be

used in a template override."

Generate OpenAPI spec "Generate an OpenAPI/Swagger specification for a simple user

authentication API with /login and /register endpoints."

Create a changelog entry "Draft a changelog entry for a new version (v1.2.0) of my WordPress

plugin, highlighting bug fixes and a new feature for custom post type support."

Explain a complex SQL query "Explain what this complex SQL query does, step-by-step: [paste SQL

query]."

⚡ Performance & Optimization

Ask Gemini to analyze, optimize, or rewrite code for speed and efficiency.

Task Gemini Prompt

Optimize a loop "Optimize this JavaScript loop for performance on large arrays,

considering common browser optimizations: [paste JS loop]."

Analyze Lighthouse report "Based on this Lighthouse output, what should I fix first to improve

page load time for mobile users? [paste Lighthouse report summary]."

Optimize image delivery "Suggest optimizations for faster image loading on a WordPress site

using modern formats (WebP) and lazy loading."

Minify scripts "Give me a Gulp or Node.js script to automatically minify CSS and

JavaScript assets in my project directory."

Suggest CDN strategy "Propose a strategy for implementing a CDN for static assets (images,

CSS, JS) on a large-scale website."

Optimize database queries "How can I optimize this slow MySQL query to improve its execution

time for a large table? [paste SQL query]."

Propose client-side caching "Suggest effective client-side caching strategies for a single-page

application (SPA) to reduce API calls."

🌐 WordPress Development

Use Gemini to write shortcodes , modify themes, or build admin options faster in WordPress.

Task Gemini Prompt

Create a shortcode "Generate a WordPress shortcode that outputs the latest 5 posts in a

custom category named 'news', with an attribute for the number of posts."

Modify functions.php "Add code to functions.php to remove the WordPress version number from

the head and RSS feeds."

Scaffold a basic plugin "Scaffold a basic WordPress plugin that adds a dashboard widget

showing the current server time and a custom welcome message."

Explain hook usage "What’s the difference between `add_action` and `add_filter` in

WordPress, and when should I use each?"

Create an options page "Build a WordPress admin options page using the Settings API with

fields for a Google Analytics ID and a custom text message."

Register custom post type "Write PHP code to register a custom post type called 'Projects' with

support for title, editor, and featured image, and make it public."

Add custom field metabox "Generate code to add a custom metabox to the 'Projects' custom post

type (created above) for a text field named 'Project URL'."

Query posts with WP_Query "Write a `WP_Query` loop to display 3 'Projects' posts that are marked

as 'featured' (using a custom taxonomy term) on a custom template."

Enqueue scripts/styles "Show me how to correctly enqueue a JavaScript file (`myscript.js`)

and a CSS file (`mystyle.css`) in WordPress using `wp_enqueue_script` and `wp_enqueue_style`."

Create custom REST API "How do I create a custom REST API endpoint in WordPress to fetch data

endpoint from my 'Projects' custom post type?"

Debug WSOD "I'm seeing a White Screen of Death (WSOD) on my WordPress site. What

are the common steps to debug this issue?"

Joomla Development

Let Gemini help you build modules, understand templates, and automate Joomla workflows.

Task Gemini Prompt

Create a basic module "Write the basic XML and PHP structure for a Joomla 4 module that

displays user info based on their login status."

Render module position "How do I output a specific module position inside Joomla’s component

view within a custom template override?"

Automate backups "Make a script to backup Joomla database and public_html every 24

hours via cron job."

Understand Joomla override "Explain how to override article output in a Joomla template to add

custom fields to the display."

List useful events/hooks "Give me 5 Joomla plugin event hooks for content filtering or

manipulation before display."

Create custom field for article "How do I create a custom text field for Joomla articles and display

its value in a template override?"

Use Joomla JFactory methods "Show an example of using Joomla's `JFactory::getApplication()` and

`JFactory::getUser()` to get current user data."

💻 JavaScript & Frontend Tasks

Use Gemini to tackle DOM tasks , handle async logic, or prototype UI ideas with vanilla JS.

Task Gemini Prompt

DOM selector logic "Write JavaScript to toggle a class on every third item in a list with

the class `my-list-item`."

Handle async operations "Show an example of using `async/await` with `fetch` to call an API

and handle potential errors."

Use Gemini API client "Generate a fetch-based Gemini API call with an authorization header

to generate text based on a prompt."

Debounce input listener "Create a debounce function that limits how often input events trigger

on a search bar to improve performance."

Inject dynamic styles "Write JavaScript to dynamically inject a CSS rule that changes button

background color to red on hover, for all buttons with class 'primary-btn'."

Create form validation "Write a vanilla JavaScript function to validate an email input field,

ensuring it's a valid email format."

Implement drag-and-drop "Provide a simple vanilla JavaScript example of a draggable element

that can be dropped into a specific target area."

Manage local storage "Show how to store and retrieve a JSON object in `localStorage` using

JavaScript."

📱 Mobile Tips for Developers

💡 GitHub Mobile: Summarize or reply to issue threads with Gemini-generated comments for clarity.

💡 SSH or terminal apps: Use Gemini to suggest CLI flags, fix `bash` syntax, or troubleshoot server issues fast.

💡 Gemini app: Ask Gemini to generate a code snippet or regex while reviewing pull requests on the go.

💡 Gmail on mobile: Let Gemini draft professional replies for client feedback or team updates.

💡 Quick `git` commands: Get help remembering complex `git` commands or resolving merge conflicts.

💡 Conceptual explanations: Ask for quick explanations of design patterns or architectural concepts.

💡 Regex testing: Quickly test a regex pattern against sample text.

✨ Pro Tips for Better Prompts

💡 Be specific about technology: Mention the language, framework, or CMS (e.g., "React component," "WordPress

shortcode," "Node.js Express route").

💡 Provide context: Explain the purpose or current state of your code/project.

💡 Specify desired output: Ask for code, an explanation, a table, a comparison, a debugging step-by-step.

💡 Iterate and refine: If the first answer isn't perfect, ask follow-up questions like "Can you make it more efficient?"

or "How would this work with [specific condition]?"

💡 Include error messages: When debugging, copy-paste the exact error message and relevant code.

💡 Define constraints: Specify desired performance, security, or readability requirements.

💡 Leverage Gemini Code Assist / CLI: For integrated workflows, use these tools directly within your IDE or terminal.

Google Gemini Prompts for Web Developers

Code Smarter • Debug Faster • Build Better

Created by ChromeGeek.com

This guide is designed to help web developers leverage AI responsibly as a powerful productivity tool.