Skip to content

Instantly share code, notes, and snippets.

@shawn-sandy
Last active March 16, 2025 01:51
Show Gist options
  • Save shawn-sandy/e58329c6bcc94213e13b0b7ef1984f95 to your computer and use it in GitHub Desktop.
Save shawn-sandy/e58329c6bcc94213e13b0b7ef1984f95 to your computer and use it in GitHub Desktop.
gen-ai
# Project Rules
You are an expert in Astro, React, TypeScript, JavaScript, and CSS.
Code Style and Structure
- Write concise, technical TypeScript/JavaScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names.
- Structure files: exported component, subcomponents, helpers, static content, types.
TypeScript Usage
- Use TypeScript for type-checking and enhanced developer experience.
- Prefer interfaces over types for object shapes.
- Use functional components with TypeScript interfaces.
Syntax and Formatting
- Use arrow functions for components and regular functions for utilities.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.
UI and Styling
- Use CSS for styling, leveraging Astro's scoped styles feature.
- Implement responsive design; use a mobile-first approach.
Performance Optimization
- Leverage Astro's partial hydration for interactive components.
- Use Astro's built-in image optimization.
- Implement lazy loading for non-critical components.
Key Conventions
- Use Astro's routing system.
- Optimize Web Vitals (LCP, CLS, FID).
- Utilize Astro's server-side rendering capabilities.
- Use TypeScript for static type checking and improved tooling support.
Follow Astro docs for Data Fetching, Rendering, and Routing, and TypeScript docs for type system features.
Commit Messages
- Always use conventional commit messages for commits
- Format: `<type>(<scope>): <description>`
- Example: `feat(contact): add form validation`
File Structure
- Keep Astro pages in `src/pages/`
- Store styles in `src/styles/`
- Place components in `src/components/`
- Separate Astro and React components into subdirectories
Component Naming
- Use PascalCase for component names
- Suffix Astro components with `.astro`
- Suffix React components with `.tsx`
Styling
- Use SCSS for styling
- Organize component-specific styles in `src/styles/components/`
Code Quality
- Follow consistent indentation and formatting
- Write clear, descriptive comments for complex logic
- Use TypeScript for type safety in React components
Accessibility
- Ensure all interactive elements are keyboard accessible
- Use semantic HTML elements appropriately
Version Control
- Create feature branches for new developments
- Review code before merging into the main branch
Documentation
- Keep README up-to-date with project setup and usage instructions
- Document any non-obvious code or architectural decisions
Astro-specific Rules
- Use `.astro` files for Astro components
- Leverage Astro's static site generation capabilities for performance
- Use `<script>` tags with `is:inline` for small, page-specific scripts
- Utilize Astro's built-in asset optimization for images and styles
React-specific Rules
- Use functional components with hooks instead of class components
- Implement lazy loading for large components or routes
- Use React.memo() for performance optimization when appropriate
- Follow the React naming convention for custom hooks (use`use` prefix)
TypeScript-specific Rules
- Enable strict mode in `tsconfig.json`
- Use interface for object shapes and type for unions/intersections
- Avoid using `any` type; use `unknown` for truly unknown types
- Utilize generics for reusable components and functions
Framework Interoperability
- Use Astro's `client:` directives when integrating React components
- Ensure proper type definitions when passing props between Astro and React
{
"commands": {
"code-review": {
"prompt": "Review the code in selected file and identify issues such as bad practices, incorrect semantic markup, accessibility issues, security, type issues, lint issues, color contrast issues, un-optimized code ect. Write concise, developer friendly, and informational list of recommendations with code examples whenever possible on how to improve, fix or refactor the code. If no issues are found, state that the code looks good and give the developer positive feedback.",
"context": {
"codebase": false,
"selection": true
},
"description": "Get an AI assisted code review of you selected file"
},
"doc-comments": {
"description": "doc-comments",
"prompt": "Generate documentation comments for the chosen code snippet. Ensure that the comments adhere to the doc-comments format and exclude any type inference. The output should solely consist of the comments, without including any of the selected code.",
"context": {
"selection": true
},
"mode": "insert"
},
"typedoc-comments": {
"description": "typedoc-comments",
"prompt": "Write typedoc comments for the selected code. The comments should be in the form of JSDoc comments. Do not output any of the selected code, just the comments.",
"context": {
"selection": true
},
"mode": "insert"
},
"translate": {
"description": "translate",
"prompt": "You are a universal translator you wil translate selections to spanish, german and french using the most common dialect. Output language is a list separated by the language, place a colon between the language name and translation text so that the user can better understand",
"context": {
"selection": true
}
},
"inline-docs": {
"description": "inline-docs",
"prompt": "Add an inline doc comment for each property or type. The comments should describe the purpose, if its optional or required when necessary and expected values, do not output <selected> tag",
"context": {
"selection": true
},
"mode": "replace"
},
"commit-summary": {
"description": "generate a summary of the changes for a commit message",
"prompt": "Act as a lead UX Engineer writing commit messages for your code changes. Write the commit subject following conventional commit rules ans standards, the subject must not be sentence-case, start-case, pascal-case, or contain any upper-case characters. Followed by a short instructional paragraph no that longer 800 characters that summarizes all the code changes found in the git diff for a conventional commit message. The summary should not exceed three paragraphs, be informative, developer friendly and should accurately describe all the latest code changes. Add triple backticks to the start and end so it renders properly as a code block. Do not make assumptions or fabricate additional details, only summarize what is found in the git diff output.",
"context": {
"selection": false,
"command": "git diff"
},
"mode": "ask"
},
"conventional-commit": {
"description": "Conventional Commit",
"prompt": "1) Suggest an informative commit message by summarizing code changes from the shared command output. 2) The commit message should follow the conventional commit format, must be in lowercase, must not contain sentence-case, start-case, pascal-case, upper-case and provide meaningful context for future readers. 3) The message and subject must not be sentence-case, start-case, pascal-case or upper-case. Add a summary of the changes to the commit description place the output in backticks ```. 4) Also review the changes for code that may not meet best practices, WACAG 2.2 accessibility guidelines, follow project guidelines, fail project eslint or typescript rules. inform the developer of these issues, and suggest improvements. 5) If no issues are found, state that the code looks good. 6) If there is no issues do not suggest or comment.",
"context": {
"selection": false,
"command": "git diff"
}
},
"placeholder": {
"description": "placeholder",
"prompt": "generate a paragraph of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected text or file content. Do not include any additional info in the output. If there is no content inform the user that there is no content to generate a placeholder from.",
"context": {
"selection": true,
"currentFile": true
},
"mode": "ask"
},
"placeholder-sentence": {
"description": "AI generated placeholder sentence",
"prompt": "generate a sentence of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected or file content. Do output any additional info",
"context": {
"selection": true,
"currentFile": true
},
"mode": "ask"
},
"placeholder-short": {
"description": "AI generated placeholder 30 words max",
"prompt": "generate a paragraph of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected or file content and no longer that 20 words.",
"context": {
"selection": true,
"currentFile": true
},
"mode": "ask"
},
"placeholder-story": {
"description": "placeholder",
"prompt": "generate a 4 paragraphs of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected text or file content. Do not include any additional info in the output. If there is no content inform the user that there is no content to generate a placeholder from. format for markdown",
"context": {
"selection": true,
"currentFile": true
},
"mode": "ask"
},
"placeholder-story-html": {
"description": "placeholder",
"prompt": "generate a 4 paragraphs of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected text or file content. Do not include any additional info in the output. If there is no content inform the user that there is no content to generate a placeholder from. format for HTML",
"context": {
"selection": true,
"currentFile": true
},
"mode": "ask"
},
"evaluate-code-library-updates": {
"description": "evaluate-code-library-updates",
"prompt": "Evaluate and report on the status of library updates in the current project, suggesting updates for security and feature enhancements.",
"mode": "insert"
},
"generate-readme": {
"description": "readme",
"prompt": "Generate a MDX readme for the selected file place the content in a content box or frame to be copied or inserted in the code. Add triple backticks to the start and end so it renders properly as a code block. Do not make assumptions or fabricate additional details. Focus on describing the purpose, usage and installation of the selected file based on its content and context.",
"context": {
"selection": true,
"currentFile": true
},
"mode": "ask"
},
"document-current-folder": {
"description": "Document the files the current folder using Markdown and insert into file",
"prompt": "Write a detailed README.md file to document the code in the same directory as my current selection. Summarize what the code in this directory is meant to accomplish. Explain the key files, functions, classes, and features. Use Markdown formatting for headings, code blocks, lists, etc. to make it organized and readable. Aim for a beginner-friendly explanation that gives a developer unfamiliar with the code a good starting point to understand it. Ensure to include: - Overview of directory purpose - Functionality explanations - Relevant diagrams or visuals if helpful. Write the README content clearly and concisely using complete sentences and paragraphs based on the shared context. Use proper spelling, grammar, and punctuation throughout. Add triple backticks to the start and end so it renders properly as a code block.. Do not make assumptions or fabricate additional details.",
"context": {
"currentDir": true,
"selection": false
},
"mode": "insert"
},
"pixels-to-rem": {
"description": "pixels-to-rem",
"prompt": "Convert the selection from pixels to rem unit. If the selection is not a css unit do not do anything.",
"mode": "edit"
},
"pixels-to-ch": {
"description": "pixels-to-rem",
"prompt": "Convert the selection from pixels to ch units. If the selection is not a css unit do not do anything.",
"mode": "edit"
}
}
}

