Add comprehensive .github/copilot-instructions.md for agent onboarding and code review

[Copilot]

Note

PR created by Copilot agent, following the official GH documentation and their provided prompt

Overview

This PR adds a .github/copilot-instructions.md file to help GitHub Copilot coding agents work more efficiently with the snapcraft.io codebase. This "onboarding" document reduces the time agents spend exploring the repository and helps prevent common build/test failures. It also provides comprehensive guidance for agents performing code reviews.

What's Included

The instructions file provides:

1. Repository Overview

• Clear description of snapcraft.io as a Flask/React web application for the Snap Store
• Tech stack: Python 3.10+, Flask, React 19, TypeScript, Vite 7, Vanilla Framework
• UI Component Libraries: Comprehensive documentation for the three-tier UI framework:
  • Vanilla Framework (base package): Implements styles and HTML patterns as Jinja macros
  • React Components: Implements Vanilla patterns as React components with JS logic for interactions
  • Store Components: Extends React Components with store-specific patterns and functionality
  • Documentation links and coding conventions for all three libraries

2. Critical Build Sequence

Documents the required order of operations:

pip3 install -r requirements.txt
yarn install --immutable                   # Cypress download may fail in restricted networks - OK to ignore
yarn run build                             # REQUIRED before running app or tests

Key finding: yarn run build MUST be run before Flask app or Python tests, as templates reference Vite-built assets in static/js/dist/vite/.

3. Complete Linting & Testing Commands

• All lint commands (Python, JS, SCSS)
• Test commands for both Python and JavaScript
• Important note that Python tests require SECRET_KEY environment variable and built assets

4. Project Architecture

• Concise directory structure showing Flask blueprints, React components, templates, tests
• Key configuration files: vite.config.js, webapp/config.py, .env, Dockerfile
• Flask blueprint architecture and Vite-Flask integration details

5. CI/CD Workflows

• Overview of .github/workflows/pr.yml jobs
• Requirements: sudo chmod -R 777 . needed before dotrun install in CI
• Path-based filtering for linting/testing jobs

6. Known Issues & Workarounds

Documented 5 common issues:

• Cypress binary download failures in restricted networks (safe to ignore)
• Docker volume permission requirements in CI
• Asset building requirement for Python tests
• Linux-specific grep usage in vite.config.js
• Known deprecation warnings to ignore

7. Common Development Tasks

• Standard workflow for code changes
• Adding React components and Flask endpoints
• Brand store configuration

8. Critical Rules

Clear ALWAYS/NEVER guidelines to prevent common mistakes like skipping asset builds or running Python tests without SECRET_KEY.

9. Code Review Guidelines

Comprehensive guidance for agents performing code reviews:

• Verify Best Practices: Check code follows documented patterns, conventions, linting rules, UI framework guidelines (Vanilla/React/Store components), and CONTRIBUTING.md contribution guidelines
• Make Valid Suggestions: Only suggest verified changes aligned with project architecture; ask questions when uncertain
• Highlight Areas Needing Attention: Flag issues with tests, security, performance, accessibility, asset building, and documentation
• Use Conversational Style: Ask questions to understand intent, suggest alternatives conversationally, acknowledge good patterns
• Additional Best Practices: Cover dependency review, error handling, logging security, user-facing messages, accessibility, and ensuring use of existing Vanilla/React/Store components

10. Maintaining These Instructions

• Guidance for agents to update this file when making relevant changes to the repository
• Instructions for code review to flag when changes should be reflected in the instructions
• Examples of what types of changes require updates (build commands, linting tools, project structure, environment variables, CI/CD workflows, development patterns)

Validation

All commands in the instructions were validated:

• ✅ Installed dependencies and built the project
• ✅ Ran all linters (passed)
• ✅ Ran all tests (all passed)
• ✅ Verified build sequence
• ✅ Tested with actual repository setup

Design Decisions

To improve maintainability:

• Removed specific metrics (file counts, test counts, timing information) that become outdated quickly
• Focused on stable information that remains accurate over time
• Added maintenance section to guide agents on keeping instructions up to date
• Added comprehensive code review guidelines to help agents provide constructive, valuable feedback
• Included complete UI framework documentation covering Vanilla Framework, React Components, and Store Components with clear distinctions between their purposes and implementations
• Branch rebased on latest main to include recent changes including CONTRIBUTING.md contribution guidelines
• Added references to CONTRIBUTING.md in Code Review Guidelines and Key Files sections

Size

The file is 168 lines / 1118 words (approximately 2 pages), meeting the requirement to be concise while comprehensive.

Benefits

This will help coding agents:

• Skip redundant repository exploration on each task
• Avoid common build failures (missing assets, wrong command order)
• Understand CI requirements without trial and error
• Follow established patterns for adding components and endpoints
• Save time by trusting validated commands instead of searching
• Keep the instructions up to date as the repository evolves
• Provide constructive, thorough code reviews with conversational feedback
• Understand and correctly use the three-tier UI framework (Vanilla Framework for styles/Jinja macros, React Components for interactive React components, Store Components for store-specific extensions)
• Follow contribution guidelines from CONTRIBUTING.md when proposing changes

Warning

download.cypress.io

• Triggering command: /usr/local/bin/node index.js --exec install (dns block)
• login.ubuntu.com
  • Triggering command: python3 -m unittest discover tests (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Your task is to "onboard" this repository to Copilot coding agent by adding a .github/copilot-instructions.md file in the repository that contains information describing how a coding agent seeing it for the first time can work most efficiently.

You will do this task only one time per repository and doing a good job can SIGNIFICANTLY improve the quality of the agent's work, so take your time, think carefully, and search thoroughly before writing the instructions.

- Reduce the likelihood of a coding agent pull request getting rejected by the user due to generating code that fails the continuous integration build, fails a validation pipeline, or having misbehavior. - Minimize bash command and build failures. - Allow the agent to complete its task more quickly by minimizing the need for exploration using grep, find, str_replace_editor, and code search tools. - Instructions must be no longer than 2 pages. - Instructions must not be task specific.

Add the following high level details about the codebase to reduce the amount of searching the agent has to do to understand the codebase each time:

• A summary of what the repository does.
• High level repository information, such as the size of the repo, the type of the project, the languages, frameworks, or target runtimes in use.

Add information about how to build and validate changes so the agent does not need to search and find it each time.

• For each of bootstrap, build, test, run, lint, and any other scripted step, document the sequence of steps to take to run it successfully as well as the versions of any runtime or build tools used.
• Each command should be validated by running it to ensure that it works correctly as well as any preconditions and postconditions.
• Try cleaning the repo and environment and running commands in different orders and document errors and and misbehavior observed as well as any steps used to mitigate the problem.
• Run the tests and document the order of steps required to run the tests.
• Make a change to the codebase. Document any unexpected build issues as well as the workarounds.
• Document environment setup steps that seem optional but that you have validated are actually required.
• Document the time required for commands that failed due to timing out.
• When you find a sequence of commands that work for a particular purpose, document them in detail.
• Use language to indicate when something should always be done. For example: "always run npm install before building".
• Record any validation steps from documentation.

List key facts about the layout and architecture of the codebase to help the agent find where to make changes with minimal searching.

• A description of the major architectural elements of the project, including the relative paths to the main project files, the location
  of configuration files for linting, compilation, testing, and preferences.
• A description of the checks run prior to check in, including any GitHub workflows, continuous integration builds, or other validation pipelines.
• Document the steps so that the agent can replicate these itself.
• Any explicit validation steps that the agent can consider to have further confidence in its changes.
• Dependencies that aren't obvious from the layout or file structure.
• Finally, fill in any remaining space with detailed lists of the following, in order of priority: the list of files in the repo root, the
  contents of the README, the contents of any key source files, the list of files in the next level down of directories, giving priority to the more structurally important and snippets of code from key source files, such as the one containing the main method.

- Perform a comprehensive inventory of the codebase. Search for and view: - README.md, CONTRIBUTING.md, and all other documentation files. - Search the codebase for build steps and indications of workarounds like 'HACK', 'TODO', etc. - All scripts, particularly those pertaining to build and repo or environment setup. - All build and actions pipelines. - All project files. - All configuration and linting files. - For each file: - think: are the contents or the existence of the file information that the coding agent will need to implement, build, test, validate, or demo a code change? - If yes: - Document the command or information in detail. - Explicitly indicate which commands work and which do not and the order in which commands should be run. - Document any errors encountered as well as the steps taken to workaround them. - Document any other steps or information that the agent can use to reduce time spent exploring or trying and failing to run bash commands. - Finally, explicitly instruct the agent to trust the instructions and only perform a search if the information in the instruction...

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[webteam-app]

Copilot is not a collaborator of the repo

[bartaz]

@copilot The suggested instructions contain some information that can quickly get outdated (such as number of files written in specific programming languages). Remove any unnecessary information like that, so that the instructions are easier to maintain and require less frequent updates.

At the same time include additional instructions for the agent to make sure that these instructions are kept up to date while working on the repo. If agent is used during code review it should also point out whenever it notices changes to the repo that should be reflected in the copilot-instructions file.

[Copilot]

@copilot The suggested instructions contain some information that can quickly get outdated (such as number of files written in specific programming languages). Remove any unnecessary information like ...

Removed outdated metrics (file counts, specific timings) and added a "Maintaining These Instructions" section. The new section guides agents to update this file when making relevant changes and to flag needed updates during code review. Commit: 7fcded5

[bartaz]

@copilot In addition to all the instructions proposed currently for copilot-instructions add a section that will help the Copilot agent be a better code reviewer.

These instructions should include (but not be limited to):

• making sure agent follows the best practices listed in the instructions file and any documentation found in the repository)
• making sure agent makes only valid and verified suggestions that are relevant to the reviewed code
• making sure that agent provides suggestions for human reviewers and code author about parts of the proposed code that may require special attention when reviewing
• making sure that agent when commenting on PR uses a conversational style and asks questions about proposed changes

