npm - myagent-ai - Versions diffs - 1.0.0 - Mend

myagent-ai 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (486) hide show

package/skills/visual-design-foundations/references/typography-systems.md ADDED Viewed

@@ -0,0 +1,432 @@
+# Typography Systems Reference
+## Type Scale Construction
+### Modular Scale
+A modular scale creates harmonious relationships between font sizes using a mathematical ratio.
+```tsx
+// Common ratios
+const RATIOS = {
+  minorSecond: 1.067, // 16:15
+  majorSecond: 1.125, // 9:8
+  minorThird: 1.2, // 6:5
+  majorThird: 1.25, // 5:4
+  perfectFourth: 1.333, // 4:3
+  augmentedFourth: 1.414, // √2
+  perfectFifth: 1.5, // 3:2
+  goldenRatio: 1.618, // φ
+};
+function generateScale(
+  baseSize: number,
+  ratio: number,
+  steps: number,
+): number[] {
+  const scale: number[] = [];
+  for (let i = -2; i <= steps; i++) {
+    scale.push(Math.round(baseSize * Math.pow(ratio, i) * 100) / 100);
+  }
+  return scale;
+}
+// Generate a scale with 16px base and perfect fourth ratio
+const typeScale = generateScale(16, RATIOS.perfectFourth, 6);
+// Result: [9, 12, 16, 21.33, 28.43, 37.9, 50.52, 67.34, 89.76]
+```
+### CSS Custom Properties
+```css
+:root {
+  /* Base scale using perfect fourth (1.333) */
+  --font-size-2xs: 0.563rem; /* ~9px */
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-md: 1.125rem; /* 18px */
+  --font-size-lg: 1.333rem; /* ~21px */
+  --font-size-xl: 1.5rem; /* 24px */
+  --font-size-2xl: 1.777rem; /* ~28px */
+  --font-size-3xl: 2.369rem; /* ~38px */
+  --font-size-4xl: 3.157rem; /* ~50px */
+  --font-size-5xl: 4.209rem; /* ~67px */
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  /* Line heights */
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  /* Letter spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+}
+```
+## Font Loading Strategies
+### FOUT Prevention
+```css
+/* Use font-display to control loading behavior */
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter-Variable.woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap; /* Show fallback immediately, swap when loaded */
+}
+/* Optional: size-adjust for better fallback matching */
+@font-face {
+  font-family: "Inter Fallback";
+  src: local("Arial");
+  size-adjust: 107%; /* Adjust to match Inter metrics */
+  ascent-override: 90%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+body {
+  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
+}
+```
+### Preloading Critical Fonts
+```html
+<head>
+  <!-- Preload critical fonts -->
+  <link
+    rel="preload"
+    href="/fonts/Inter-Variable.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+  />
+</head>
+```
+### Variable Fonts
+```css
+/* Variable font with weight and width axes */
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter-Variable.woff2") format("woff2");
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+}
+/* Use font-variation-settings for fine control */
+.custom-weight {
+  font-variation-settings:
+    "wght" 450,
+    "wdth" 95;
+}
+/* Or use standard properties */
+.semi-expanded {
+  font-weight: 550;
+  font-stretch: 110%;
+}
+```
+## Responsive Typography
+### Fluid Type Scale
+```css
+/* Using clamp() for responsive sizing */
+h1 {
+  /* min: 32px, preferred: 5vw + 16px, max: 64px */
+  font-size: clamp(2rem, 5vw + 1rem, 4rem);
+  line-height: 1.1;
+}
+h2 {
+  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  line-height: 1.2;
+}
+p {
+  font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
+  line-height: 1.6;
+}
+/* Fluid line height */
+.fluid-text {
+  --min-line-height: 1.3;
+  --max-line-height: 1.6;
+  --min-vw: 320;
+  --max-vw: 1200;
+  line-height: calc(
+    var(--min-line-height) + (var(--max-line-height) - var(--min-line-height)) *
+      ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))
+  );
+}
+```
+### Viewport-Based Scaling
+```tsx
+// Tailwind config for responsive type
+module.exports = {
+  theme: {
+    fontSize: {
+      xs: ["0.75rem", { lineHeight: "1rem" }],
+      sm: ["0.875rem", { lineHeight: "1.25rem" }],
+      base: ["1rem", { lineHeight: "1.5rem" }],
+      lg: ["1.125rem", { lineHeight: "1.75rem" }],
+      xl: ["1.25rem", { lineHeight: "1.75rem" }],
+      "2xl": ["1.5rem", { lineHeight: "2rem" }],
+      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+      "5xl": ["3rem", { lineHeight: "1" }],
+    },
+  },
+};
+// Component with responsive classes
+function Heading({ children }) {
+  return (
+    <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">
+      {children}
+    </h1>
+  );
+}
+```
+## Readability Guidelines
+### Optimal Line Length
+```css
+/* Optimal reading width: 45-75 characters */
+.prose {
+  max-width: 65ch; /* ~65 characters */
+}
+/* Narrower for callouts */
+.callout {
+  max-width: 50ch;
+}
+/* Wider for code blocks */
+pre {
+  max-width: 80ch;
+}
+```
+### Vertical Rhythm
+```css
+/* Establish baseline grid */
+:root {
+  --baseline: 1.5rem; /* 24px at 16px base */
+}
+/* All margins should be multiples of baseline */
+h1 {
+  font-size: 2.5rem;
+  line-height: calc(var(--baseline) * 2);
+  margin-top: calc(var(--baseline) * 2);
+  margin-bottom: var(--baseline);
+}
+h2 {
+  font-size: 2rem;
+  line-height: calc(var(--baseline) * 1.5);
+  margin-top: calc(var(--baseline) * 1.5);
+  margin-bottom: calc(var(--baseline) * 0.5);
+}
+p {
+  font-size: 1rem;
+  line-height: var(--baseline);
+  margin-bottom: var(--baseline);
+}
+```
+### Text Wrapping
+```css
+/* Prevent orphans and widows */
+p {
+  text-wrap: pretty; /* Experimental: improves line breaks */
+  widows: 3;
+  orphans: 3;
+}
+/* Balance headings */
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+/* Prevent breaking in specific elements */
+.no-wrap {
+  white-space: nowrap;
+}
+/* Hyphenation for justified text */
+.justified {
+  text-align: justify;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+}
+```
+## Font Pairing Guidelines
+### Contrast Pairings
+```css
+/* Serif heading + Sans body */
+:root {
+  --font-heading: "Playfair Display", Georgia, serif;
+  --font-body: "Source Sans Pro", -apple-system, sans-serif;
+}
+/* Geometric heading + Humanist body */
+:root {
+  --font-heading: "Space Grotesk", sans-serif;
+  --font-body: "IBM Plex Sans", sans-serif;
+}
+/* Modern sans heading + Classic serif body */
+:root {
+  --font-heading: "Inter", system-ui, sans-serif;
+  --font-body: "Georgia", Times, serif;
+}
+```
+### Superfamily Approach
+```css
+/* Single variable font family for all uses */
+:root {
+  --font-family: "Inter", system-ui, sans-serif;
+}
+h1 {
+  font-family: var(--font-family);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+p {
+  font-family: var(--font-family);
+  font-weight: 400;
+  letter-spacing: 0;
+}
+.caption {
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+```
+## Semantic Typography Classes
+```css
+/* Text styles by purpose, not appearance */
+.text-display {
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+}
+.text-headline {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+.text-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+.text-body {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+}
+.text-body-sm {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+}
+.text-caption {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+.text-overline {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-widest);
+}
+```
+## OpenType Features
+```css
+/* Enable advanced typography features */
+.fancy-text {
+  /* Small caps */
+  font-variant-caps: small-caps;
+  /* Ligatures */
+  font-variant-ligatures: common-ligatures;
+  /* Numeric features */
+  font-variant-numeric: tabular-nums lining-nums;
+  /* Fractions */
+  font-feature-settings: "frac" 1;
+}
+/* Tabular numbers for aligned columns */
+.data-table td {
+  font-variant-numeric: tabular-nums;
+}
+/* Old-style figures for body text */
+.prose {
+  font-variant-numeric: oldstyle-nums;
+}
+/* Discretionary ligatures for headings */
+.fancy-heading {
+  font-variant-ligatures: discretionary-ligatures;
+}
+```

package/skills/web-reader/LICENSE.txt ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 z-ai-web-dev-sdk Skills
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.