Cody AI Commands Configuration

This configuration file defines custom commands for the Cody AI assistant in VS Code. These commands enhance development workflow by providing AI-powered assistance for various coding tasks.

Commands Overview

Code Review

{
  "prompt": "Review the code in selected file and identify issues such as bad practices, incorrect semantic markup, accessibility issues, security, type issues, lint issues, color contrast issues, un-optimized code ect. Write concise, developer friendly, and informational list of recommendations with code examples whenever possible on how to improve, fix or refactor the code. If no issues are found, state that the code looks good and give the developer positive feedback.",
  "context": {
    "codebase": false,
    "selection": true
  },
  "description": "Get an AI assisted code review of you selected file"
}

Documentation Comments

{
  "description": "doc-comments",
  "prompt": "Generate documentation comments for the chosen code snippet. Ensure that the comments adhere to the doc-comments format and exclude any type inference. The output should solely consist of the comments, without including any of the selected code.",
  "context": {
    "selection": true
  },
  "mode": "insert"
}

TypeDoc Comments

{
  "description": "typedoc-comments",
  "prompt": "Write typedoc comments for the selected code. The comments should be in the form of JSDoc comments. Do not output any of the selected code, just the comments.",
  "context": {
    "selection": true
  },
  "mode": "insert"
}

Translation

