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/skills/storybook-stories/SKILL.md
+23-10Lines changed: 23 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,20 @@ metadata:
9
9
10
10
# Storybook Stories
11
11
12
-
## File Structure
12
+
## Writing style
13
+
14
+
All prose in `additional.mdx` files and story display names MUST follow the [sgds-writing skill](../../../skills/sgds-writing/SKILL.md). Before writing or editing any `.mdx` documentation, read the sgds-writing skill and apply its rules:
15
+
16
+
-**Sentence case** for all headings (capitalise first word and proper nouns only)
└── additional.mdx Documentation for additional stories
19
32
```
20
33
21
-
### File Concatenation
34
+
### File concatenation
22
35
23
-
`basic.js` is automatically concatenated with `additional.stories.js` at load time. Do NOT import from `basic.js` in `additional.stories.js` —`Template`, `args`, and `parameters` are already in scope.
36
+
`basic.js` is automatically concatenated with `additional.stories.js` at load time. Do NOT import from `basic.js` in `additional.stories.js`.`Template`, `args`, and `parameters` are already in scope.
24
37
25
38
## basic.js Pattern
26
39
@@ -75,11 +88,11 @@ export const ShowMore = {
75
88
76
89
See [reference/examples.md](reference/examples.md) for full real-world component examples.
77
90
78
-
## DRY Rules
91
+
## DRY rules
79
92
80
93
The folder name is the namespace. Strip it from filenames and export names.
SGDS ships a set of **agent skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Claude Code, Cursor, Windsurf, and others) how to build with SGDS correctly.
3
+
SGDS ships a set of **agent skills**: structured knowledge files that teach AI coding assistants (GitHub Copilot, Claude Code, Cursor, Windsurf, and others) how to build with SGDS correctly.
4
4
5
5
Once installed, your AI assistant can answer questions like:
6
6
@@ -32,9 +32,9 @@ Select all existing skills from the list. This pulls the latest skills from the
32
32
33
33
---
34
34
35
-
## Add SGDS to Your Agent Instructions File
35
+
## Add SGDS to your agent instructions file
36
36
37
-
The most reliable way to ensure your agent always uses SGDS skills is to add it to your project's agent instructions file — so the rule is persistent across every session without needing to repeat it.
37
+
The most reliable way to ensure your agent always uses SGDS skills is to add it to your project's agent instructions file, so the rule is persistent across every session without needing to repeat it.
38
38
39
39
Depending on your agent or IDE, add the following to the relevant file:
40
40
@@ -51,18 +51,18 @@ Add a line like:
51
51
When building any UI, always use the SGDS web component library and SGDS Tailwind utilities for styling. Consult the SGDS skills for correct component usage, slot structure, design patterns, and utility classes.
52
52
```
53
53
54
-
This means every new session automatically inherits the SGDS constraint — you never have to remind the agent to use SGDS, and it will consult the skills before reaching for non-SGDS patterns.
54
+
This means every new session automatically inherits the SGDS constraint. You never have to remind the agent to use SGDS, and it will consult the skills before reaching for non-SGDS patterns.
55
55
56
56
---
57
57
58
-
## Available Skills
58
+
## Available skills
59
59
60
60
| Skill | What it covers |
61
61
|---|---|
62
-
|**sgds-workflow**| Start here when unsure. Maps all SGDS skills and the order to use them — new app path and existing app navigation. |
62
+
|**sgds-workflow**| Start here when unsure. Maps all SGDS skills and the order to use them: new app path and existing app navigation. |
63
63
|**sgds-getting-started**| Technical setup: Inter font, CSS import order, component registration, and app layout templates. |
64
-
|**sgds-components**| All 46 `<sgds-*>` web components — accordion through tooltip — with attributes, slots, events, and usage examples. |
65
-
|**sgds-utilities**| All `sgds:` Tailwind utility classes: grid, spacing, typography, color semantics, backgrounds, borders, opacity, and more. |
64
+
|**sgds-components**| All 46 `<sgds-*>` web components (accordion through tooltip) with attributes, slots, events, and usage examples. |
65
+
|**sgds-utilities**| All `sgds:` Tailwind utility classes: grid, spacing, typography, colour semantics, backgrounds, borders, opacity, and more. |
66
66
|**sgds-theming**| Brand colour overrides, day/night mode setup, and font customisation via CSS token overrides. |
67
67
|**sgds-forms**| Form validation using `ElementInternals`, `hasFeedback`, constraint validation, `FormData`, and `setInvalid`. |
68
68
|**sgds-pattern-block-templates**| Application shell (masthead, mainnav, footer) and self-contained UI blocks: filter sidebar, session detail, and more. |
@@ -71,36 +71,36 @@ This means every new session automatically inherits the SGDS constraint — you
71
71
72
72
---
73
73
74
-
## Recommended Workflow
74
+
## Recommended workflow
75
75
76
76
For a **new application**, work through skills in this order:
77
77
78
-
1.**sgds-getting-started** — complete project setup before writing any component code
79
-
2.**sgds-components** + **sgds-utilities** — your day-to-day references while building
80
-
3.**sgds-templates** + **sgds-pattern-block-templates** — when assembling full pages
81
-
4.**sgds-forms** — when any `<form>` element is involved
82
-
5.**sgds-data-visualisation** — only when charts or dashboards are needed
78
+
1.**sgds-getting-started**: complete project setup before writing any component code
79
+
2.**sgds-components** + **sgds-utilities**: your day-to-day references while building
80
+
3.**sgds-templates** + **sgds-pattern-block-templates**: when assembling full pages
81
+
4.**sgds-forms**: when any `<form>` element is involved
82
+
5.**sgds-data-visualisation**: only when charts or dashboards are needed
83
83
84
84
For an **existing application** with sgds v3 setup done, skip setup skills and go directly to the relevant skill using the table above.
85
85
86
86
If unsure where to start, ask your AI assistant to read the **sgds-workflow** skill first.
87
87
88
88
---
89
89
90
-
## How It Works
90
+
## How it works
91
91
92
92
Skills are plain Markdown files structured for AI consumption. Each skill contains:
93
93
94
-
- A **Quick Decision Guide** — decision trees for choosing the right token or component variant
95
-
- An **API Summary** — compact attribute/property tables
96
-
-**Usage examples** — idiomatic HTML the AI can produce and adapt
97
-
-**For AI Agents** section — explicit rules and common mistakes to avoid
94
+
- A **Quick Decision Guide**: decision trees for choosing the right token or component variant
95
+
- An **API Summary**: compact attribute/property tables
96
+
-**Usage examples**: idiomatic HTML the AI can produce and adapt
97
+
-**For AI Agents** section: explicit rules and common mistakes to avoid
98
98
99
-
Skills are read by the agent at query time — they do not add runtime dependencies to your project.
99
+
Skills are read by the agent at query time. They do not add runtime dependencies to your project.
100
100
101
101
---
102
102
103
-
## Keeping Skills Up to Date
103
+
## Keeping skills up to date
104
104
105
105
Run the following command to pull the latest skill updates:
Copy file name to clipboardExpand all lines: docs/Attributes.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
-
# Attributes and Properties
1
+
# Attributes and properties
2
2
3
3
## String
4
4
5
-
The web components uses attributes to set the properties. For example, the variant attribute is used to set the variant property of the button and in turn alters its class and changes its color
5
+
The web components uses attributes to set the properties. For example, the variant attribute is used to set the variant property of the button and in turn alters its class and changes its colour
6
6
7
7
```html
8
8
<sgds-buttonvariant="secondary"></sgds-button>
@@ -18,7 +18,7 @@ Boolean properties are usually false by default. To set it to true, add it as an
18
18
<sgds-inputdisabled></sgds-input>
19
19
```
20
20
21
-
## Objects, Arrays and Functions
21
+
## Objects, arrays, and functions
22
22
23
23
Functions have to be passed in via javascript. For attributes that accepts Objects or Arrays, you can pass in as a JSON string or via javascript.
Copy file name to clipboardExpand all lines: docs/Extendable.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,11 @@ For users who are leveraging on sgds-web-component as a building block to build
4
4
5
5
## Scoped Elements
6
6
7
-
The CustomElementRegistry is a global registry that provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. Scoped Custom Element Registries is a proposal that will solve the problem. Since this functionality won't be available (especially not cross browser) anytime soon, we've adopted [OpenWC's Scoped Elements](https://open-wc.org/docs/development/scoped-elements/).
7
+
The CustomElementRegistry is a global registry that provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. Scoped Custom Element Registries is a proposal that will solve the problem. Since this functionality will not be available (especially not cross browser) anytime soon, we have adopted [OpenWC's Scoped Elements](https://open-wc.org/docs/development/scoped-elements/).
8
8
9
9
From version 3.0.0 onwards, our library has stopped the use of Scoped Elements mixin to dedupe our component registration when reusing components.
10
10
11
-
For users who are building component libraries on top of sgds-web-component and facing clashing registration issues, you can adopt [OpenWC's scoped elements](https://open-wc.org/docs/development/scoped-elements/) to prevent exporting our registered custom elements. Please read up about OpenWC's scoped elements for more updated information.
11
+
For users who are building component libraries on top of sgds-web-component and facing clashing registration issues, you can adopt [OpenWC's scoped elements](https://open-wc.org/docs/development/scoped-elements/) to prevent exporting our registered custom elements. Read up about OpenWC's scoped elements for more updated information.
Copy file name to clipboardExpand all lines: docs/FlashOfUnstyledContent.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Flash of unstyled content
2
2
3
-
Flash of unstyled content (FOUC) is the the momentary flicker where the user sees a page (or a part of it) before styles have finished applying — typically showing raw HTML without CSS styling or custom element rendering.
3
+
Flash of unstyled content (FOUC) is the momentary flicker where the user sees a page (or a part of it) before styles have finished applying, typically showing raw HTML without CSS styling or custom element rendering.
4
4
5
5
Web Components rely on custom elements and Shadow DOM, both of which depend on client-side JavaScript to define and hydrate those components.
Copy file name to clipboardExpand all lines: docs/Grid.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -40,7 +40,7 @@ The **SGDS Grid System** is a mobile-first, fully responsive layout system based
40
40
6.**Centered Columns (`.sgds-col-*-center-*`)**:
41
41
- Horizontally centers grid items by calculating the appropriate starting column (grid-column) based on the number of columns the item spans.
42
42
- Only available for even-numbered column spans (e.g., 2, 4, 6, 8, 10) within a 12-column grid.
43
-
- Example: `.sgds-col-lg-center-4`centers a 4-column-wide item by starting it at column 5 — calculated as `(12 - 4) / 2 = 4`, so it starts at the 5th grid line.
43
+
- Example: `.sgds-col-lg-center-4`centres a 4-column-wide item by starting it at column 5. This is calculated as `(12 - 4) / 2 = 4`, so it starts at the 5th grid line.
44
44
- Enables centered layout alignment without manually adding offset classes or wrappers.
45
45
- Defined per breakpoint (e.g., `-sm-center-*`, `-md-center-*`, etc.) to support responsive designs.
0 commit comments