Update copilot instructions based on code review feedback

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

Author: Copilot

.github/copilot-instructions.md

@@ -50,7 +50,7 @@ When suggesting components, prefer stable components unless specifically asked f
 - **Ruby**: 3.2.0+
 - **Rails**: 7.2.0+
 - **ViewComponent**: 3.1+ to 5.0
-- **JavaScript/TypeScript**: Component behaviors using Catalyst controllers
+- **JavaScript/TypeScript**: Component behaviors using custom elements (often via Catalyst controllers)
 - **PostCSS**: Component styling
 - **Lookbook**: Component development and documentation tool
 - **Playwright**: Visual regression testing
@@ -143,14 +143,9 @@ class MyComponentElement extends HTMLElement {
     // Initialize
   }
 }
-
-if (!window.customElements.get('my-component')) {
-  window.MyComponentElement = MyComponentElement
-  window.customElements.define('my-component', MyComponentElement)
-}
 ```
 
-**Remember:** Catalyst controllers require a custom element in the component template.
+**Note:** Catalyst automatically handles custom element registration, so the boilerplate `window.customElements.define()` code is not necessary. The custom element must be present in the component template.
 
 #### Styling (PostCSS)
 
@@ -218,28 +213,14 @@ end
 
 ### Playwright Visual Regression Tests
 
-Add component previews to `static/previews.json`:
-
-```json
-{
-  "name": "my_component",
-  "component": "MyComponent",
-  "status": "openproject",
-  "lookup_path": "primer/open_project/my_component",
-  "examples": [
-    {
-      "preview_path": "primer/open_project/my_component/default",
-      "name": "default",
-      "snapshot": "true",
-      "skip_rules": {
-        "wont_fix": ["region"],
-        "will_fix": ["color-contrast"]
-      }
-    }
-  ]
-}
+The `static/previews.json` file is auto-generated by running:
+
+```bash
+bundle exec rake static:dump
 ```
 
+This task is automatically run by the `.github/workflows/static-files.yml` workflow on every push to main. The file contains component preview configurations used for visual regression testing.
+
 Run tests:
 ```bash
 ./script/test           # All tests
@@ -313,12 +294,11 @@ We periodically sync with GitHub's Primer repository. The process:
 - Use `status :open_project` for OpenProject components
 - Document all public APIs with YARD
 - Restrict HTML tags appropriately
-- Use `system_arguments` for HTML attributes
+- Use `system_arguments` for HTML attributes and styling (via utility classes). Full reference: https://primer.style/view-components/lookbook/pages/system_arguments/
 - Follow ViewComponent best practices
 
 ### JavaScript/TypeScript
-- Use Catalyst for interactive components
-- Export custom elements properly
+- Use Web Components for interactive components (consider using Catalyst to DRY up boilerplate involved in creating custom elements)
 - Follow GitHub's JavaScript style guide
 - Use TypeScript for type safety
 
@@ -339,10 +319,9 @@ We periodically sync with GitHub's Primer repository. The process:
 2. **Add changeset** for user-facing changes: `npx changeset`
 3. **Write YARD docs** for new components/public methods
 4. **Add Lookbook previews** to demonstrate usage
-5. **Update `static/previews.json`** for visual regression tests
-6. **Ensure linters pass**: `npm run lint && ./script/rubocop`
-7. **Keep changes focused** - one feature/fix per PR
-8. **Update documentation** if API changes
+5. **Ensure linters pass**: `npm run lint && ./script/rubocop`
+6. **Keep changes focused** - one feature/fix per PR
+7. **Update documentation** if API changes
 
 ## Common Tasks