@jhm1909/ag-kit 0.1.0

package/.agent/skills/designer/references/trends.md

@@ -0,0 +1,209 @@
+# UI/UX Trends & Research
+
+Current design trends and emerging patterns (2024-2025).
+
+## Major Trends
+
+### 1. Liquid Glass / Glassmorphism 2.0
+
+**What**: Translucent surfaces with subtle blur and layering.
+
+```css
+.glass-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+}
+```
+
+**When to use**: Overlay content, floating panels, premium aesthetics.
+**Watch out**: Performance on mobile, contrast issues.
+
+### 2. AI-Integrated Design
+
+**Patterns**:
+
+- Contextual suggestions inline
+- Generative content placeholders
+- Adaptive interfaces based on behavior
+- Natural language inputs alongside traditional forms
+
+**Implementation tips**:
+
+- Show AI confidence levels
+- Always allow manual override
+- Transparent about AI-generated content
+
+### 3. Bento Grid Layouts
+
+**What**: Asymmetric grid with varying cell sizes, inspired by Japanese bento boxes.
+
+```css
+.bento {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 200px);
+  gap: 16px;
+}
+.bento-large {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+```
+
+**When to use**: Dashboards, portfolios, feature showcases.
+
+### 4. Beyond Flat Design
+
+**Evolution**: Adding depth back without going full skeuomorphic.
+
+- Subtle shadows with purpose
+- 3D elements for emphasis
+- Layered paper-like surfaces
+- Micro-gradients for polish
+
+### 5. Bold Typography as Hero
+
+**Patterns**:
+
+- Oversized headlines (100px+)
+- Mixed weight in single headlines
+- Kinetic typography (scroll-triggered)
+- Variable fonts for dynamic weight
+
+```css
+.hero-text {
+  font-size: clamp(3rem, 10vw, 8rem);
+  font-weight: 900;
+  line-height: 0.9;
+  letter-spacing: -0.02em;
+}
+```
+
+### 6. Sustainable/Ethical UX
+
+**Principles**:
+
+- Low-energy UI (fewer animations, efficient code)
+- Dark mode by default (saves OLED energy)
+- Reduced data transfer (optimized images)
+- Honest patterns (no dark patterns)
+- Privacy-first defaults
+
+### 7. Animated Illustrations & Icons
+
+**Not just static SVGs**:
+
+- Lottie animations for complex motion
+- CSS-animated icons for micro-feedback
+- Scroll-triggered illustration reveals
+
+### 8. Immersive Scroll Experiences
+
+**Techniques**:
+
+- Scroll-linked animations (`scroll-timeline`)
+- Parallax with purpose (not gratuitous)
+- Horizontal scroll sections
+- Scroll snapping for paginated feel
+
+```css
+@keyframes reveal {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.reveal-section {
+  animation: reveal linear;
+  animation-timeline: view();
+  animation-range: entry 20% cover 40%;
+}
+```
+
+## Emerging Technologies
+
+### View Transitions API
+
+```javascript
+// Smooth page transitions
+document.startViewTransition(() => {
+  updateDOM();
+});
+```
+
+### Container Queries
+
+Truly component-based responsive design:
+
+```css
+.card-container {
+  container-type: inline-size;
+}
+
+@container (min-width: 400px) {
+  .card {
+    flex-direction: row;
+  }
+}
+```
+
+### CSS Nesting (Native)
+
+```css
+.card {
+  padding: 16px;
+
+  & .title {
+    font-size: 1.5rem;
+  }
+
+  &:hover {
+    background: var(--color-surface-hover);
+  }
+}
+```
+
+### Popover API
+
+Native popovers without JavaScript:
+
+```html
+<button popovertarget="menu">Open Menu</button>
+<div id="menu" popover>Menu content</div>
+```
+
+## Anti-Trends (What to Avoid)
+
+| Trend                      | Problem                              | Alternative                  |
+| -------------------------- | ------------------------------------ | ---------------------------- |
+| Excessive parallax         | Motion sickness, performance         | Subtle depth, static layers  |
+| Dark patterns              | Erodes trust, potential legal issues | Honest UX                    |
+| Autoplaying video          | Data waste, annoyance                | User-initiated, muted option |
+| Infinite scroll everywhere | Navigation issues, exhaustion        | Pagination or clear sections |
+| Cookie wall overload       | UX friction                          | Minimal, compliant approach  |
+
+## Research Resources
+
+### Stay Updated
+
+- Awwwards (award-winning sites)
+- Dribbble (design exploration)
+- Mobbin (mobile patterns)
+- Nielsen Norman Group (UX research)
+- Smashing Magazine (technical)
+- CSS-Tricks / web.dev (modern CSS)
+
+### Testing New Trends
+
+1. Prototype in isolation first
+2. A/B test with real users
+3. Measure performance impact
+4. Check accessibility compliance
+5. Consider browser support

package/.agent/skills/designer/references/typography.md

