@jungherz-de/glasskit 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -7,6 +7,34 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.3.5] – 2026-04-04
+
+### Added
+
+- **`SKILL.md` – AI-optimized component reference** – a structured, machine-readable reference document designed for LLMs, AI copilots, and code-generation tools
+  - Copy-paste-ready HTML for all 22 components with exact nesting and BEM hierarchy
+  - Complete design token tables (colors, surfaces, borders, blur, radii, spacing, shadows, typography)
+  - State class reference – clear mapping of `is-active`, `is-open`, `is-visible`, `:checked`, `:focus`, `:disabled` to their components
+  - 6 composition patterns – full page layouts: Login, Dashboard, Form, Modal confirmation, Settings, Progress + Toast
+  - Common mistakes & corrections table – prevents frequent AI-generated errors
+  - Quick reference table – all components with modifiers at a glance
+  - Utility class reference with exact gap/margin values
+  - Web Components / Shadow DOM usage guide
+  - Custom theming instructions
+- **Visual preview for Tab-Bar** in `docs.html` and `de/docs.html` – live rendered tab bar with 4 tabs (Home, Documents with badge, Upload, Settings)
+- **Visual preview for Toast** in `docs.html` and `de/docs.html` – static success toast rendered inline
+- **HTML code example for Status Notice** in `docs.html` and `de/docs.html` – was previously preview-only without code snippet
+
+### Changed
+
+- **README.md** – new “AI / LLM Reference” section documenting `SKILL.md` purpose and usage, “AI-ready” added to “Why GlassKit?”
+- **Project structure** in README updated to include `SKILL.md`
+- **docs.html & de/docs.html** – new “AI Reference” / “KI-Referenz” section with sidebar link
+- **index.html & de/index.html** – SKILL.md added to project file list
+- Version references updated to 1.3.5 across all files
+
+---
+
 ## [1.3.3] – 2026-03-21
 
 ### Added
@@ -193,8 +221,10 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.3.5]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.5
+[1.3.4]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.4
 [1.3.3]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.3
 [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
 [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
 [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.3...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.5...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.3.3-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.3.5-orange?style=flat-square" alt="Version">
   <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
   <img src="https://img.shields.io/badge/components-22-green?style=flat-square" alt="Components">
   <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.3-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.5-f5a623?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit?style=flat-square&color=cb3837&label=npm" alt="npm"></a>
   <a href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/"><img src="https://img.shields.io/badge/CDN-jsDelivr-blue?style=flat-square" alt="jsDelivr"></a>
 </p>
@@ -50,6 +50,7 @@ GlassKit is a complete **CSS component library** with glassmorphism aesthetics
 - 🧩 **Shadow DOM ready** – Constructable Stylesheet for Web Components included
 - 🪶 **Lightweight** – ~45 KB (uncompressed), no external dependencies
 - 🎯 **BEM-like naming convention** – `glass-*` prefix, no conflicts with existing CSS
+- 🤖 **AI-ready** – ships with [`SKILL.md`](SKILL.md), a structured reference for LLMs & AI copilots
 
 ---
 
@@ -428,6 +429,7 @@ glasskit/
 ├── showcase.html           # Interactive showcase of all components
 ├── docs.html               # Full documentation
 ├── de/                     # German translations (index, docs, showcase)
+├── SKILL.md                 # AI-optimized component reference (for LLMs & copilots)
 ├── LICENSE                  # MIT License
 └── README.md               # This file
 ```
@@ -444,6 +446,43 @@ The full documentation with **live previews**, **copy-paste code blocks**, and *
 - Theming guide
 - Complete class overview at the end
 
+Live pages:
+- 🌐 Home: https://glasskit.jungherz.com/
+- 📖 Docs: https://glasskit.jungherz.com/docs.html
+- 🧪 Showcase: https://glasskit.jungherz.com/showcase.html
+
+## 🧩 Companion Project: GlassKit Elements
+
+If you want to use GlassKit through **drop-in Web Components** instead of writing the full HTML structure yourself, take a look at **GlassKit Elements**.
+
+GlassKit Elements builds on top of GlassKit CSS and provides a set of vanilla JavaScript custom elements like `glk-button`, `glk-card`, or `glk-input`.
+
+Useful links:
+- GitHub: https://github.com/JUNGHERZ/GlassKit-Elements
+- Live Demo: https://glasskit-elements.jungherz.com/
+- Docs: https://glasskit-elements.jungherz.com/docs.html
+
+---
+
+## 🤖 AI / LLM Reference (`SKILL.md`)
+
+GlassKit ships with an **AI-optimized component reference** in [`SKILL.md`](SKILL.md). This file is designed for LLMs, AI copilots, and code-generation tools to produce correct GlassKit markup without parsing `docs.html`.
+
+### What it provides
+
+- **Copy-paste-ready HTML** for all 22 components with exact nesting rules
+- **Complete design token tables** (colors, surfaces, blur, radii, spacing, shadows, typography)
+- **State class reference** – which class goes where (`is-active`, `is-open`, `is-visible`, `:checked`)
+- **6 composition patterns** – full page layouts (Login, Dashboard, Form, Modal, Settings, Progress)
+- **Common mistakes & corrections** – prevents the most frequent AI-generated errors
+- **Quick reference table** – all components with their modifiers at a glance
+
+### Usage with AI assistants
+
+Attach or reference `SKILL.md` when asking an AI to generate GlassKit HTML. It provides the structured context needed for production-ready output – correct BEM hierarchy, proper modifier usage, and idiomatic component composition.
+
+> **Tip:** While `docs.html` is built for humans browsing with live previews, `SKILL.md` is built for machines generating code. Both are kept in sync.
+
 ---
 
 ## 🌐 Browser Compatibility