fix: add link styling guidance to prevent low-contrast links

nicobailon · nicobailon · commit a9e3994c769f · 2026-03-01T06:58:43.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.4.2] - 2026-03-01
+
+### Link Styling
+- New "Link Styling" section in `css-patterns.md` — never rely on browser default link colors; use accent colors with sufficient contrast
+
 ## [0.4.1] - 2026-03-01
 
 ### Mermaid Layout Direction
diff --git a/SKILL.md b/SKILL.md
@@ -5,7 +5,7 @@ license: MIT
 compatibility: Requires a browser to view generated HTML files. Optional surf-cli for AI image generation.
 metadata:
   author: nicobailon
-  version: "0.4.1"
+  version: "0.4.2"
 ---
 
 # Visual Explainer
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "visual-explainer",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Agent skill that generates beautiful HTML pages for diagrams, diff reviews, plan reviews, and data tables",
   "keywords": ["pi-package"],
   "license": "MIT",
diff --git a/references/css-patterns.md b/references/css-patterns.md
@@ -86,6 +86,10 @@ body {
 }
 ```
 
+## Link Styling
+
+**Never rely on browser default link colors.** The default blue (`#0000EE`) has poor contrast on dark backgrounds. Style links with `color: var(--accent)` and keep underlines for discoverability. On dark backgrounds, use bright accents (`#22d3ee`, `#34d399`, `#fbbf24`). On light backgrounds, use deeper tones (`#0891b2`, `#059669`, `#d97706`).
+
 ## Section / Card Components
 
 The fundamental building block. A colored card representing a system component, pipeline step, or data entity.

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "visual-explainer",`
`3`		`- "version": "0.4.1",`
	`3`	`+ "version": "0.4.2",`
`4`	`4`	`"description": "Agent skill that generates beautiful HTML pages for diagrams, diff reviews, plan reviews, and data tables",`
`5`	`5`	`"keywords": ["pi-package"],`
`6`	`6`	`"license": "MIT",`
Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,10 @@ body {`
`86`	`86`	`}`
`87`	`87`	```
`88`	`88`
	`89`	`+## Link Styling`
	`90`	`+`
	`91`	+Never rely on browser default link colors. The default blue (`#0000EE`) has poor contrast on dark backgrounds. Style links with `color: var(--accent)` and keep underlines for discoverability. On dark backgrounds, use bright accents (`#22d3ee`, `#34d399`, `#fbbf24`). On light backgrounds, use deeper tones (`#0891b2`, `#059669`, `#d97706`).
	`92`	`+`
`89`	`93`	`## Section / Card Components`
`90`	`94`
`91`	`95`	`The fundamental building block. A colored card representing a system component, pipeline step, or data entity.`