Added skill file

2026-08-01 03:35:02 -04:00
parent 47e5f7b752
commit d66fded4e0
3 changed files with 137 additions and 4 deletions
--- a/1
+++ b/1
@@ -15,3 +15,4 @@ COPY src /usr/share/nginx/html/src
 COPY index.html /usr/share/nginx/html
 COPY wave.webp /usr/share/nginx/html
 COPY favicon.webp /usr/share/nginx/html
+COPY SKILL.md /usr/share/nginx/html
--- a/SKILL.md
+++ b/SKILL.md
@@ -0,0 +1,126 @@
+---
+name: CSS Utilities
+description: How to style all HTML websites using @ztimson/css-utils (bootstrap inspired)
+modified: 2026-08-01T06:12:28.966Z
+---
+
+# SCSS Utility Framework
+
+A single-file (`_theme.scss`) utility-class system. No build step config needed beyond Sass with the `sass:map` module. Import once globally.
+
+## Theme Setup
+
+All colors/tokens live in `:root` as CSS custom properties — edit these, not the utility classes:
+
+
+```scss
+--theme-background
+--theme-primary
+--theme-accent
+--theme-success
+--theme-info
+--theme-warn
+--theme-danger
+--theme-black
+--theme-white
+
+// Light/dark aware variables (auto via `light-dark()`):
+--theme-surface
+--theme-border
+--theme-text
+--theme-muted
+--theme-lighter (transparent)
+--theme-darker (transparent)
+
+// Breakpoints & spacing
+$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
+$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem);
+```
+
+Force a scheme on any element: `.theme-light` / `.theme-dark`, defaults to system preference.
+
+## "Fix" Classes (reboot/reset helpers)
+
+Apply `.fix` on `body`/root wrapper for all resets, or pick individual ones:
+
+| Class            | Purpose                                                     |
+|------------------|-------------------------------------------------------------|
+| `.fix-anchor`    | Styled `<a>` links using `--theme-primary`                  |
+| `.fix-button`    | `cursor: pointer` on enabled buttons                        |
+| `.fix-dom`       | 100% height/width, no margin/padding, box-sizing border-box |
+| `.fix-focus`     | Removes outline/tap highlight                               |
+| `.fix-font`      | Base font sizing/weights for headings & form elements       |
+| `.fix-scrollbar` | Styled webkit scrollbars using `--theme-muted`              |
+| `.fix`           | All of the above                                            |
+
+Other misc: `.center` (absolute centering), `.clamp` (max content width), `.reset` (`all: revert`).
+
+## Color Utilities
+
+Pattern: `.b-{color}` (border), `.bg-{color}` (background + auto contrast text), `.fg-{color}` (text color).
+
+Colors: `black, white, background, background-contrast, primary, primary-contrast, accent, accent-contrast, surface, border, text, muted, lighter, darker, info, success, warn, danger`
+
+Variants: `.bg-{color}-lighter` / `.bg-{color}-darker` (filtered overlay) for `primary, accent, background, surface, info, success, warn, danger, muted`.
+
+`.bg-transparent` also available.
+
+## Typography (`.fs-*`)
+
+- Weight/style: `fs-bolder, fs-bold, fs-normal, fs-lighter, fs-italic, fs-norm`
+- Decoration: `fs-none, fs-strike, fs-underline` (combinable)
+- Size scale: `fs-1`(1rem) → `fs-7`(2.5rem)
+- Wrapping: `fs-break, fs-truncate, fs-nowrap, fs-wrap`
+- Case: `fs-lowercase, fs-uppercase, fs-capitalize`
+
+## Borders
+
+- Radius: `.br-circle, .br-pill`, plus scaled `.br{t|tl|tr|b|bl|br}-{0-5}` (size keys from `$sizes`)
+- Style: `.b-dash, .b-dot, .b-double, .b-none, .b-solid`
+- Width (per breakpoint + direction): `.b-{0-5}`, `.b{s|t|e|b}-{0-5}` (s/t/e/b = left/top/right/bottom, logical-ish)
+
+## Spacing (margin/padding)
+
+Per breakpoint, uses `$sizes` keys (0–5):
+- All sides: `.m-{s}`, `.p-{s}`
+- Axis: `.mx-{s}, .my-{s}, .px-{s}, .py-{s}`
+- Direction: `.m{s|t|e|b}-{size}`, `.p{s|t|e|b}-{size}`
+- Auto: `.m-auto, .mx-auto, .my-auto, .m{dir}-auto`
+
+## Flexbox / Grid Layout
+
+- Display: `.d-{block|inline|inline-block|flex|inline-flex|grid|inline-grid|table|table-row|table-cell|none}`
+- Direction shorthand: `.flex-c` (column), `.flex-cr` (col-reverse), `.flex-r`, `.flex-rr`; inline variants `.flex-inline-*`
+- Grow/shrink: `.flex-fill, .flex-fill-even, .flex-grow-{0-3}, .flex-shrink-{0-3}`
+- Wrap: `.flex-nowrap, .flex-wrap`
+- `align-items/content/self-{start|end|center|baseline|stretch}`
+- `justify-{start|end|center|between|around|evenly}`
+- `gap-{0-5}`
+- `order-{0-5}`
+
+## Position / Sizing
+
+- `.pos-{abs|fix|rel|static|stick}`
+- Offsets (0–100 step via `$divisible`): `.top-{n}, .bottom-{n}, .start-{n}, .end-{n}` (percent)
+- `.h-{n}`, `.w-{n}` (percent) + `.h-auto, .w-auto`
+- `.fit-{contain|cover|fill|scale|none}` (object-fit)
+- `.float-{start|end|none}`
+- `.visible, .hidden` (visibility, not display)
+
+## Other Utilities
+
+- `.animate, .animate-none, .animate-color, .animate-opacity, .animate-pos, .animate-trans`
+- `.o-{0,10,20,25,30,33,34,40,50,60,66,70,75,80,90,100}` (opacity)
+- `.overflow{-x|-y}-{auto|hidden|scroll|visible}`
+- `.shadow-none` to `.shadow-5`, directional `.shadow-{top|bottom|start|end}`, `.shadow-inset-{1,2}`, `.shadow-drop{,-sm,-lg}`, colored `.shadow-{primary|accent|info|success|warn|danger}`
+- `.select-{all|auto|none|text}` (user-select)
+- `.z-{0-5}`
+- `.curs-{name}` — full CSS cursor keyword list (pointer, grab, not-allowed, zoom-in, etc.)
+- `.hover:hover`, `.curs-hover` — brightness(125%) on hover
+- `.align-x, .align-x-start, .align-x-end` (text-align), `.align-y*` (vertical-align)
+
+## Responsive Breakpoints
+
+Every layout/spacing/flex utility above is generated per breakpoint suffix: `-sm-, -md-, -lg-, -xl-` (min-width media queries) plus a `-print-` variant for `@media print`. No suffix = base/xs.
+
+Example: `w-md-50` → 50% width from `md` breakpoint up. `d-lg-flex` → flex display from `lg` up.
--- a/index.html
+++ b/index.html
@@ -59,7 +59,11 @@
 				color: var(--theme-primary); letter-spacing: 0.05em; display: block;
 			}

-			.tagline { font-size: 0.68rem; color: var(--theme-muted); margin-top: 2px; }
+			.tagline {
+				font-size: 0.68rem;
+				color: var(--theme-muted);
+				margin-top: 2px;
+			}

 			.nav-group { padding: 14px 10px 6px; }

@@ -237,7 +241,8 @@
 				<div class="bg-darker h-100">
 					<div class="sidebar-logo bb-1">
 						<span class="wordmark fs-1">@ztimson/css-utils</span>
-						<div class="tagline">Utility-first CSS library</div>
+						<div class="tagline">Utility-first CSS library • <a href="SKILL.md" target="_blank">SKILL.md</a></div>
+
 					</div>
 					<div class="nav-group">
 						<div class="nav-label">Getting Started</div>
@@ -286,6 +291,7 @@
 					<div class="hero-eyebrow fs-1">CSS Utility Library</div>
 					<h1>@ztimson/<strong>css-utils</strong></h1>
 					<p class="hero-sub">Bootstrap-inspired utilities at half the size. All theming through CSS variables — no build step required.</p>
+					<a href="SKILL.md" target="_blank">SKILL.md</a>
 					<div class="hero-stats">
 						<div class="hero-stat"><span class="num">&lt; 100 KB</span><span class="lbl">Uncompressed</span></div>
 						<div class="stat-div"></div>
@@ -304,8 +310,8 @@
 						<div class="sub-label">NPM</div>
 						<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>npm install @ztimson/css-utils</code></pre>
 						<div class="sub-label">Import (pick one)</div>
-						<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>@import url("@ztimson/css-utils/dist/css-utils.css");
-@import url("@ztimson/css-utils/dist/css-utils.min.css");
+						<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>@import url("@ztimson/css-utils/dist/css-utils.min.css");
+@import url("@ztimson/css-utils/dist/css-utils.css");
@import url("@ztimson/css-utils/src/main.scss");</code></pre>
 						<div class="sub-label">CDN</div>
 						<pre class="bg-darker p-3 br-2 fg-success fs-1"><code>&lt;link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css"&gt;