On top of that feel free to include any other best practices for valuable code reviews.

[Copilot]

@copilot In addition to all the instructions proposed currently for copilot-instructions add a section that will help the Copilot agent be a better code reviewer.

These instructions should includ...

Added a "Code Review Guidelines" section covering:

• Verifying best practices against documentation
• Making valid, verified suggestions aligned with project patterns
• Highlighting areas needing attention (tests, security, performance, accessibility)
• Using conversational style with questions and specific feedback
• Additional best practices for thorough reviews

The section emphasizes asking questions over making uncertain suggestions and provides concrete examples of conversational phrasing. Commit: 8eb2db4

[Copilot]

Pull Request Overview

This PR adds a comprehensive .github/copilot-instructions.md file to help GitHub Copilot coding agents work more efficiently with the snapcraft.io codebase, reducing exploration time and preventing common build/test failures.

Key changes:

• Complete onboarding documentation covering build sequence, project structure, and development workflows
• Detailed code review guidelines to help agents provide constructive feedback
• Maintenance instructions to keep the documentation current

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[bartaz]

@copilot Add information about Vanilla framework being used as a component library and make sure agent follows the Vanilla documentation (https://vanillaframework.io/docs) and coding conventions from its repo (https://github.com/canonical/vanilla-framework/) when proposing and reviewing changes.

[Copilot]

@copilot Add information about Vanilla framework being used as a component library and make sure agent follows the Vanilla documentation (https://vanillaframework.io/docs) and coding conventions from ...

Added Vanilla Framework information in the Repository Overview section with links to documentation (https://vanillaframework.io/docs) and repository conventions (https://github.com/canonical/vanilla-framework/). Also added guidance in Code Review Guidelines to verify UI changes follow Vanilla patterns and use Vanilla components instead of custom implementations where possible. Commit: 2f03466

[edisile]

It's starting to look pretty good, it might also double as a nice guide for human contributors. Some of the instructions in the code review sections might be a bit difficult to actually follow (can the bot detect when a block of HTML is implementing a Vanilla pattern that already exists?), but I guess we can only determine this once we merge this and test it with a few reviews.

@copilot when introducing Vanilla, also add references to the React components implementation (https://github.com/canonical/react-components/) and the Store extension of this library (https://github.com/canonical/store-components). Make sure to highlight the difference between the base Vanilla package (it implements styles and HTML patterns as Jinja macros) and the React implementation (it implements components and patterns along with their associated JS logic to enable interactions).

[bartaz]

@copilot when introducing Vanilla, also add references to the React components implementation (https://github.com/canonical/react-components/) and the Store extension of this library (https://github.com/canonical/store-components). Make sure to highlight the difference between the base Vanilla package (it implements styles and HTML patterns as Jinja macros) and the React implementation (it implements components and patterns along with their associated JS logic to enable interactions).

[Copilot]

It's starting to look pretty good, it might also double as a nice guide for human contributors. Some of the instructions in the code review sections might be a bit difficult to actually follow (can th...

Added references to React Components (https://github.com/canonical/react-components/) and Store Components (https://github.com/canonical/store-components) in the UI Framework section. Clarified that Vanilla Framework base package implements styles/HTML patterns as Jinja macros, while React Components implements these patterns as React components with JS logic for interactions, and Store Components extends this with store-specific functionality. Commit: 2075d7d

@copilot when introducing Vanilla, also add references to the React components implementation (https://github.com/canonical/react-components/) and the Store extension of this library (https://github.c...

Added references to React Components (https://github.com/canonical/react-components/) and Store Components (https://github.com/canonical/store-components) in the UI Framework section. Clarified that Vanilla Framework base package implements styles/HTML patterns as Jinja macros, while React Components implements these patterns as React components with JS logic for interactions, and Store Components extends this with store-specific functionality. Commit: 2075d7d

[bartaz]

@copilot Rebase the branch on top of fresh main branch, and add instruction to follow the contribution guidelines from CONTRIBUTING.md file.

[Copilot]

@copilot Rebase the branch on top of fresh main branch, and add instruction to follow the contribution guidelines from CONTRIBUTING.md file.

Rebased branch on fresh main (includes new CONTRIBUTING.md from commit f457fd7) and added references to CONTRIBUTING.md in the Code Review Guidelines and Key Files sections. Commit: dadcbce

[Lukewh]

👍 LGTM