@olegkoval/agent-skills 1.38.3 → 1.40.0

package/site/assets/catalog.css

@@ -0,0 +1,1064 @@
+:root {
+  --canvas: #f5f7f4;
+  --surface: #ffffff;
+  --surface-soft: #eef2ee;
+  --ink: #171b18;
+  --ink-soft: #5c665f;
+  --ink-faint: #7a837d;
+  --line: #dce2dc;
+  --line-strong: #c4cec6;
+  --accent: #365b4a;
+  --accent-deep: #294638;
+  --accent-soft: #e4eee7;
+  --focus: #1c66c2;
+  --radius: 14px;
+  --display: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: var(--ink);
+  background: var(--canvas);
+  font-family: var(--body);
+  font-size: 16px;
+  line-height: 1.55;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 20;
+  height: 4px;
+  background: var(--accent);
+}
+
+a {
+  color: inherit;
+  text-decoration-color: var(--line-strong);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+}
+
+a:hover {
+  text-decoration-color: var(--accent);
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+summary:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 3px;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+code,
+pre {
+  font-family: var(--mono);
+}
+
+.skip-link {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 100;
+  padding: 9px 12px;
+  border-radius: 7px;
+  background: var(--ink);
+  color: white;
+  transform: translateY(-160%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.shell {
+  width: min(1180px, calc(100% - 40px));
+  margin: 0 auto;
+}
+
+.masthead {
+  display: flex;
+  min-height: 78px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  border-bottom: 1px solid var(--line);
+}
+
+.identity,
+.masthead nav,
+.colophon div {
+  display: flex;
+  align-items: center;
+}
+
+.identity {
+  gap: 14px;
+}
+
+.wordmark {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-family: var(--display);
+  font-size: 18px;
+  font-weight: 650;
+  letter-spacing: -0.025em;
+  text-decoration: none;
+}
+
+.wordmark > span {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--accent);
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.maker {
+  padding-left: 14px;
+  border-left: 1px solid var(--line-strong);
+  color: var(--ink-soft);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.maker:hover,
+.masthead nav a:hover {
+  color: var(--accent);
+}
+
+.masthead nav {
+  gap: 24px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.masthead nav a {
+  text-decoration: none;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
+  gap: clamp(48px, 8vw, 112px);
+  align-items: center;
+  padding: clamp(72px, 10vw, 132px) 0 clamp(80px, 11vw, 144px);
+}
+
+.hero-copy,
+.hero-command,
+.section-heading > *,
+.plugin-card,
+.skill-card,
+.install-grid > article,
+.command {
+  min-width: 0;
+}
+
+.eyebrow {
+  margin: 0 0 14px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+.hero h1,
+.detail-head h1,
+.not-found h1 {
+  margin: 0;
+  font-family: var(--display);
+  font-size: clamp(52px, 8vw, 94px);
+  font-weight: 600;
+  letter-spacing: -0.055em;
+  line-height: 0.98;
+}
+
+.lede {
+  max-width: 65ch;
+  margin: 28px 0 0;
+  color: var(--ink-soft);
+  font-size: clamp(17px, 2vw, 20px);
+  line-height: 1.55;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 32px;
+}
+
+.button {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 16px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  font-weight: 650;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.button-primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: white;
+}
+
+.button-primary:hover {
+  border-color: var(--accent-deep);
+  background: var(--accent-deep);
+}
+
+.button-secondary {
+  border-color: var(--line-strong);
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.button-secondary:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.facts {
+  margin: 26px 0 0;
+  color: var(--ink-faint);
+  font-size: 13px;
+}
+
+.facts span {
+  padding: 0 7px;
+  color: var(--line-strong);
+}
+
+.facts strong {
+  color: var(--ink);
+}
+
+.hero-command {
+  padding: clamp(24px, 4vw, 36px);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: var(--surface);
+}
+
+.hero-command h2 {
+  margin: 0 0 24px;
+  font-family: var(--display);
+  font-size: 30px;
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  line-height: 1.12;
+}
+
+.hero-command > p:last-child {
+  margin: 20px 0 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.section {
+  padding: clamp(72px, 9vw, 112px) 0;
+  border-top: 1px solid var(--line);
+  scroll-margin-top: 24px;
+}
+
+.section-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
+  gap: 48px;
+  align-items: end;
+  margin-bottom: 38px;
+}
+
+.section-heading h2 {
+  max-width: 15ch;
+  margin: 0;
+  font-family: var(--display);
+  font-size: clamp(38px, 5vw, 62px);
+  font-weight: 600;
+  letter-spacing: -0.045em;
+  line-height: 1.02;
+}
+
+.section-heading > p {
+  max-width: 48ch;
+  margin: 0;
+  color: var(--ink-soft);
+}
+
+.section-note {
+  margin: 26px 0 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.plugin-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.plugin-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 22px;
+  min-height: 220px;
+  padding: 24px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.plugin-card h3 {
+  margin: 0 0 12px;
+  font-family: var(--display);
+  font-size: 25px;
+  font-weight: 650;
+  letter-spacing: -0.035em;
+}
+
+.plugin-card h3 a {
+  text-decoration: none;
+}
+
+.plugin-card h3 a:hover {
+  color: var(--accent);
+}
+
+.plugin-card p {
+  max-width: 58ch;
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.install-line {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  align-self: end;
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+}
+
+.install-line code {
+  overflow: hidden;
+  color: var(--ink-soft);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.copy-icon,
+.copy {
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.copy-icon:hover,
+.copy:hover {
+  color: var(--accent-deep);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) auto auto auto;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 26px;
+}
+
+.controls > label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+#q {
+  min-height: 48px;
+  padding: 11px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 10px;
+  background: var(--surface);
+  color: var(--ink);
+}
+
+#q::placeholder {
+  color: var(--ink-faint);
+}
+
+.controls details {
+  position: relative;
+}
+
+.controls summary {
+  min-height: 48px;
+  padding: 12px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 10px;
+  background: var(--surface);
+  font-size: 13px;
+  font-weight: 650;
+  cursor: pointer;
+  list-style: none;
+}
+
+.controls summary::-webkit-details-marker {
+  display: none;
+}
+
+.controls summary span::before {
+  content: "+";
+  padding-left: 10px;
+  color: var(--ink-faint);
+}
+
+.controls details[open] summary span::before {
+  content: "−";
+}
+
+.chips {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  width: min(520px, calc(100vw - 40px));
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 8px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface);
+  box-shadow: 0 18px 40px rgba(23, 27, 24, 0.12);
+}
+
+.chip {
+  padding: 7px 10px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink-soft);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.chip span {
+  padding-left: 4px;
+  color: var(--ink-faint);
+}
+
+.chip:hover,
+.chip[aria-pressed="true"] {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent-deep);
+}
+
+.count {
+  margin: 0;
+  color: var(--ink-faint);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.skill-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.skill-card {
+  position: relative;
+  display: flex;
+  min-height: 272px;
+  flex-direction: column;
+  gap: 14px;
+  padding: 22px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  transition: border-color 160ms ease, background 160ms ease;
+}
+
+.skill-card:hover,
+.skill-card:focus-within {
+  border-color: var(--line-strong);
+  background: #fbfcfb;
+}
+
+.skill-card[hidden] {
+  display: none;
+}
+
+.skill-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--ink-faint);
+  font-size: 11px;
+}
+
+.skill-card-top > span {
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.skill-card-top code {
+  overflow: hidden;
+  max-width: 56%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.skill-card h3 {
+  margin: 2px 0 0;
+  font-family: var(--display);
+  font-size: 23px;
+  font-weight: 650;
+  letter-spacing: -0.035em;
+  line-height: 1.15;
+}
+
+.skill-card h3 a {
+  text-decoration: none;
+}
+
+.skill-card h3 a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.skill-card p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: auto 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tags li {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--surface-soft);
+  color: var(--ink-soft);
+  font-size: 11px;
+}
+
+.empty {
+  margin: 24px 0 0;
+  padding: 42px;
+  border: 1px dashed var(--line-strong);
+  border-radius: var(--radius);
+  color: var(--ink-soft);
+  text-align: center;
+}
+
+.empty[hidden] {
+  display: none;
+}
+
+.install-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.install-grid > article {
+  padding: 24px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.install-grid h3 {
+  margin: 0 0 8px;
+  font-family: var(--display);
+  font-size: 24px;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+}
+
+.install-grid article > p {
+  min-height: 48px;
+  margin: 0 0 18px;
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.command {
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--ink);
+  color: #eef2ee;
+}
+
+.command-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: #aeb9b1;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.command .copy {
+  color: #cfe1d4;
+}
+
+.command pre {
+  margin: 0;
+  padding: 14px 12px;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.quiet-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--accent);
+  font-weight: 650;
+}
+
+.crumb {
+  display: flex;
+  gap: 8px;
+  margin: 0;
+  padding: 36px 0 0;
+  color: var(--ink-faint);
+  font-size: 13px;
+}
+
+.detail-head {
+  max-width: 900px;
+  padding: clamp(60px, 9vw, 116px) 0 64px;
+}
+
+.detail-head h1 {
+  font-size: clamp(50px, 8vw, 88px);
+}
+
+.detail-head > p:last-child {
+  max-width: 66ch;
+  margin: 28px 0 0;
+  color: var(--ink-soft);
+  font-size: 19px;
+}
+
+.meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.meta div {
+  padding: 22px 20px 22px 0;
+}
+
+.meta dt {
+  margin-bottom: 6px;
+  color: var(--ink-faint);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.meta dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.detail-use .install-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.compact-section {
+  padding-bottom: 0;
+}
+
+.detail-tags {
+  justify-content: flex-start;
+  margin-top: 18px;
+}
+
+.detail-tags a {
+  text-decoration: none;
+}
+
+.pager {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 72px 0 0;
+}
+
+.pager a {
+  display: flex;
+  min-height: 104px;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  font-family: var(--display);
+  font-size: 20px;
+  font-weight: 650;
+  text-decoration: none;
+}
+
+.pager a:last-child {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.pager span {
+  margin-bottom: 6px;
+  color: var(--ink-faint);
+  font-family: var(--body);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.not-found {
+  max-width: 760px;
+  padding: 140px 0;
+}
+
+.not-found p:not(.eyebrow) {
+  margin: 24px 0 30px;
+  color: var(--ink-soft);
+  font-size: 19px;
+}
+
+.colophon {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 96px;
+  padding: 26px 0 40px;
+  border-top: 1px solid var(--line);
+  color: var(--ink-soft);
+  font-size: 13px;
+}
+
+.colophon p {
+  margin: 0;
+}
+
+.colophon div {
+  gap: 18px;
+}
+
+.text-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--line-strong);
+  text-underline-offset: 4px;
+  cursor: pointer;
+}
+
+.consent {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  left: 20px;
+  z-index: 50;
+  display: flex;
+  width: min(760px, calc(100% - 40px));
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin: 0 auto;
+  padding: 18px;
+  border: 1px solid #37413a;
+  border-radius: 14px;
+  background: var(--ink);
+  color: white;
+  box-shadow: 0 20px 48px rgba(23, 27, 24, 0.24);
+}
+
+.consent[hidden] {
+  display: none;
+}
+
+.consent strong {
+  display: block;
+  font-size: 14px;
+}
+
+.consent p {
+  max-width: 54ch;
+  margin: 4px 0 0;
+  color: #c7d0ca;
+  font-size: 12px;
+}
+
+.consent-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+.consent .button-secondary {
+  border-color: #59655d;
+  background: transparent;
+  color: white;
+}
+
+.consent .button-primary {
+  border-color: #dce9df;
+  background: #dce9df;
+  color: var(--accent-deep);
+}
+
+@media (max-width: 960px) {
+  .hero,
+  .section-heading {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    gap: 50px;
+  }
+
+  .hero-command {
+    max-width: 640px;
+  }
+
+  .section-heading {
+    gap: 18px;
+  }
+
+  .controls {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  #q {
+    grid-column: 1 / -1;
+  }
+
+  .count {
+    justify-self: end;
+  }
+
+  .skill-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .detail-use .install-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .shell {
+    width: min(100% - 28px, 1180px);
+  }
+
+  .masthead {
+    align-items: flex-start;
+    padding: 18px 0;
+  }
+
+  .identity {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .maker {
+    padding-left: 39px;
+    border: 0;
+  }
+
+  .masthead nav {
+    justify-content: flex-end;
+    gap: 12px 16px;
+  }
+
+  .masthead nav a:nth-child(3) {
+    display: none;
+  }
+
+  .hero {
+    grid-template-columns: 1fr;
+    padding-top: 72px;
+  }
+
+  .hero h1 {
+    font-size: clamp(48px, 15vw, 72px);
+  }
+
+  .plugin-grid,
+  .skill-grid,
+  .install-grid,
+  .meta,
+  .pager {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .plugin-card,
+  .skill-card {
+    min-height: 0;
+  }
+
+  .controls {
+    grid-template-columns: 1fr;
+  }
+
+  #q,
+  .count {
+    grid-column: auto;
+  }
+
+  .count {
+    justify-self: start;
+  }
+
+  .controls details,
+  .controls summary {
+    width: 100%;
+  }
+
+  .chips {
+    right: auto;
+    left: 0;
+  }
+
+  .install-grid article > p {
+    min-height: 0;
+  }
+
+  .colophon,
+  .consent {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .colophon div,
+  .consent-actions {
+    justify-content: space-between;
+  }
+
+  .consent .button {
+    flex: 1;
+  }
+}
+
+@media (max-width: 470px) {
+  .masthead {
+    flex-direction: column;
+  }
+
+  .masthead nav {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .hero-actions .button {
+    width: 100%;
+  }
+
+  .install-line code {
+    max-width: 72%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media print {
+  body {
+    background: white;
+  }
+
+  .masthead nav,
+  .controls,
+  .consent,
+  .copy,
+  .copy-icon {
+    display: none;
+  }
+}