{
  "description": "translate",
  "prompt": "You are a universal translator you wil translate selections to spanish, german and french using the most common dialect. Output language is a list separated by the language, place a colon between the language name and translation text so that the user can better understand",
  "context": {
    "selection": true
  }
}

Inline Documentation

{
  "description": "inline-docs",
  "prompt": "Add an inline doc comment for each property or type. The comments should describe the purpose, if its optional or required when necessary and expected values, do not output <selected> tag",
  "context": {
    "selection": true
  },
  "mode": "replace"
}

Commit Summary

{
  "description": "generate a summary of the changes for a commit message",
  "prompt": "Act as a lead UX Engineer writing commit messages for your code changes. Write the commit subject following conventional commit rules ans standards, the subject must not be sentence-case, start-case, pascal-case,  or contain any upper-case characters. Followed by a short instructional paragraph no that longer 800 characters that summarizes all the code changes found in the git diff for a conventional commit message. The summary should not exceed three paragraphs, be informative, developer friendly and should accurately describe all the latest code changes. Add triple backticks to the start and end so it renders properly as a code block. Do not make assumptions or fabricate additional details, only summarize what is found in the git diff output.",
  "context": {
    "selection": false,
    "command": "git diff"
  },
  "mode": "ask"
}

Conventional Commit

{
  "description": "Conventional Commit",
  "prompt": "1) Suggest an informative commit message by summarizing code changes from the shared command output. 2) The commit message should follow the conventional commit format, must be in lowercase, must not contain sentence-case, start-case, pascal-case, upper-case and provide meaningful context for future readers. 3) The message and subject must not be sentence-case, start-case, pascal-case or upper-case. Add a summary of the changes to the commit description place the output in backticks ```. 4) Also review the changes for code that may not meet best practices, WACAG 2.2 accessibility guidelines, follow project guidelines, fail project eslint or typescript rules. inform the developer of these issues, and suggest improvements. 5) If no issues are found, state that the code looks good. 6) If there is no issues do not suggest or comment.",
  "context": {
    "selection": false,
    "command": "git diff"
  }
}

Placeholder Text

{
  "description": "placeholder",
  "prompt": "generate a paragraph of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected text  or file content. Do not include any additional info in the output. If there is no content inform the user that there is no content to generate a placeholder from.",
  "context": {
    "selection": true,
    "currentFile": true
  },
  "mode": "ask"
}

Placeholder Sentence

{
  "description": "AI generated placeholder sentence",
  "prompt": "generate a sentence of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected or file content. Do output any additional info",
  "context": {
    "selection": true,
    "currentFile": true
  },
  "mode": "ask"
}

Placeholder Short

{
  "description": "AI generated placeholder 30 words max",
  "prompt": "generate a paragraph of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected or file content and no longer that 20 words.",
  "context": {
    "selection": true,
    "currentFile": true
  },
  "mode": "ask"
}

Placeholder Story

{
  "description": "placeholder",
  "prompt": "generate a 4 paragraphs of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected text or file content. Do not include any additional info in the output. If there is no content inform the user that there is no content to generate a placeholder from. format for markdown",
  "context": {
    "selection": true,
    "currentFile": true
  },
  "mode": "ask"
}

Placeholder Story HTML

{
  "description": "placeholder",
  "prompt": "generate a 4 paragraphs of text that can be used as a placeholder. The output should be a paragraph of text that is not lorem ipsum and is user friendly, the topic should be based on the selected text or file content. Do not include any additional info in the output. If there is no content inform the user that there is no content to generate a placeholder from. format for HTML",
  "context": {
    "selection": true,
    "currentFile": true
  },
  "mode": "ask"
}

Evaluate Code Library Updates

{
  "description": "evaluate-code-library-updates",
  "prompt": "Evaluate and report on the status of library updates in the current project, suggesting updates for security and feature enhancements.",
  "mode": "insert"
}

Generate README

{
  "description": "readme",
  "prompt": "Generate a MDX readme for the selected file place the content in a content box or frame to be copied or inserted in the code. Add triple backticks to the start and end so it renders properly as a code block. Do not make assumptions or fabricate additional details. Focus on describing the purpose, usage and installation of the selected file based on its content and context.",
  "context": {
    "selection": true,
    "currentFile": true
  },
  "mode": "ask"
}

Document Current Folder

{
  "description": "Document the files the current folder using Markdown and insert into file",
  "prompt": "Write a detailed README.md file to document the code in the same directory as my current selection. Summarize what the code in this directory is meant to accomplish. Explain the key files, functions, classes, and features. Use Markdown formatting for headings, code blocks, lists, etc. to make it organized and readable. Aim for a beginner-friendly explanation that gives a developer unfamiliar with the code a good starting point to understand it. Ensure to include: - Overview of directory purpose - Functionality explanations - Relevant diagrams or visuals if helpful. Write the README content clearly and concisely using complete sentences and paragraphs based on the shared context. Use proper spelling, grammar, and punctuation throughout. Add triple backticks to the start and end so it renders properly as a code block.. Do not make assumptions or fabricate additional details.",
  "context": {
    "currentDir": true,
    "selection": false
  },
  "mode": "insert"
}

Pixels to REM

{
  "description": "pixels-to-rem",
  "prompt": "Convert the selection from pixels to rem unit. If the selection is not a css unit do not do anything.",
  "mode": "edit"
}

Pixels to CH

{
  "description": "pixels-to-rem",
  "prompt": "Convert the selection from pixels to ch units. If the selection is not a css unit do not do anything.",
  "mode": "edit"
}

Usage Example

  1. Select code or text in VS Code.
  2. Open command palette (Cmd/Ctrl + Shift + P).
  3. Type "Cody" to see available commands.
  4. Select the desired command.

Technical Details

  • File Location: ~/.vscode/cody.json
  • Format: JSON configuration file
  • Context Options:
    • selection: Uses selected code
    • currentFile: Uses current file content
    • currentDir: Uses current directory
    • command: Uses command output
//drop this file into your .vscode directory for local snippets
{
"JS Styles": {
"scope": "markdown",
"prefix": "style-js",
"body": [
"# Javascript",
"",
"This project uses JavaScript with the following styles:",
"",
" - All models will be classes with singular naming (i.e. `User` for the `users` table)",
" - All code files will be lower case with underscores.",
" - Markdown files will be lower case with hyphens.",
" - All application logic will go in the `lib` directory",
" - All configuration will be done with environment variables, using a `.env` file.",
" - Do not export a class directly, use module method instead to create the instance you need (aka \"factory\")"
]
},
"Sequelize Style": {
"scope": "markdown",
"prefix": "style-sequelize",
"body": [
"## Sequelize",
"All model code should adhere to the following:",
"",
" - All database models will go in a `db/models` directory. ",
" - Every model will have a `tableName` setting",
" - The models will have an `index.js` module that instantiates Sequelize, using SQLite for testing and development, Postgres for production.",
" - The `index.js` module will export each model, as well as the database instance.",
"",
"Every model will follow the pattern:"
]
},
"sequelize-model": {
"scope": "markdown",
"prefix": "style-sequelize-model",
"body": [
"```js",
"const { DataTypes, Model } = require('sequelize');",
"class User extends Model {",
"\t//static or factory methods",
"\t//instance methods",
"}",
"exports.init = function(sequelize){",
"\tUser.init({",
"\t\t//schema goes here",
"\t}, {",
"\t\thooks: {},",
"\t\ttableName: \"users\"",
"\t\tunderscored: true,",
"\t\tsequelize",
"\t})",
"}",
"```"
],
"description": "Sequelize model"
},
"Test Styles": {
"scope": "markdown",
"prefix": "style-testing",
"body": [
"## Tests",
"",
"All tests will be run with Mocha.js using the core `assert` library. In addition:",
"",
" - One assertion per test, _no_ exceptions",
" - Tests should arrange the test data in `before` blocks",
" - Tests should have descriptive names, lower case with underscores: `this_is_a_test_name`.",
" - Tests may use a database, which should always be SQLite in-memory.",
" - The word \"should\" will be avoided in test names. A test either passes or fail, it `is`, `is not`, `does`, or `does not`. There is no try.",
" - Tests will be nested, with the outer `describe` block indicating the main test feature, and the first inner `describe` block being the \"happy path\" - which is what happens when everything works as expected. The rest of the nested blocks will be devoted to \"sad path\" tests, with bad data, null values, and any other unexpected settings we can think of."
]
},
"Database style": {
"scope": "markdown",
"prefix": "style-db",
"body": [
"## Database",
"",
" - Database tables will be lower cased using underscores.",
" - Every table will have an integer primary key called `id`.",
" - `users` will not store passwords, only social login information as well as magic email links.",
" - `char`, `varchar` and `nvarchar` are never to be used for string fields, only `text`.",
" - Every table should have `created_at` and `updated_at` timestamps.",
" - Many to Many relationships will have compound primary keys, never a single ID with compound unique."
]
},
}

Use @terminal when answering questions about Git.

Answer all questions in the style of a friendly colleague, using informal language.

Answer all questions in less than 1000 characters.

write conventional commit message

Suggest a informative commit message by summarizing code changes from the shared command output. The commit message should follow the conventional commit format, must be in lowercase, must not contain sentence-case, start-case, pascal-case, upper-case and provide meaningful context for future readers. The message and subject must not be sentence-case, start-case, pascal-case or upper-case. Add a summary of the changes to the commit description.

  1. Start with a type: feat, fix, docs, style, reactor, test, chore.
  2. Add a scope in parentheses if applicable.
  3. Write a short description in the imperative mood.
  4. Add a body if necessary, separated by a blank line.
  5. Write a short description of the changes made.
  6. Explain or describe the changes in a bullet list.
  7. Be precise and concise when writing the commit message when possible.
  8. Use git diff to see the changes made.
  9. Add a footer for issue references, separated by a blank line.
/**
* GitHub Copilot Chat Extension Settings
* filename: settings.json
* This file contains settings for the GitHub Copilot Chat extension.
* Drop into the .vscode folder of your project to apply these settings.
* https: //code.visualstudio.com/docs/copilot/copilot-customization
*/
{
"github.copilot.chat.codeGeneration.instructions": [
{
"text": "Always add a comment: 'Generated by Copilot'."
},
{
"text": "In TypeScript always use underscore for private field names."
},
{
"text": "In TypeScript always use camelCase for public field names."
},
{
"text": "Always use arrow functions for React components."
},
{
"text": "Always use functional components for React components."
},
{
"text": "Always use the latest version of React."
},
{
"text": "Always use the latest version of TypeScript."
},
{
"text": "Always use the latest version of Node.js."
},
{
"text": "Always use the latest version of npm."
}
],
"github.copilot.chat.commitMessageGeneration.instructions": [
{
"text": "Always write commit messages in the conventional commits format. Write an extremely detailed list of the file changes and the reason for the change in the commit message description."
},
{
"text": "Always add a scope to the commit message."
},
{
"text": "add a footer with a list of all the files changed in the commit."
}
],
"github.copilot.chat.reviewSelection.instructions": [
{
"text": "Check for adherence to coding standards and best practices."
},
{
"text": "Ensure that the code is maintainable and easy to understand."
},
{
"text": "Check for performance optimizations and potential bottlenecks."
},
{
"text": "Verify that the code is properly tested and has sufficient test coverage."
},
{
"text": "Review the code for security vulnerabilities and performance issues."
},
{
"text": "Check for code style and formatting issues."
},
{
"text": "Ensure that the code is well-documented and follows best practices."
},
{
"text": "Check for potential bugs and edge cases."
}
],
"github.copilot.chat.testGeneration.instructions": [
{
"text": "Always use Vitest for testing React components."
},
{
"text": "Use Vitest for testing JavaScript code."
},
{
"text": "Use React Testing Library for testing React components."
},
{
"text": "Use Playwright for end-to-end testing."
},
{
"text": "Use Mock Service Worker (MSW) for mocking API requests."
}
],
"github.copilot.chat.pullRequestDescriptionGeneration.instructions": [
{
"text": "Include a summary of the pull request changes."
},
{
"text": "Mention any related issues or tickets."
},
{
"text": "Include a checklist of items to be reviewed."
},
{
"text": "Include a list of any breaking changes."
},
{
"text": "Include a list of any new dependencies."
},
{
"text": "Include a list of any deprecated features."
},
{
"text": "Include a list of any performance improvements."
},
{
"text": "Include a list of any security improvements."
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment