Skip to content

Instantly share code, notes, and snippets.

@eonist
Last active October 30, 2024 08:07
Show Gist options
  • Save eonist/22e7458f9b38424af9d1bfd791b796a4 to your computer and use it in GitHub Desktop.
Save eonist/22e7458f9b38424af9d1bfd791b796a4 to your computer and use it in GitHub Desktop.
My_favorite_ai_coding_prompts.md

The art of prompt coding 🦾

Visitors GitHub Gist stars

Apps used: Cursor.so / github copilot chat / Amazon Q / codeium

img

⚠️️ Before you disregard the idea of prompt coding ⚠️️ Don't! Because everyone will be prompt-coding soon enough.

This is like when humanity stopped using horses for transportation and started using cars. 🐴 👉 🚗

Table of Contents

img

(Let's dive into it)

Gotchas:

Good to know about prompt coding

  • When you restart the LLM, it's like getting a new agent. The new agent may behave slightly differently from the previous one because every agent has its unique personality, just like a person. They also learn differently from each other. Sometimes, a reboot is necessary to start afresh and get back to basics, as the saying goes, "The Ghost in the Machine."
  • Making code modular is essential because LLMs have limited memory and can only handle a maximum length of text. Therefore, it is easier for LLMs to reason about well-structured and modular code, where each module is no more than 100-200 LOC. This is also a good coding practice in general.
  • Being imperative seems to yield better output. For instance, you can use commands like "Make code cleaner,", "Apply styling", "Improve structure," etc.
  • Starting a new chat with a slightly modified prompt can result in better output. - If you are working on something slightly complex, then break it down into smaller chunks. The GPT4 LLM has limitations in computing power, so if it doesn't yield the desired output, try breaking things down further or rephrase your prompt.
  • Do things in steps. For example, "1. The selected cases are from XCTest" "2. Describe in detail what each case does" Follow up with "Be more comprehensive."
  • Ask questions as if you were talking to a person. Highlight the code you want to ask about to give the LLM more context and ask questions like "Is this correct?" "Any typos?" "Is it nil or null?" "Can font color be used in CSS transition?" The LLM will reason about your code and provide you with advice or answers.
  • You can use TextExpander (macOS) to remember and write your most frequent prompts.
  • Prompts marked with a ⭐ emoji are my favorites

Prompt stepping:

img

Prompting prompts: (Using text expander as the "prompt expander")

img

Comment code:

Commenting is essential for understanding

The great thing about commenting your codebase is that the LLM understands better how to help you with tasks. Also the code-base will be easier to comprehend, and comments are non-destructive so your code keeps on running as is.

  • Move trailing comments above variables: 1. Move comments above variables 2. Convert to javadoc 3. Remove empty lines
  • Improve comments in a file: suggest comment improvments for this file and add them
    • Alternatie: What does this line do? and add it as a comment
    • Sometimes example code is lost: suggest comment improvments for this file and add them, and keep example code
  • To get more comprehensive comments: add comprehensive comments in this file
  • ⭐ Add code to lines in a method: add inline comments in the selected code
    • Sometimes empty lines are added: add inline comments in the selected code, and dont add empty line breaks
    • Sometimes refrasing helps: add inline comments inside the method or add inline comments to the selected method
    • Seems like the most precise prompt for this is: Add Comment on Current Selection
    • Comment each line and append the comment to the end of the line: add inline comments to the selected code (append comment to the end of each line)
  • Finish a parameter comment: complete the fixme
  • Fix a messy code block comment: fix the messy comment that is selected, clean it up. make it better
  • Sometimes you want the comment block styled append this: add asterisk character to each line
  • Sumarize what a class does: add a general comment regarding what the selected class
  • Sometimes the LLM will arrange comments on a straight line. use this prompt to fix that: dont use a straight line when you add the comments
  • Sometimes the LLM will put the inline comments in the wrong place. above the code instead of after, if so do this: put the comments after the code in the selected code
  • move comments from above lines to at the end of lines: move comment to end of the line
    • More adamant command to move a line from above to the end of a line: take each comment and move it to the end of the line of the code bellow it. To the far right or for each comment move it to the line bellow it to the end at the far right
    • Nuclear option to move a comment from above to the right: 1. take each comment 2. move it to the end of the line bellow it
    • ⭐ Nuclear otion 2: for each line with a comment, take the comment and move it to the end of the line bellow it
  • Make an example of a method an add it to the comment: make an example for this method and add it to the comment
  • To make the LLM give you comments without vertical space use: don't include empty vertical spaces pre or post
  • Comment imports (it's nice to know what they do): comment each import and add the comment to the end of the line for each line or more simple: comment imports (append comment to end of line)
  • Sometimes the LLM will add vertical empty space you dont want, fix that with this prompt: dont add empty vertical space or drop the vertical empty space between lines or more adamant: there are lines in the selection that are empty, remove these
  • Improve comments, but style it with the projects linting file: improve comment for the selected code (restrict formating to the swiftline file the project uses)
  • ⭐ Explode a long call with comments: 💥 add inline comments to the selected code (for just the selected line) (make a new line for each comma) (After using this prompt, the LLM might think you want to explode all lines, a tip to avoid this is to append "dont change any code" in your next prompt)
    • More adamant alternative: 1. Add more vertical space in the selected code by making a new line after each comma. 2. For each new line created append a comment about that line to the end of the line
    • Explode a long call with comments in steps (some calls are stuborn and you have to be more adamant about what you want) : 1. Add more vertical space in the selected code by making a new line after each comma. then select the new lines and prompt: add inline comments to the selected code
  • Add instructions about cvs structure to a comment: add description about the format of the banks.csv then add the selected text to a comment and format it nicely
  • Add instructions about a json structore to a comment: make instructions about json structur brands.json
  • ⭐ Getting an example output from an example in a comment: what would be an example of an output from the code in the selection? (this saves you from running the actual code) follow up wtih: and what would the call be for that output? And the LLM will give you the call to the output 🤯 Adding these to an example in a comment would make the code more readable.
  • Make and example of a selected code and add it to the comments: make an example of the selected method that we can add to the comment, then add that example to the comments (The LLM will also create a description regarding what the example does. Its nice to add this as a comment above the example)
  • Class description: Create a descriptive description for this class and add it to the comment
  • If there is a todo or fixme in a comment. You can ask the LLM to: Solve fixme or solve todo 💥
  • If there is incomplete documentation in the code: finish the docummentation in the selection or simpler: complete param doc
  • Describe the underlaying meaning of a series of method calls: 1. for each method call. 2. Make a short oneliner descripton of what the method does. 3. Append the oneliner as a comment for each line
  • Anchoring preexisting comments: by wrapping your current comments in /**/ the LLM seems to ignore them and wont delete them when you make the LLM add new comments to a piece of code.
  • Add context to a method call: make a comment about the underlaying meaning of the call, make the comment succinct, keep the higher level meaning
  • ⭐ Comment css oneliners: append a comment to the end of the line about what properies is represented, (dont include the actual values) from: padding: 24px 0; to this: padding: 24px 0; /* Sets padding to top/bottom and left/right */ So much more readable ✨
  • Reversing oneliners: make this style into multiple styles This will "explode" a oneliner into respective styles like so: from: font: bold 28px var(--font-family); to: font-weight: bold; font-size: 28px; font-family: var(--font-family);
  • Add documentation on where something is used: - Fixme: ⚠️️ Add doc, regarding where this is used? highlight the text, and prompt: Fix comment. And it will add the reference to where the method is used

Markdown:

Readme markdown etc

  • List to numbred list: change from list to numbered list
  • To improve the structure of a readme markdown file: make suggestions on how to improve this readme doc
  • To make "table of content": can you suggest a markdown index for the selected readme file (sometimes you have to save a file as readme.md for the LLM to create the index, or else it will suggest some phyton script instead)
  • To make an index (same as TOC) of a .md file: 1. make a readme table o content of the selected readme file. 2. Make sure the output is in raw markdown syntax
  • Sometimes markdown files are too complex or big. In this case, select partially and prompt with: make index of selection
  • Update a prexisting "table of content" aka toc: update the toc with the new change
  • ⭐ Making a TOC in raw markdown: create toc and format it as raw markdown code
  • Update mit License to latest format: update to latest mit License format
  • Can you make a description for the [insert name of library] library. Creates a nice description for your library
  • Make a full readme based on a class: create boilerplate readme for [insert name your class here]
  • Create examples for your readme based on some class api: create more exmaples on how to use the mockgen class
  • Make an example for one method call: `create an example of using the selected method
  • Improve markdown language: improve language in the selected markdown. output to raw markdown (sometimes the LLM will return the result as normal text, thats why we are adamant about outputting to raw markdown)
  • Make code examples based on a library: can you create some examples for common usecases when using the Account library? then Can you make code examples of these examples you just described?
  • Convert comments to JavaDoc esque comment fencing: convert comments to use javadoc style * (don't include return value) or just: javadoc the comments followed by add * to the left side to add * fencing
  • Make an example that results in a speccific output. The LLM will figure out what the input is. 🐼 add an example using the selected code. The output should be: "panda-will-boat-fair-death-desire-blue-forest" and add it to the comment
  • Sometimes getting raw markdown is tricky, appending the output works everytime: Improve langanguage in this list, output it as raw markdown
  • ⭐ Make documentation that includes documentation regarding method parameters: improve comment for the selected code (add parameter comments) or add parameter doc to comment regarding the selected code
  • Consolidate parameters into a group: consolidate params into parameters: style syntax alternative: consolidate params into parameters in the selected comment
  • ⭐ Make a list of raw urls to a nice descriptive markdown list that describe what the urls link to: convert to markdown links with text as a short oneline about the content in the link (1. output as raw markdown, 2. format as markdown links, 3. description first, 4. link last, 5. as a list)
  • "Numerify" a list: make this list numerical, output in raw markdown

List to table: `

img

Structure:

Improve code structure

  • Convert code to tripple qoute multiline text: complete fixme + fix use triple quote string multiline fencing -> """..."""
  • ⭐ Lint / refactor / improve code based on a set of rules / style guide: improve this code with the rules from https://google.github.io/swift/ (Highlight the code you want to improve)
  • Add class type to variables: add type to vars - > let str = "" -> let str: String = ""
  • ⭐ Improving documentation language: improve the language
  • Make numbers more readable: make the numbers more readable by using _ 0.45353535 -> 0.453_535_35
  • Fix indentation in this file: correct the indentation in the selected code, but don't change the content
  • ⭐ Indent json, yaml, html, css etc: indent the selection properly (don't delete comments)
  • ⭐ Improvoving code: Anything I could improve in this code? This will give you suggestions of how to improve code. Like suggesting global variables in css. Or how to name things better etc.
  • Transform code into a oneliner: (select some code) then prompt: make oneliner:
border-style: solid;
border-width: 4px;
border-color: var(--link-color); 

into this: border: 4px solid var(--link-color);

  • Asking which design pattern to used on a OTP utlity class: what design pattern could we use to refactor this code -> The code in this file is already using the Factory Method design pattern to create OTP accounts. However, the code could be refactored to use the Builder design pattern to make it more flexible and easier to read. The Builder pattern would allow the code to create OTP accounts with optional parameters, making it easier to create accounts with only the necessary parameters. Additionally, the Builder pattern would allow the code to create OTP accounts with default values for optional parameters, making it easier to create accounts with default values.

Refactor:

Refactor code

  • If you have some Fixme or Todo comments in a comment. You can highlight them and prompt: complete fixme and the LLM will try to complete the tasks. If they are not too complex.
  • Converting From one framework to another: (From UIKit to swiftUI) how would this look like in swiftui?
  • Invert and replace colors: whats the inverted color values of the selection? then replace the values. This will invert any color in a text selection and replace the values
  • ⭐ Combine tasks (if they are connected and simple enough) like: structure this with each case on each line and comment the line, put the comment at the end of the line (for switch, case, enum etc)
  • Restructure a one-liner to use more vertical space: 1. restructure the selected line to use more vertical space. 2. comment each line 3. append the comment to the end of the line
    • More adamant restructure prompt in steps (if the above fails): restructure the selected line to use more vertical space. then add inline comments to the selected code, append comment to end of line, not above it ⚠️️ (A good idea could be to get an overall comment for the higherlevel meaning of a line before it is "exploded") ⚠️
    • Even more adamant: 1. Add more vertical space in the selected code by making a new line after each comma. 2. For each new line created append a comment about that line to the end of the line (append comments to the end)
    • ⭐ Nuclear option: Add more vertical space in the selected code by making a new line after each comma. Then make a meaningful comment about each line, and add that comment to the end of the line to the far right
  • Add type to a variable: add the type to the variable I.e: var str = "Hello" after -> var str: String = "Hello"
  • ⭐️ Refactor a ternary to if else: refactor the ternary to use if else
  • Refactor if else to a ternary: Refactor if else to a ternary
  • Renaming classes: Can you suggest some alternative names for the selected class name? followed by some more?
  • ⭐️ Simplify code: is it possible to write the selection simpler? alt: compress selected styles if you want to add a comment: compress selected styles, and add comment to each value describing what they are, append the comment at the end of the line (the last part is key, or css wont be parsed correctly) from this:
padding-left: 24px;
padding-right: 24px;
padding-top: 32px;
padding-bottom: 32px;

into this:

padding: 32px 24px;
  • ⭐ And adding comment that make it more readable: 1. Compress into one style. 2. Append a comment to the end of the line about what properies is represented, (don't include the actual values)
  • ⭐ Format comments in javadoc fencing: use javadoc style commenting fence or if that fails try: Format the comments like this:
/**
 *
 */

Extras:

Extra tips and tricks

  • Asking about a css thingy you have forgotten: I want to target the first .page item with a custom padding. How do I do that? -> .page:first-of-type { padding-top: 20px; } (much faster than going to StackOverflow and wading through unrelated code)
  • Extract values from text. select all the 4 string values output: A list of all text that is 4 in length.
  • Replace values in text: Add one of the values here: "I5Fl, d8j8, XsYY" to the selected text, in place of all id value
  • The LLM is your buddy. Ask it trivial stuff like: whats the link to Monteserrat on google fonts? -> Here's the link to Montserrat on Google Fonts: https://fonts.google.com/specimen/Montserrat or is the correct url to feather icons: https://www.feather-icons.com/? -> Yes, that is the correct URL for Feather Icons.
  • Add code blocks: add jekyll code that gets a value from general.yml with key download-universal output: {{ site.data.general.download-universal }}
  • Ask questions about code like: is the style that is selected vertical or horisontal? style: column-gap: 12px; answer: The column-gap property is used to set the gap between columns in a multi-column layout. So, it is a horizontal style.
  • Find nicer fonts: Recommend fonts are better than we have now? (Using Montserrat) recomends: open sans (similar in style to Montserrat, but has a slightly softer look.) , roboto (clean and modern look, similar to Montserrat.), lato (known for its readability and clean design). Follow up with I want to add link href with all open sans fonts. What does the html element look like for that? to add these fonts to your website
  • Highlight a link in a file. And ask cursor to can you make one sentence summary of the selected link?. The LLM will create text that describes what the website in the link is about. Shorter: whats the selected link about
  • You can generate a commit message based on the changes made: make a commit message based on the changes made or make a commit message
  • Add logic to cryptic .xml config files like .plist: add a comment aboute what each lines does and append it to the end of the line
  • Create random strings with terminal: I need a short random string of 4 in length. how can I generate that with terminal for mac
cat /dev/urandom | LC_CTYPE=C tr -dc 'a-zA-Z0-9' | head -c 4; echo
  • Interpreting code succinctly: describe what this line does, high level to add that description as a comment: describe what this line does, high level, then add that description as a comment to the end of the line (this works on multiline selections as well) alternativly: add a comment to end of each line about what each line represents
  • Create exotic and bright debug colors: rename this to be one two three etc. but keep the prefix. And use a random named color from standard web colors. make the list 30 items long. use more exotic colors. that are strong and bright. but make sure they are named follow up with use real numbers instead of written numbers if you want real numbers from this: --debug-bg-one: blue; to this:
--debug-bg-one: IndianRed;
--debug-bg-two: SeaGreen;
--debug-bg-three: DeepPink;
--debug-bg-four: DodgerBlue;
/*...and so on*/
  • Add comments what each line in a .gitignore file: can you add comments to the selected .gitignore file
# Ignore macOS-specific files
.DS_Store

# Ignore build artifacts
/.build

# Ignore package dependencies
/Packages

# Ignore Xcode project files
/*.xcodeproj

# Ignore Xcode user-specific data
xcuserdata/

Strategy

Ways of thinking about prompt-coding

  • Sometimes going right for a solution too quick just ends up failing.
  • A strategy is sometimes to get something simple working, and then ask the LLM to iterate on that instead.
  • Then step by step add more complex functionality.
  • And sometimes Its better to start over with a different starting point. Like code from another language and ask the llm to convert that to the desired language. and then iterate on that like the gif bellow:

img

The resulting script:

  1. you need to intall python3 first
  2. in terminal cd ~/desktop/
  3. then python3 github_stats.py
import json
import urllib.request
import ssl

username = input("Enter your GitHub username: ")

url = f"https://api.github.com/users/{username}/events"
context = ssl.create_default_context()
context.check_hostname = False
context.verify_mode = ssl.CERT_NONE

req = urllib.request.Request(url)
req.add_header("Accept", "application/vnd.github.v3+json")
with urllib.request.urlopen(req, context=context) as response:
    events = json.loads(response.read())

lines_added = 0
lines_deleted = 0
for event in events:
    if event["type"] == "PushEvent":
        for commit in event["payload"]["commits"]:
            commit_url = commit["url"]
            req = urllib.request.Request(commit_url)
            req.add_header("Accept", "application/vnd.github.v3+json")
            with urllib.request.urlopen(req, context=context) as response:
                commit_data = json.loads(response.read())
                lines_added += commit_data["stats"]["additions"]
                lines_deleted += commit_data["stats"]["deletions"]

print(f"Total lines of code added by {username}: {lines_added}")
print(f"Total lines of code deleted by {username}: {lines_deleted}")
print(f"Net lines of code added by {username}: {lines_added - lines_deleted}")

Conformed refactoring

Refactor based on external ideas / concepts

Refactor something based on the instructions of a github library readme file: Use this example: https://github.com/eonist/With/blob/master/README.md#example and use the same idea on the selected code. But only on the selected code not the entire file follow up with: drop the button value, just return the with closure then drop the return then also use .init directly instead of the class name feathericonbutton

From this:

let button = FeatherIconButton(icon: .xCircle, size: .small)
button.addTarget(self, action: #selector(removeCell), for: .touchUpInside)
return button

to this:

with(FeatherIconButton(icon: .xCircle, size: .small)) {
   $0.addTarget(self, action: #selector(removeCell), for: .touchUpInside)
}

Another name for Conformed refactoring could be: "Constrained refactoring" or "Rule-bound refactoring"

I think of it as "reservoirs of information". We can then query this information with a question we have. In code, I refer to this as "conformed refactoring", where I can ask my "code bot" to rewrite something based on the concept or API of a GitHub README file. Essentially, a book is like a "game cartridge" that you plug in. You can then ask for the top 10 relationship books about the problem you have, and get coached by the books. The chatbot acts as the mediator. Soon, you will be able to do this with Chat GPT-4, now that they are opening up for external sources.

img

This will allow you to get help with a single line of text in the Chat GPT-4 app on your iPhone. For example, if you are having trouble with XYZ, you can ask "According to the book 'Men Are from Mars, Women Are from Venus', how should I solve my problem?".

img

You can also ask external link how to do things like: in the selected link there is a description regarding updating submodules. whats the commandline call it uses? link: https://eon.codes/blog/2021/09/24/sub-module/ output: The article in the selected link describes how to update submodules using the following command: git submodule update --init --recursive 🤯

Check your new productivity:

Proof is in the pudding

  1. save this as github_stats.sh on your desktop.
  2. then in terminal cd~/desktop
  3. then in terminal bash -x commits.sh
  4. Type in your github user-name 👉 And it will spit out your commit count for today
#!/bin/bash

# Prompt the user to enter their GitHub username
read -p "Enter your GitHub username: " username

# Get the total commit count for the user
commit_count=$(curl -s "https://api.github.com/users/$username/events" | grep -c "PushEvent")

# Print the total commit count
echo "Total commit count for $username: $commit_count"

Or check out Github_stats_v2 (With added streak feature)

Here is how the v2 script looks like in action:

img

Bug fixing

Debugging error and fixing bugs

Coming soon

Links:

Resources and links

Todo:

Improvments and todos

  • Structure prompts in a table with TextExpander shortcut. Bonus: Make github copilot chat create the table 🤯
  • Make a bash script that gets LOC for the day for a github user. Without using JQ or python etc. JSON parsing is hard without these. So figure out how to parse json with something else. 🚫
  • Structure TOC into tree structure, group things etc
  • Make v3 of the github script. More stats, avarages etc. Format the output in a table like structure. 👈

img

Got feedback or suggestions? DM me @ x.com/eoncodes or on linkedin

@eonist
Copy link
Author

eonist commented Sep 11, 2024

Cursor as a summariser and find the core of a text: (use gpt4)

What are the main points in this article

@eonist
Copy link
Author

eonist commented Sep 22, 2024

Finding svgs for html img icons: find urls for these svgs

@eonist
Copy link
Author

eonist commented Oct 6, 2024

Handy prompt in cursor to find typos:

find typos in @Codebase

@eonist
Copy link
Author

eonist commented Oct 15, 2024

"Off hour" cleanup in cursor:
find places in the @Codebase that doesnt have parameter documentation

@eonist
Copy link
Author

eonist commented Oct 16, 2024

helpful clean up prompt in cursor:
suggest areas in the @Codebase that we should priortizie improving?

@eonist
Copy link
Author

eonist commented Oct 16, 2024

Make comments more readable:
make this max 80 character wide. without changing the text. just adding more lines and align text to :

More adamant version:
make this max 80 character wide. without changing the text. just adding more lines and make sure text is aligned vertically to the : character

@eonist
Copy link
Author

eonist commented Oct 30, 2024

Future of prompt coding:

I believe the future might involve continuously interacting with our code. Today, one of the main challenges is that our instructions often lack enough context. But with agentic processes, this could soon become the new standard. It would work similarly to sharing ideas with a team member, letting them work on it, and then reviewing their output.

With a voice interface and collaborative agents, I could instruct them to, for example, "Refactor this module," "Reduce complexity," or "Add documentation to improve readability." After some time, results would come back, sometimes with multiple options to choose from. I could then pick one, request further changes, and repeat the process as needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment