@canonical/code-standards 0.1.1 → 0.1.3

package/data/css.ttl

@@ -272,13 +272,13 @@ cs:CSSComponentNamingConvention a cs:CodeStandard ;
     cs:hasCategory cs:CSSCategory ;
     cs:description "Component CSS class names must be the kebab-case version of the component's PascalCase name." ;
     cs:do [
-        cs:description "Convert PascalCase component names to kebab-case for CSS classes:
+        cs:description """Convert PascalCase component names to kebab-case for CSS classes:
 - `MyComponent` -> `.ds.my-component`
 - `UserProfile` -> `.ds.user-profile`
-- `Button` -> `.ds.button`"
+- `Button` -> `.ds.button`"""
     ] ;
     cs:dont [
-        cs:description "Use PascalCase or other formats in CSS class names:
+        cs:description """Use PascalCase or other formats in CSS class names:
 - `.ds.MyComponent` (Bad: Not kebab-case)
-- `.ds.user_profile` (Bad: Not kebab-case)"
+- `.ds.user_profile` (Bad: Not kebab-case)"""
     ] .

package/data/icons.ttl

@@ -310,8 +310,8 @@ cs:IconMaskUsage a cs:CodeStandard ;
     cs:hasCategory cs:IconsCategory ;
     cs:description "Icons may use SVG masks to negate or partially negate paths, enabling advanced visual effects such as cutouts and overlays." ;
     cs:do [
-        cs:description "Use SVG <mask> elements to create negative space or overlays in icons.
-Example" ;
+        cs:description """Use SVG <mask> elements to create negative space or overlays in icons.
+Example""" ;
         cs:language "svg" ;
         cs:code """
 <svg width='16' height='16' xmlns='http://www.w3.org/2000/svg'>
@@ -328,8 +328,8 @@ Example" ;
     """
     ] ;
     cs:do [
-        cs:description "Use <rect> with fill="white" to define the mask area, and <path> with fill="black" to subtract shapes.
-Example" ;
+        cs:description """Use <rect> with fill="white" to define the mask area, and <path> with fill="black" to subtract shapes.
+Example""" ;
         cs:language "svg" ;
         cs:code """
 <mask id="mask">
@@ -339,8 +339,8 @@ Example" ;
     """
     ] ;
     cs:do [
-        cs:description "Use opacity on mask paths to achieve partial negation (e.g., faded or semi-transparent cutouts).
-Example" ;
+        cs:description """Use opacity on mask paths to achieve partial negation (e.g., faded or semi-transparent cutouts).
+Example""" ;
         cs:language "svg" ;
         cs:code """
 <mask id="progress-mask">
@@ -350,16 +350,16 @@ Example" ;
     """
     ] ;
     cs:do [
-        cs:description "Reference the mask in the icon's main shape using mask="url(#mask-id)".
-Example" ;
+        cs:description """Reference the mask in the icon's main shape using mask="url(#mask-id)".
+Example""" ;
         cs:language "svg" ;
         cs:code """
 <circle fill='currentColor' cx='8' cy='8' r='7' mask="url(#mask-id)"/>
     """
     ] ;
     cs:dont [
-        cs:description "Use masks without clear purpose or visual benefit.
-Example" ;
+        cs:description """Use masks without clear purpose or visual benefit.
+Example""" ;
         cs:language "svg" ;
         cs:code """
 <!-- Bad: Mask used but has no effect -->
@@ -370,8 +370,8 @@ Example" ;
     """
     ] ;
     cs:dont [
-        cs:description "use non-semantic mask ids or omit mask references in the main shape.
-Example" ;
+        cs:description """use non-semantic mask ids or omit mask references in the main shape.
+Example""" ;
         cs:language "svg" ;
         cs:code """
 <!-- Bad: Non-semantic mask id -->
@@ -382,8 +382,8 @@ Example" ;
     """
     ] ;
     cs:dont [
-        cs:description "rely on masks for simple icons that do not require negative space or overlays.
-Example" ;
+        cs:description """rely on masks for simple icons that do not require negative space or overlays.
+Example""" ;
         cs:language "svg" ;
         cs:code """
 <!-- Bad: Mask used for a simple shape -->

package/data/packaging.ttl

@@ -635,7 +635,7 @@ import { resolveConfig } from "#config";
     """
     ] ;
     cs:do [
-        cs:description "Use `moduleResolution: "nodenext"` (or `"node16"` / `"bundler"`) in `tsconfig.json` so TypeScript resolves subpath imports via `resolvePackageJsonImports` (enabled by default with these settings)" ;
+        cs:description """Use `moduleResolution: "nodenext"` (or `"node16"` / `"bundler"`) in `tsconfig.json` so TypeScript resolves subpath imports via `resolvePackageJsonImports` (enabled by default with these settings)""" ;
         cs:language "json" ;
         cs:code """
 {

package/data/react.ttl

@@ -275,16 +275,16 @@ cs:ComponentNaming a cs:CodeStandard ;
     cs:hasCategory cs:ReactCategory ;
     cs:description "Components must use PascalCase naming and be descriptive of their purpose." ;
     cs:do [
-        cs:description "Use PascalCase and descriptive names for components:
+        cs:description """Use PascalCase and descriptive names for components:
 UserProfile
 NavigationBar
-SearchResultList"
+SearchResultList"""
     ] ;
     cs:dont [
-        cs:description "Use non-PascalCase or unclear names:
+        cs:description """Use non-PascalCase or unclear names:
 userProfile
 navigation_bar
-searchresultlist"
+searchresultlist"""
     ] .
 
 # Hook Naming Standard

package/docs/css.md

@@ -177,7 +177,10 @@ Omit the `.ds` namespace from component selectors.
 
 ## css/selectors/naming-convention
 
-Component CSS class names must be the kebab-case version of the component's PascalCase name.
+Convert PascalCase component names to kebab-case for CSS classes:
+- `MyComponent` -> `.ds.my-component`
+- `UserProfile` -> `.ds.user-profile`
+- `Button` -> `.ds.button`
 
 ### Do
 

package/docs/icons.md

@@ -134,7 +134,8 @@ Use multiple `<g>` elements or an `id` that does not match the filename.
 
 ## icons/svg/mask-usage
 
-Icons may use SVG masks to negate or partially negate paths, enabling advanced visual effects such as cutouts and overlays.
+Use SVG <mask> elements to create negative space or overlays in icons.
+Example
 
 ### Do
 
@@ -154,7 +155,8 @@ Example
 </svg>
 ```
 
-Use <rect> with fill=
+Use <rect> with fill="white" to define the mask area, and <path> with fill="black" to subtract shapes.
+Example
 ```svg
 <mask id="mask">
   <rect width="16" height="16" fill="white"/>
@@ -171,7 +173,8 @@ Example
 </mask>
 ```
 
-Reference the mask in the icon's main shape using mask=
+Reference the mask in the icon's main shape using mask="url(#mask-id)".
+Example
 ```svg
 <circle fill='currentColor' cx='8' cy='8' r='7' mask="url(#mask-id)"/>
 ```

package/docs/packaging.md

@@ -393,7 +393,7 @@ import { PragmaError } from "#error";
 import { resolveConfig } from "#config";
 ```
 
-Use `moduleResolution:
+Use `moduleResolution: "nodenext"` (or `"node16"` / `"bundler"`) in `tsconfig.json` so TypeScript resolves subpath imports via `resolvePackageJsonImports` (enabled by default with these settings)
 ```json
 {
   "compilerOptions": {

package/docs/react.md

@@ -171,7 +171,10 @@ Add redundant prefixes to domain-level files.
 
 ## react/component/naming
 
-Components must use PascalCase naming and be descriptive of their purpose.
+Use PascalCase and descriptive names for components:
+UserProfile
+NavigationBar
+SearchResultList
 
 ### Do
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/code-standards",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Code standards ontology and documentation generator",
   "type": "module",
   "scripts": {

package/skills/add-standard/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: add-standard
+description: Create and add a new code standard to the code-standards package
+---
+
 # Add Standard
 
 Create and add a new code standard to the code-standards package.