@@ -0,0 +1,190 @@
+# Typography Guidelines
+
+Expert typography system for creating distinctive, readable interfaces.
+
+## Font Selection Strategy
+
+### Display vs Body Fonts
+
+| Type    | Purpose              | Characteristics                      |
+| ------- | -------------------- | ------------------------------------ |
+| Display | Headlines, hero text | Distinctive, expressive, limited use |
+| Body    | Paragraphs, UI text  | Highly readable, neutral, versatile  |
+
+### Pairing Principles
+
+1. **Contrast**: Pair serif + sans-serif, or geometric + humanist
+2. **Similar x-height**: Ensures visual harmony
+3. **Shared era/style**: Art Deco display + geometric body works
+4. **Max 2-3 fonts**: Display, body, optional mono
+
+### Quality Indicators
+
+- ✅ Variable font support (weight, width)
+- ✅ Full character set (Latin Extended)
+- ✅ Good OpenType features (ligatures, tabular nums)
+- ✅ Hinting for screen rendering
+- ✅ Multiple weights (3+ for body fonts)
+
+## Typographic Scale
+
+### Modular Scale Ratios
+
+| Ratio | Name             | Formula  | Use Case      |
+| ----- | ---------------- | -------- | ------------- |
+| 1.067 | Minor Second     | Subtle   | Dense UI      |
+| 1.125 | Major Second     | Popular  | General use   |
+| 1.200 | Minor Third      | Moderate | Editorial     |
+| 1.250 | Major Third      | Classic  | Balanced      |
+| 1.333 | Perfect Fourth   | Strong   | High contrast |
+| 1.414 | Augmented Fourth | Bold     | Hero sections |
+| 1.618 | Golden Ratio     | Dramatic | Artistic      |
+
+### Recommended Scale (1.25 base)
+
+```
+text-xs:   0.64rem (10px)
+text-sm:   0.8rem  (13px)
+text-base: 1rem    (16px)
+text-lg:   1.25rem (20px)
+text-xl:   1.563rem (25px)
+text-2xl:  1.953rem (31px)
+text-3xl:  2.441rem (39px)
+text-4xl:  3.052rem (49px)
+text-5xl:  3.815rem (61px)
+```
+
+## Line Height & Spacing
+
+### Line Height by Size
+
+| Text Size | Line Height | Reason                |
+| --------- | ----------- | --------------------- |
+| < 14px    | 1.6-1.8     | Small text needs room |
+| 14-18px   | 1.5-1.6     | Body text sweet spot  |
+| 18-24px   | 1.4-1.5     | Large body            |
+| 24-32px   | 1.3-1.4     | Subheads              |
+| > 32px    | 1.1-1.25    | Headlines tight       |
+
+### Line Length (Measure)
+
+- **Optimal**: 45-75 characters (65 ideal)
+- **Mobile**: 35-50 characters
+- **CSS**: `max-width: 65ch;`
+
+## Text Rendering Best Practices
+
+```css
+body {
+  /* Smooth anti-aliasing */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Optimize for readability */
+  text-rendering: optimizeLegibility;
+
+  /* Better word breaking */
+  overflow-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+h1,
+h2,
+h3 {
+  /* Balance headline wrapping */
+  text-wrap: balance;
+}
+
+p {
+  /* Prevent orphans/widows */
+  text-wrap: pretty;
+}
+```
+
+## Typographic Details
+
+### Essential Glyphs
+
+| Use            | Wrong      | Correct                      |
+| -------------- | ---------- | ---------------------------- |
+| Ellipsis       | ...        | … (`&hellip;`)               |
+| Quotes         | "text"     | "text" (`&ldquo;` `&rdquo;`) |
+| Apostrophe     | it's       | it's (`&rsquo;`)             |
+| Em dash        | --         | — (`&mdash;`)                |
+| En dash        | - (ranges) | – (`&ndash;`)                |
+| Multiplication | x          | × (`&times;`)                |
+
+### Numeric Typography
+
+```css
+/* Tabular for tables/data alignment */
+.data-table {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Oldstyle for prose */
+.prose {
+  font-variant-numeric: oldstyle-nums;
+}
+
+/* Slashed zero for code */
+.code {
+  font-variant-numeric: slashed-zero;
+}
+```
+
+## Responsive Typography
+
+### Fluid Typography
+
+```css
+/* Clamp: min, preferred, max */
+h1 {
+  font-size: clamp(2rem, 5vw + 1rem, 4rem);
+}
+
+body {
+  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
+}
+```
+
+### Container Query Typography
+
+```css
+@container (min-width: 600px) {
+  .card-title {
+    font-size: 1.5rem;
+  }
+}
+```
+
+## Font Loading Strategy
+
+```html
+<!-- Preload critical font -->
+<link
+  rel="preload"
+  href="/fonts/main.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
+```css
+/* Define with fallback stack */
+@font-face {
+  font-family: "MainFont";
+  src: url("/fonts/main.woff2") format("woff2");
+  font-display: swap; /* Show fallback immediately */
+}
+
+body {
+  font-family:
+    "MainFont",
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+```

package/.agent/skills/designer/scripts/remove_background.py

@@ -0,0 +1,135 @@
+import sys
+import os
+import subprocess
+import site
+
+# --- Configuration ---
+# Get the absolute path of the directory containing this script
+SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
+
+# Define local directories for libs and models
+LOCAL_LIB_DIR = os.path.join(SCRIPT_DIR, "libs")
+LOCAL_MODEL_DIR = os.path.join(SCRIPT_DIR, "models")
+
+# IMPORTANT: Add the local lib directory to sys.path immediately
+# This allows us to import packages we install into LOCAL_LIB_DIR
+if LOCAL_LIB_DIR not in sys.path:
+    site.addsitedir(LOCAL_LIB_DIR) # addsitedir handles .pth files correctly
+    sys.path.insert(0, LOCAL_LIB_DIR) # Ensure it's first for priority
+
+# Force rembg/u2net to use our local models directory
+os.environ["U2NET_HOME"] = LOCAL_MODEL_DIR
+
+def install_rembg():
+    print(f"\n[Info] The 'rembg' library is required for background removal.")
+    print(f"[Info] It will be installed LOCALLY into: {LOCAL_LIB_DIR}")
+    print(f"[Info] This will NOT affect your system-wide Python packages.\n")
+    
+    print(f"Installing dependencies to {LOCAL_LIB_DIR}...")
+    os.makedirs(LOCAL_LIB_DIR, exist_ok=True)
+    
+    try:
+        # Install rembg and onnxruntime to the target directory
+        # We also upgrade pip to ensure compatibility
+        subprocess.check_call([
+            sys.executable, "-m", "pip", "install", 
+            "rembg", "onnxruntime", "pillow",
+            "--target", LOCAL_LIB_DIR,
+            "--upgrade"
+        ])
+        print("Installation successful.")
+    except subprocess.CalledProcessError as e:
+        print(f"Failed to install dependencies: {e}")
+        sys.exit(1)
+
+# --- Import Logic ---
+try:
+    # Try importing first. 
+    # If standard import fails, it might be because we just added the path 
+    # and site-packages logic needs a refresh or it's just not there.
+    import rembg
+    from rembg import remove, new_session
+except ImportError:
+    # If missing, install it
+    install_rembg()
+    
+    # After install, we must re-add to site dir to pick up new info
+    site.addsitedir(LOCAL_LIB_DIR)
+    import importlib
+    importlib.invalidate_caches()
+    
+    try:
+        import rembg
+        from rembg import remove, new_session
+    except ImportError as e:
+        print(f"CRITICAL ERROR: Failed to import 'rembg' even after installation.")
+        print(f"Debug Info:")
+        print(f"sys.path: {sys.path}")
+        print(f"LOCAL_LIB_DIR: {LOCAL_LIB_DIR}")
+        print(f"Error: {e}")
+        sys.exit(1)
+
+# Standard imports (will be available now)
+from PIL import Image
+import io
+
+def remove_background(input_path, output_path):
+    print(f"Processing: {input_path} -> {output_path}")
+    
+    if not os.path.exists(input_path):
+        print(f"Error: Input file does not exist: {input_path}")
+        sys.exit(1)
+
+    # The AI model for background removal (~170MB) will be downloaded to LOCAL_MODEL_DIR
+    os.makedirs(LOCAL_MODEL_DIR, exist_ok=True)
+
+    # Load input image
+    try:
+        with open(input_path, 'rb') as i:
+            input_data = i.read()
+    except Exception as e:
+        print(f"Error reading input file: {e}")
+        sys.exit(1)
+
+    # Create session with isnet-general-use (default)
+    # The library handles the download if U2NET_HOME is set and we call new_session
+    print("Initializing AI session (this may trigger the download to {})...".format(LOCAL_MODEL_DIR))
+    try:
+        session = new_session("isnet-general-use")
+    except Exception as e:
+        print(f"Error initializing session: {e}")
+        sys.exit(1)
+
+    # Apply background removal with alpha matting
+    print("Applying background removal...")
+    try:
+        output_data = remove(
+            input_data,
+            session=session,
+            alpha_matting=True,
+            alpha_matting_foreground_threshold=240,
+            alpha_matting_background_threshold=10,
+            alpha_matting_erode=10
+        )
+    except Exception as e:
+        print(f"Error during removal process: {e}")
+        sys.exit(1)
+
+    # Save output
+    try:
+        with open(output_path, 'wb') as o:
+            o.write(output_data)
+        print("Background removal complete.")
+    except Exception as e:
+        print(f"Error writing output file: {e}")
+        sys.exit(1)
+
+if __name__ == "__main__":
+    if len(sys.argv) != 3:
+        print("Usage: python3 remove_background.py <input_path> <output_path>")
+        sys.exit(1)
+        
+    input_file = sys.argv[1]
+    output_file = sys.argv[2]
+    
+    remove_background(input_file, output_file)