vibes-plug 1.0.0 → 2.11.0

package/skills/svg-animation-motion-expert/SKILL.md

@@ -0,0 +1,115 @@
+---
+name: svg-animation-motion-expert
+description: "Expert guide for web animations: SVG manipulation, Framer Motion 12+, GSAP 3, CSS Scroll-Driven Animations, and View Transitions API / Panduan ahli animasi web."
+author: "Roedy Rustam"
+---
+
+# SVG & Web Animation Motion Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A dedicated skill for crafting fluid, high-performance web animations and micro-interactions. Covers direct SVG manipulation (paths, masks, clip-paths), React-based animations using Framer Motion 12+, advanced timeline choreography with GSAP 3, native CSS Scroll-Driven Animations, and the View Transitions API for seamless page navigations.
+
+### Trigger Conditions
+- When building complex landing page animations or scroll reveals.
+- When creating interactive SVG graphics, charts, or diagrams.
+- When the user asks for "buttery smooth", "apple-like", or "dynamic" interactions.
+- When implementing page transitions using the native View Transitions API.
+
+### Core Architecture & Guidelines
+
+#### 1. Framer Motion 12+ (React/Next.js)
+Use Framer Motion for declarative component animations, layout animations, and gesture-driven interactions.
+- **Layout Animations**: Use the `layout` prop to automatically animate between flexbox/grid state changes.
+- **Performance**: Use `style={{ x, y }}` with `useTransform` and `useScroll` instead of triggering React state updates on every frame.
+
+```tsx
+'use client'
+
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { useRef } from 'react'
+
+export function ScrollReveal({ children }: { children: React.ReactNode }) {
+  const ref = useRef(null)
+  const { scrollYProgress } = useScroll({ target: ref, offset: ['0 1', '1 1'] })
+  const y = useTransform(scrollYProgress, [0, 1], [100, 0])
+  const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])
+
+  return (
+    <motion.div ref={ref} style={{ y, opacity }}>
+      {children}
+    </motion.div>
+  )
+}
+```
+
+#### 2. GSAP 3 (Complex Choreography)
+Use GSAP when you need highly coordinated timeline sequences, path tracing, or when working outside of React (Vanilla JS).
+- **ScrollTrigger**: The industry standard for complex scroll-based animations.
+- **DrawSVG / MorphSVG**: Use for advanced SVG path drawing and morphing (requires Club GreenSock, use open-source alternatives if unavailable).
+
+#### 3. Native CSS Scroll-Driven Animations
+Where possible, leverage modern native CSS to tie animations to scroll position on the compositor thread for zero-JS performance.
+```css
+@keyframes slide-in {
+  from { opacity: 0; transform: translateY(100px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.reveal-on-scroll {
+  animation: slide-in linear both;
+  animation-timeline: view();
+  animation-range: entry 25% cover 50%;
+}
+```
+
+#### 4. SVG Optimization & Manipulation
+- Always run SVGs through SVGO to strip bloat before animating.
+- Keep `viewBox` responsive.
+- Target `<path>`, `<circle>`, and `<mask/>` elements via CSS vars or inline Framer Motion logic.
+
+## Orchestration & Integration
+- Works hand-in-hand with `ui-ux-pro-max` and `monday-design-aesthetic` to bring designs to life.
+- Complements `senior-frontend` by handling the motion layer of the UI.
+- Integrates with `seo-aeo-landing-page-writer` to build visually stunning landing pages.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill khusus untuk membuat animasi web dan interaksi mikro yang lancar dan berkinerja tinggi. Mencakup manipulasi SVG langsung, animasi berbasis React menggunakan Framer Motion 12+, koreografi timeline lanjutan dengan GSAP 3, CSS Scroll-Driven Animations native, dan View Transitions API.
+
+### Kondisi Pemicu
+- Saat membangun animasi landing page yang kompleks.
+- Saat membuat grafik, chart, atau diagram SVG interaktif.
+- Saat pengguna meminta interaksi yang "sangat mulus", "mirip Apple", atau "dinamis".
+- Saat mengimplementasikan transisi halaman menggunakan View Transitions API native.
+
+### Panduan Arsitektur Inti
+
+#### 1. Framer Motion 12+ (React/Next.js)
+Gunakan Framer Motion untuk animasi komponen deklaratif, animasi layout, dan interaksi gestur.
+- Hindari memicu pembaruan state React pada setiap frame animasi. Gunakan `useTransform` dan `useScroll` yang beroperasi di luar siklus render React untuk performa 60fps.
+
+#### 2. GSAP 3
+Gunakan GSAP untuk urutan timeline yang sangat terkoordinasi atau saat bekerja di luar ekosistem React. Plugin `ScrollTrigger` sangat berguna untuk merangkai aksi kompleks berdasarkan posisi scroll.
+
+#### 3. CSS Scroll-Driven Animations Native
+Manfaatkan CSS modern (`animation-timeline: view()`) untuk mengikat animasi ke posisi scroll langsung di compositor thread tanpa JavaScript sama sekali. Ini memberikan performa terbaik untuk efek paralaks dan reveal.
+
+#### 4. Manipulasi SVG
+- Selalu optimasi SVG (buang tag tidak perlu) sebelum dianimasikan.
+- Gunakan `<clipPath>` dan `<mask>` untuk transisi transisi pengungkapan gambar yang dramatis.
+
+## Integrasi Orkestrasi
+- Bekerja sama dengan `ui-ux-pro-max` dan `monday-design-aesthetic` untuk menghidupkan desain statis.
+- Melengkapi `senior-frontend` dengan menangani lapisan pergerakan (motion layer) UI.
+- Terintegrasi dengan `seo-aeo-landing-page-writer` untuk merancang landing page yang memukau secara visual.

