You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .github/workflows/codeql.yml
+44-44Lines changed: 44 additions & 44 deletions
Original file line number
Diff line number
Diff line change
@@ -13,11 +13,11 @@ name: "CodeQL Advanced"
13
13
14
14
on:
15
15
push:
16
-
branches: ["main"]
16
+
branches: ["main"]
17
17
pull_request:
18
-
branches: ["main"]
18
+
branches: ["main"]
19
19
schedule:
20
-
- cron: '23 2 * * 2'
20
+
- cron: "23 2 * * 2"
21
21
22
22
jobs:
23
23
analyze:
@@ -43,10 +43,10 @@ jobs:
43
43
fail-fast: false
44
44
matrix:
45
45
include:
46
-
- language: actions
47
-
build-mode: none
48
-
- language: javascript-typescript
49
-
build-mode: none
46
+
- language: actions
47
+
build-mode: none
48
+
- language: javascript-typescript
49
+
build-mode: none
50
50
# CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
51
51
# Use `c-cpp` to analyze code written in C, C++ or both
52
52
# Use 'java-kotlin' to analyze code written in Java, Kotlin or both
@@ -56,45 +56,45 @@ jobs:
56
56
# If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
57
57
# your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
58
58
steps:
59
-
- name: Checkout repository
60
-
uses: actions/checkout@v5
59
+
- name: Checkout repository
60
+
uses: actions/checkout@v5
61
61
62
-
# Add any setup steps before running the `github/codeql-action/init` action.
63
-
# This includes steps like installing compilers or runtimes (`actions/setup-node`
64
-
# or others). This is typically only required for manual builds.
65
-
# - name: Setup runtime (example)
66
-
# uses: actions/setup-example@v1
62
+
# Add any setup steps before running the `github/codeql-action/init` action.
63
+
# This includes steps like installing compilers or runtimes (`actions/setup-node`
64
+
# or others). This is typically only required for manual builds.
65
+
# - name: Setup runtime (example)
66
+
# uses: actions/setup-example@v1
67
67
68
-
# Initializes the CodeQL tools for scanning.
69
-
- name: Initialize CodeQL
70
-
uses: github/codeql-action/init@v3
71
-
with:
72
-
languages: ${{ matrix.language }}
73
-
build-mode: ${{ matrix.build-mode }}
74
-
# If you wish to specify custom queries, you can do so here or in a config file.
75
-
# By default, queries listed here will override any specified in a config file.
76
-
# Prefix the list here with "+" to use these queries and those in the config file.
68
+
# Initializes the CodeQL tools for scanning.
69
+
- name: Initialize CodeQL
70
+
uses: github/codeql-action/init@v3
71
+
with:
72
+
languages: ${{ matrix.language }}
73
+
build-mode: ${{ matrix.build-mode }}
74
+
# If you wish to specify custom queries, you can do so here or in a config file.
75
+
# By default, queries listed here will override any specified in a config file.
76
+
# Prefix the list here with "+" to use these queries and those in the config file.
77
77
78
-
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
79
-
# queries: security-extended,security-and-quality
78
+
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
79
+
# queries: security-extended,security-and-quality
80
80
81
-
# If the analyze step fails for one of the languages you are analyzing with
82
-
# "We were unable to automatically build your code", modify the matrix above
83
-
# to set the build mode to "manual" for that language. Then modify this step
84
-
# to build your code.
85
-
# ℹ️ Command-line programs to run using the OS shell.
86
-
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
87
-
- if: matrix.build-mode == 'manual'
88
-
shell: bash
89
-
run: |
90
-
echo 'If you are using a "manual" build mode for one or more of the' \
91
-
'languages you are analyzing, replace this with the commands to build' \
92
-
'your code, for example:'
93
-
echo ' make bootstrap'
94
-
echo ' make release'
95
-
exit 1
81
+
# If the analyze step fails for one of the languages you are analyzing with
82
+
# "We were unable to automatically build your code", modify the matrix above
83
+
# to set the build mode to "manual" for that language. Then modify this step
84
+
# to build your code.
85
+
# ℹ️ Command-line programs to run using the OS shell.
86
+
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
87
+
- if: matrix.build-mode == 'manual'
88
+
shell: bash
89
+
run: |
90
+
echo 'If you are using a "manual" build mode for one or more of the' \
91
+
'languages you are analyzing, replace this with the commands to build' \
Copy file name to clipboardExpand all lines: .github/workflows/copilot-setup-steps.yml
-1Lines changed: 0 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -35,5 +35,4 @@ jobs:
35
35
36
36
- name: Install JavaScript dependencies
37
37
run: npm ci
38
-
39
38
# TODO: we probably would want to enhance this with further aspects like e.g. linting or testing. But we would need to determine the tradeoff in between slowing down Copilot with this, as we would most likely run some of this work later on within the PR anyhow.
Copy file name to clipboardExpand all lines: README.md
+23-6Lines changed: 23 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,27 +43,44 @@ designers, and content authors build, maintain, and scale best-of-class digital
43
43
## How to use
44
44
45
45
1.**Install your preferred package** via npm or yarn:
46
-
- For React: `npm i @db-ux/react-core-components`
47
-
- For Angular: `npm i @db-ux/ngx-core-components`
48
-
- For Vue: `npm i @db-ux/v-core-components`
49
-
- For Web Components: `npm i @db-ux/wc-core-components`
50
-
- For styling only: `npm i @db-ux/core-components`
46
+
- For React: `npm i @db-ux/react-core-components`
47
+
- For Angular: `npm i @db-ux/ngx-core-components`
48
+
- For Vue: `npm i @db-ux/v-core-components`
49
+
- For Web Components: `npm i @db-ux/wc-core-components`
50
+
- For styling only: `npm i @db-ux/core-components`
51
51
52
52
2.**Include the CSS styles** as described in the "Styling Dependencies" section of each package's `README`.
53
53
54
54
> **💡 Note**: All framework packages automatically include the necessary foundation styles - you don't need to install `@db-ux/core-foundations` separately!
55
55
56
56
We even provide some [examples of integrations](https://github.com/db-ux-design-system/examples).
57
57
58
+
## AI Agent Support
59
+
60
+
For developers using AI coding assistants like GitHub Copilot or Amazon Q, we provide the [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) tool that automatically adds DB UX Design System documentation to your repository.
61
+
62
+
### Quick Start
63
+
64
+
Run this command in your repository:
65
+
66
+
```shell
67
+
npx @db-ux/agent-cli
68
+
```
69
+
70
+
This will create or update `.github/copilot-instructions.md` with component documentation based on your installed `@db-ux` packages, helping AI agents provide better suggestions.
71
+
72
+
📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**
73
+
58
74
## Creating Custom Components
59
75
60
76
For developers looking to create custom components that extend the design system in their applications, we provide comprehensive guidance:
61
77
62
78
📖 **[Creating Custom Components Guide](docs/creating-custom-components.md)** - Learn how to build your own components using design system foundations
63
79
64
80
This guide covers:
81
+
65
82
-**Setup and Configuration**: Getting started with the design system packages
66
-
-**Design Principles**: Following DB UX Design System guidelines and best practices
83
+
-**Design Principles**: Following DB UX Design System guidelines and best practices
67
84
-**Component Patterns**: Structured approaches to building consistent components
68
85
-**Code Examples**: Practical implementations for cards, forms, navigation, and more
69
86
-**Framework Support**: Specific guidance for React, Vue, Angular, and vanilla HTML/CSS
Copy file name to clipboardExpand all lines: docs/adr/adr-05-copilot-developer-doc.md
-8Lines changed: 0 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,39 +17,32 @@ Key requirements:
17
17
## Decision
18
18
19
19
1. Documentation Format & Location
20
-
21
20
- Use Markdown files per component, stored in packages/components/docs/ or packages/components/src/components/docs/.
22
21
- Central table of contents in docs/llms.txt listing all component docs with relative paths.
23
22
24
23
2. GitHub Copilot Custom Instructions
25
-
26
24
- Place `copilot-instructions.md` in the project root (under .github/) to provide global guidance.
27
25
- Instruct Copilot Chat to load this file automatically; it will include links to llms.txt and recommended file paths.
28
26
29
27
3. Automatic Context Loading
30
-
31
28
- In VS Code and IntelliJ, Copilot Chat will automatically read `.github/copilot-instructions.md` on new chats.
32
29
- To surface specific details, embed documentation (e.g., Button.md) directly in `copilot-instructions.md`.
33
30
34
31
4. Interactive Context Attachment
35
-
36
32
- For deeper or ad-hoc queries, use the "Attach Context" feature in Copilot Chat to load component Markdown files during the session.
37
33
38
34
5. Static Site & Developer Docs (future usage, not part of the current scope)
39
-
40
35
- Integrate component docs via Astro as a package in the monorepo, referencing Markdown sources in packages/components/... .
41
36
- Render pages dynamically under /components/[slug] and /api/[slug] for manual browsing.
42
37
43
38
6. Automated Propagation of Copilot Instructions
44
39
45
40
We add a `postinstall` hook to our component package that:
46
-
47
41
- copies or appends the package-specific file `.github/copilot-instructions.md` to the target project,
48
42
- uses unique markers to automatically replace outdated blocks during future installations,
49
43
- handles missing or already existing files as well as idempotent updates cleanly, ensuring that every installation immediately provides the latest Copilot context for our package.
50
44
51
45
7. Automate generation and propagation of Copilot instructions on package build.
52
-
53
46
- Define `generate:agent` in `package.json` and hook into `prepare`.
54
47
- Only include `*.md` files whose filename matches the parent directory converted to PascalCase (e.g. `custom-select` → `CustomSelect.md`), ensuring no unrelated MDs are merged.
55
48
@@ -62,7 +55,6 @@ Key requirements:
62
55
## Consequences
63
56
64
57
- Pros:
65
-
66
58
- Clear separation: manual design guidance (Markdown) vs. AI context (`copilot-instructions.md` + `llms.txt` snippets).
67
59
- Maintains single source (docs in packages/components/docs).
68
60
- Enables Copilot to provide accurate, component-specific suggestions without manual file opening.
0 commit comments