package/skills/tailwind-expert/SKILL.md

@@ -1,188 +1,140 @@
----
-name: tailwind-expert
-description: "Deep guide for Tailwind CSS v4, CSS-first configuration, theme customization, and responsive design / Panduan mendalam untuk Tailwind CSS v4, CSS-first configuration, theme kustomisasi, dan responsive design."
+---
+name: tailwind-expert
+description: "Expert guide for Tailwind CSS v4, CSS-first configuration, @theme customization, and modern responsive design / Panduan ahli untuk Tailwind CSS v4, konfigurasi CSS-first, kustomisasi @theme, dan desain responsif modern."
 author: "Roedy Rustam"
----
-
-# Tailwind CSS Expert (v4 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Deep expert guide for **Tailwind CSS v4** — covering the new CSS-first configuration model, `@theme` directive for design tokens, `@plugin` for plugins, 3D transforms, gradient improvements, and migration from v3.
-
-### Trigger Conditions
-- Setting up or configuring a new Tailwind CSS v4 project.
-- Defining design tokens via `@theme` directive in CSS.
-- Migrating from Tailwind CSS v3 to v4.
-- Using new v4 utilities: 3D transforms, `field-sizing`, color mix functions.
-- Registering custom plugins with `@plugin` directive.
-
-### Tailwind v4 — The CSS-First Paradigm Shift
-
-Tailwind v4 eliminates `tailwind.config.js` entirely. All configuration happens in CSS:
-
-```css
-/* app/globals.css */
-@import "tailwindcss";
-
-/* Design tokens — replaces tailwind.config.js theme */
-@theme {
-  /* Colors using OKLCH for wide-gamut displays */
-  --color-brand-50: oklch(97% 0.02 250);
-  --color-brand-500: oklch(55% 0.2 250);
-  --color-brand-900: oklch(20% 0.1 250);
-
-  /* Typography */
-  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace;
-
-  /* Spacing & Sizing */
-  --spacing-18: 4.5rem;
-  --spacing-112: 28rem;
-
-  /* Custom animations */
-  --animate-slide-in: slide-in 0.3s ease-out;
-  --animate-fade-up: fade-up 0.4s ease-out;
-
-  /* Breakpoints */
-  --breakpoint-3xl: 112rem;
-}
-
-/* Register plugins via @plugin directive */
-@plugin "@tailwindcss/typography";
-@plugin "@tailwindcss/forms";
-@plugin "./plugins/animations.js";
-
-/* Custom keyframes */
-@keyframes slide-in {
-  from { transform: translateX(-100%); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-@keyframes fade-up {
-  from { transform: translateY(16px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-```
-
-### New Utilities in Tailwind v4
-
-#### 3D Transforms
-```html
-<!-- 3D perspective and rotation -->
-<div class="perspective-1000">
-  <div class="rotate-x-12 rotate-y-6 transform-3d hover:rotate-y-0 transition-transform duration-500">
-    Card content
-  </div>
-</div>
-
-<!-- perspective-{value}: sets perspective on parent -->
-<!-- rotate-x-{deg}, rotate-y-{deg}: 3D rotation -->
-<!-- transform-3d: enables 3D transform context -->
-<!-- backface-visible, backface-hidden: card flip effects -->
-```
-
-#### Color Mix & Relative Colors
-```html
-<!-- Mix colors at the utility level -->
-<div class="bg-brand-500/50">          <!-- 50% opacity -->
-<div class="text-[color-mix(in_oklch,blue_70%,white)]">  <!-- CSS color-mix -->
-<div class="border-brand-500 hover:border-brand-700">
-```
-
-#### Container Queries
-```html
-<!-- Responsive to parent container size, not viewport -->
-<div class="@container">
-  <div class="@sm:grid-cols-2 @lg:grid-cols-3 grid grid-cols-1">
-    <!-- Adapts to container width, not screen width -->
-  </div>
-</div>
-```
-
-#### `field-sizing` for Auto-Resizing Textareas
-```html
-<textarea class="field-sizing-content resize-none min-h-20 max-h-64">
-  Auto-resizes to fit content — no JavaScript needed!
-</textarea>
-```
-
-### Migration from v3 to v4
-
-#### Automated Migration Tool
-```bash
-npx @tailwindcss/upgrade
-```
-
-#### Key Breaking Changes
-| v3 | v4 Equivalent |
-|---|---|
-| `tailwind.config.js` | `@theme {}` in CSS |
-| `theme.extend.colors` | `--color-*` CSS vars in `@theme` |
-| `plugins: [require('@tailwindcss/typography')]` | `@plugin "@tailwindcss/typography"` |
-| `darkMode: 'class'` | `@variant dark (&:where(.dark, .dark *))` |
-| `screens` in config | `--breakpoint-*` in `@theme` |
-| `content` array | Auto-detected (no config needed) |
-
-#### Custom Variants in v4
-```css
-/* Custom variants — replaces addVariant() in plugins */
-@variant hocus (&:hover, &:focus);
-@variant dark (&:where(.dark, .dark *));
-@variant reduced-motion (@media (prefers-reduced-motion: reduce));
-```
-
-### Performance Tips
-- Tailwind v4 uses **Lightning CSS** for transforms — 4x faster builds than v3 with PostCSS.
-- CSS bundle is now fully tree-shaken — only styles used in your HTML/JSX are generated.
-- Use `@layer utilities` for custom utilities that need Tailwind's specificity.
-- Avoid `@apply` in performance-critical loops — prefer utility classes directly in HTML.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan mendalam untuk **Tailwind CSS v4** — mencakup model konfigurasi CSS-first baru, direktif `@theme` untuk design token, `@plugin` untuk plugin, 3D transform, peningkatan gradient, dan migrasi dari v3.
-
-### Kondisi Pemicu
-- Menyiapkan atau mengonfigurasi proyek Tailwind CSS v4 baru.
-- Mendefinisikan design token via direktif `@theme` di CSS.
-- Migrasi dari Tailwind CSS v3 ke v4.
-- Menggunakan utilitas v4 baru: 3D transform, `field-sizing`, fungsi color mix.
-- Mendaftarkan plugin kustom dengan direktif `@plugin`.
-
-### Tailwind v4 — Pergeseran Paradigma CSS-First
-
-Tailwind v4 menghilangkan `tailwind.config.js` sepenuhnya. Semua konfigurasi dilakukan di CSS menggunakan direktif `@theme`. Plugin didaftarkan dengan `@plugin`. Breakpoint, warna, spacing, animasi — semuanya didefinisikan sebagai variabel CSS `--*` di dalam blok `@theme`.
-
-### Utilitas Baru di Tailwind v4
-
-#### 3D Transform
-Tailwind v4 menambahkan utilitas untuk 3D transform: `perspective-{nilai}`, `rotate-x-{derajat}`, `rotate-y-{derajat}`, `transform-3d`, `backface-visible`, `backface-hidden` — ideal untuk efek flip kartu dan galeri 3D.
-
-#### Container Queries
-Gunakan `@container` dan utilitas `@sm:`, `@lg:` untuk membuat komponen yang responsif terhadap ukuran container induknya, bukan ukuran viewport.
-
-#### `field-sizing` untuk Textarea Auto-Resize
-Kelas `field-sizing-content` membuat textarea otomatis menyesuaikan ukurannya dengan konten — tanpa JavaScript.
-
-### Migrasi dari v3 ke v4
-
-Gunakan alat migrasi otomatis `npx @tailwindcss/upgrade` untuk konversi dasar. Perubahan kunci:
-- `tailwind.config.js` → `@theme {}` di CSS
-- `plugins: [require('...')]` → `@plugin "..."`
-- `darkMode: 'class'` → `@variant dark`
-- Array `content` → Deteksi otomatis (tidak perlu konfigurasi)
-
-### Tip Performa
-- Tailwind v4 menggunakan **Lightning CSS** — build 4x lebih cepat dari v3 dengan PostCSS.
-- Bundle CSS sepenuhnya di-tree-shake — hanya style yang digunakan yang dihasilkan.
-- Gunakan `@layer utilities` untuk utilitas kustom yang membutuhkan spesifisitas Tailwind.
-- Hindari `@apply` di loop kritis performa — gunakan kelas utilitas langsung di HTML.
+---
+
+# Tailwind CSS Expert (v4 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Strict guidelines and best practices for Tailwind CSS v4. Enforces the CSS-first configuration model, `@theme` token definitions, dynamic utilities, and performance optimization via Lightning CSS.
+
+### Trigger Conditions
+- Scaffold or configure a Tailwind CSS v4 project.
+- Migrate a codebase from Tailwind CSS v3 to v4.
+- Implement design tokens via `@theme`.
+- Apply 3D transforms, CSS container queries, or `field-sizing`.
+
+## Orchestration & Integration
+Integrates tightly with the following skills:
+- **`senior-frontend`**: Feeds modern CSS capabilities into Next.js/React component architecture.
+- **`ui-components-expert`**: Provides the styling primitives for Radix/shadcn-style components.
+- **`design-system-architect`**: Establishes the core tokens mapped inside `@theme`.
+
+### Execution Standards
+
+#### 1. CSS-First Architecture
+Do NOT create `tailwind.config.js`. Define all configuration inside CSS using the `@theme` directive.
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+
+@theme {
+  /* OKLCH Colors for wide-gamut displays */
+  --color-brand-50: oklch(97% 0.02 250);
+  --color-brand-500: oklch(55% 0.2 250);
+
+  /* Typography */
+  --font-sans: "Inter Variable", system-ui, sans-serif;
+
+  /* Custom breakpoints */
+  --breakpoint-3xl: 112rem;
+}
+
+/* Register plugins */
+@plugin "@tailwindcss/typography";
+```
+
+#### 2. Advanced Utilities
+Utilize v4-native features instead of custom CSS where possible:
+- **3D Transforms**: Use `perspective-1000`, `rotate-x-12`, `transform-3d`, `backface-hidden`.
+- **Color Mix**: Use inline mixing: `text-[color-mix(in_oklch,blue_70%,white)]`.
+- **Container Queries**: Use `@container` on the parent, `@sm:grid-cols-2` on children.
+- **Auto-sizing**: Use `field-sizing-content` for dynamically sizing textareas.
+
+#### 3. Migration (v3 to v4)
+When upgrading older codebases:
+1. Run `npx @tailwindcss/upgrade` automatically.
+2. Manually verify `tailwind.config.js` logic is perfectly translated to `@theme` CSS variables.
+3. Replace deprecated `addVariant` plugin code with `@variant` CSS directives:
+   ```css
+   @variant hocus (&:hover, &:focus);
+   @variant dark (&:where(.dark, .dark *));
+   ```
+
+#### 4. Performance Directives
+- **Zero Configuration**: Rely on v4's automatic content detection. Do not manually specify content paths.
+- **Specificity**: Use `@layer utilities` strictly when custom CSS requires Tailwind's specificity tier.
+- **No `@apply` Abuse**: Avoid `@apply` in loops or highly repeated components; use HTML utility classes to leverage Lightning CSS tree-shaking.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ketat dan praktik terbaik untuk Tailwind CSS v4. Memaksa penggunaan model konfigurasi CSS-first, definisi token `@theme`, utilitas dinamis, dan optimasi performa melalui Lightning CSS.
+
+### Kondisi Pemicu
+- Menyiapkan atau mengonfigurasi proyek Tailwind CSS v4.
+- Migrasi codebase dari Tailwind CSS v3 ke v4.
+- Implementasi design token via `@theme`.
+- Menggunakan 3D transform, container query, atau `field-sizing`.
+
+## Integrasi Orkestrasi
+Terintegrasi erat dengan skill berikut:
+- **`senior-frontend`**: Menyuplai kapabilitas CSS modern ke dalam arsitektur komponen Next.js/React.
+- **`ui-components-expert`**: Menyediakan primitif styling untuk komponen gaya Radix/shadcn.
+- **`design-system-architect`**: Membangun token utama yang dipetakan di dalam `@theme`.
+
+### Standar Eksekusi
+
+#### 1. Arsitektur CSS-First
+JANGAN membuat `tailwind.config.js`. Definisikan semua konfigurasi di dalam CSS menggunakan direktif `@theme`.
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+
+@theme {
+  /* Warna OKLCH untuk layar wide-gamut */
+  --color-brand-50: oklch(97% 0.02 250);
+  --color-brand-500: oklch(55% 0.2 250);
+
+  /* Tipografi */
+  --font-sans: "Inter Variable", system-ui, sans-serif;
+}
+
+/* Registrasi plugin */
+@plugin "@tailwindcss/typography";
+```
+
+#### 2. Utilitas Lanjutan
+Gunakan fitur bawaan v4 alih-alih CSS kustom:
+- **3D Transform**: Gunakan `perspective-1000`, `rotate-x-12`, `transform-3d`, `backface-hidden`.
+- **Color Mix**: Gunakan `text-[color-mix(in_oklch,blue_70%,white)]`.
+- **Container Queries**: Gunakan `@container` pada induk, `@sm:grid-cols-2` pada anak.
+- **Auto-sizing**: Gunakan `field-sizing-content` untuk textarea agar ukurannya otomatis menyesuaikan.
+
+#### 3. Migrasi (v3 ke v4)
+Saat memperbarui codebase lama:
+1. Jalankan `npx @tailwindcss/upgrade` secara otomatis.
+2. Verifikasi manual logika `tailwind.config.js` agar diterjemahkan sempurna ke variabel CSS `@theme`.
+3. Ganti plugin `addVariant` lama dengan direktif CSS `@variant`:
+   ```css
+   @variant hocus (&:hover, &:focus);
+   @variant dark (&:where(.dark, .dark *));
+   ```
+
+#### 4. Arahan Performa
+- **Konfigurasi Nol**: Andalkan deteksi konten otomatis v4. Jangan tentukan path konten secara manual.
+- **Spesifisitas**: Gunakan `@layer utilities` secara ketat hanya jika CSS kustom memerlukan tingkat spesifisitas Tailwind.
+- **Dilarang Menyalahgunakan `@apply`**: Hindari `@apply` pada loop atau komponen berulang; gunakan kelas utilitas di HTML untuk memaksimalkan tree-shaking Lightning CSS.