designlang 1.0.0

package/.claude-plugin/marketplace.json

@@ -0,0 +1,28 @@
+{
+  "name": "design-extract",
+  "owner": {
+    "name": "Manavarya Singh",
+    "url": "https://github.com/Manavarya09"
+  },
+  "plugins": [
+    {
+      "name": "design-extract",
+      "source": "./",
+      "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, components, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
+      "version": "1.0.0",
+      "author": {
+        "name": "Manavarya Singh"
+      },
+      "category": "design",
+      "tags": [
+        "design-system",
+        "design-tokens",
+        "css",
+        "tailwind",
+        "typography",
+        "colors",
+        "web-scraping"
+      ]
+    }
+  ]
+}

package/.claude-plugin/plugin.json

@@ -0,0 +1,24 @@
+{
+  "name": "design-extract",
+  "description": "Extract the complete design language from any website. Produces W3C design tokens, AI-optimized markdown, Tailwind config, and CSS custom properties.",
+  "version": "1.0.0",
+  "author": {
+    "name": "Manavarya Singh",
+    "url": "https://github.com/Manavarya09"
+  },
+  "homepage": "https://github.com/Manavarya09/design-extract",
+  "repository": "https://github.com/Manavarya09/design-extract",
+  "license": "MIT",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "design-language",
+    "css",
+    "tailwind",
+    "playwright",
+    "extraction",
+    "colors",
+    "typography"
+  ],
+  "skills": "./skills/"
+}

package/CONTRIBUTING.md

@@ -0,0 +1,63 @@
+# Contributing to design-ex
+
+Thanks for your interest in contributing! Here's how to get started.
+
+## Development Setup
+
+```bash
+git clone https://github.com/Manavarya09/design-extract.git
+cd design-extract
+npm install
+```
+
+This installs dependencies and Playwright's Chromium browser.
+
+## Running Locally
+
+```bash
+node bin/design-extract.js https://example.com --out ./test-output
+```
+
+## Project Structure
+
+```
+src/
+  crawler.js          # Playwright page.evaluate extraction
+  index.js            # Orchestrator
+  utils.js            # Color parsing, clustering, helpers
+  extractors/         # 9 modules that process raw style data
+    colors.js         # Color palette extraction
+    typography.js     # Font and type scale extraction
+    spacing.js        # Spacing scale detection
+    shadows.js        # Box shadow parsing
+    borders.js        # Border radius extraction
+    variables.js      # CSS custom property categorization
+    breakpoints.js    # Media query extraction
+    animations.js     # Transition and keyframe extraction
+    components.js     # UI component pattern detection
+  formatters/         # 4 output format generators
+    markdown.js       # AI-optimized markdown (hero output)
+    tokens.js         # W3C Design Tokens JSON
+    tailwind.js       # Tailwind CSS config
+    css-vars.js       # CSS custom properties file
+```
+
+## Guidelines
+
+- Keep dependencies minimal — prefer pure JS over adding a package
+- Test changes against at least 2-3 real websites
+- Follow the existing code style (ES modules, no semicolons in some files)
+- The markdown formatter is the most important output — keep it rich and AI-friendly
+
+## Reporting Issues
+
+When filing a bug, please include:
+- The URL you tried to extract from
+- The error message or unexpected output
+- Your Node.js version (`node --version`)
+
+## Pull Requests
+
+- One feature/fix per PR
+- Keep PRs focused and small when possible
+- Add a brief description of what changed and why

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Manavarya Singh
+
+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.

package/README.md

@@ -0,0 +1,153 @@
+<p align="center">
+  <h1 align="center">designlang</h1>
+  <p align="center">Extract the complete design language from any website.</p>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=blue&label=npm" alt="npm version"></a>
+  <a href="https://github.com/Manavarya09/designlangtract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/designlangtract" alt="license"></a>
+  <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang" alt="node version"></a>
+</p>
+
+---
+
+**designlang** uses Playwright to headlessly crawl any website, extracts computed styles from the live DOM, and generates a full design system you can immediately use in your project. The primary output is an **AI-optimized markdown file** that an LLM can use to faithfully recreate the design.
+
+## Quick Start
+
+```bash
+npx designlang https://stripe.com
+```
+
+That's it. Four files appear in `./designlangtract-output/`:
+
+| File | What it is |
+|------|------------|
+| `*-design-language.md` | AI-optimized markdown — the full design system in natural language with code examples |
+| `*-design-tokens.json` | [W3C Design Tokens](https://design-tokens.github.io/community-group/format/) format for tooling |
+| `*-tailwind.config.js` | Drop-in Tailwind CSS theme extension |
+| `*-variables.css` | CSS custom properties ready to import |
+
+## Install
+
+```bash
+# Use directly with npx (no install needed)
+npx designlang https://example.com
+
+# Or install globally
+npm install -g designlang
+designlang https://example.com
+```
+
+> Playwright's Chromium is auto-installed on first run via the `postinstall` script.
+
+## What It Extracts
+
+| Category | Details |
+|----------|---------|
+| **Colors** | Full palette with primary/secondary/accent/neutral classification, gradients, background & text colors |
+| **Typography** | Font families, type scale (heading/body/caption), weights, line heights, letter spacing |
+| **Spacing** | All unique values with automatic base-unit detection (e.g. 4px grid) |
+| **Border Radii** | Unique values labeled xs through full |
+| **Box Shadows** | Parsed and classified by visual weight (xs/sm/md/lg/xl) |
+| **CSS Variables** | All `:root` custom properties, categorized by type |
+| **Breakpoints** | Media query breakpoints with standard labels (sm/md/lg/xl) |
+| **Animations** | Transitions, easing functions, durations, `@keyframes` |
+| **Components** | Detected patterns for buttons, cards, inputs, links — with base styles |
+
+## CLI Options
+
+```
+designlang <url> [options]
+
+Options:
+  -o, --out <dir>       Output directory (default: ./designlangtract-output)
+  -n, --name <name>     Output file prefix (default: derived from URL hostname)
+  -w, --width <px>      Viewport width (default: 1280)
+  -h, --height <px>     Viewport height (default: 800)
+  --wait <ms>           Wait after page load for SPAs (default: 0)
+  --dark                Also extract dark mode color scheme
+  --verbose             Show detailed extraction progress
+  -V, --version         Show version
+  -h, --help            Show help
+```
+
+### Examples
+
+```bash
+# Basic extraction
+designlang https://vercel.com
+
+# Custom output directory
+designlang https://stripe.com --out ./stripe-design
+
+# Extract dark mode too
+designlang https://github.com --dark
+
+# Wait for SPA to render
+designlang https://app.example.com --wait 3000
+
+# Custom viewport
+designlang https://example.com --width 1440 --height 900
+```
+
+## The Markdown Output
+
+The `*-design-language.md` file is the hero output. It's structured for AI/LLM consumption with:
+
+- Color palette tables with hex, RGB, and HSL values
+- Typography scale with size, weight, line-height, and letter-spacing
+- Spacing scale with token names and px/rem conversions
+- CSS code blocks for shadows, component patterns, and animations
+- A "Quick Start" section with step-by-step instructions to recreate the design
+
+Feed it to any AI coding assistant and it can recreate the site's visual design from scratch.
+
+## Claude Code Plugin
+
+**designlang** also works as a [Claude Code](https://claude.ai/claude-code) plugin.
+
+After installing, use the `/extract-design` slash command:
+
+```
+/extract-design https://stripe.com
+```
+
+Claude will extract the design, read the markdown output, and help you integrate it into your project.
+
+## How It Works
+
+1. **Crawl** — Launches headless Chromium via Playwright, navigates to the URL, waits for network idle and font loading
+2. **Extract** — Runs a single `page.evaluate()` call that walks up to 5,000 DOM elements and collects computed styles, CSS custom properties, media queries, and keyframes
+3. **Process** — Nine extractor modules parse, deduplicate, cluster, and classify the raw style data into a unified design object
+4. **Format** — Four formatter modules generate the output files
+
+## Limitations
+
+- **Cross-origin stylesheets** — CSS loaded from CDNs may not be inspectable via `document.styleSheets` (CORS). Computed styles are still captured since `getComputedStyle()` sees the final resolved values.
+- **Shadow DOM** — Elements inside closed shadow roots are not accessible. Open shadow roots are partially supported.
+- **CSS-in-JS** — Styles injected at runtime (styled-components, Emotion) are captured via computed styles but not as raw CSS rules.
+- **Element cap** — DOM traversal is capped at 5,000 elements to prevent hanging on very large pages.
+
+## Tech Stack
+
+- [Playwright](https://playwright.dev/) — headless browser automation
+- [Commander](https://github.com/tj/commander.js/) — CLI framework
+- [Chalk](https://github.com/chalk/chalk) + [Ora](https://github.com/sindresorhus/ora) — terminal styling
+
+Zero external dependencies for color parsing, clustering, or CSS processing — all handled with ~200 lines of pure JS utilities.
+
+## Contributing
+
+Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+
+1. Fork the repo
+2. Create a feature branch (`git checkout -b feature/my-feature`)
+3. Make your changes
+4. Test on a few websites (`node bin/designlangtract.js https://example.com`)
+5. Commit and push
+6. Open a pull request
+
+## License
+
+[MIT](LICENSE) - Manavarya Singh

package/bin/design-extract.js

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { mkdirSync, writeFileSync } from 'fs';
+import { resolve, join } from 'path';
+import chalk from 'chalk';
+import ora from 'ora';
+import { extractDesignLanguage } from '../src/index.js';
+import { formatMarkdown } from '../src/formatters/markdown.js';
+import { formatTokens } from '../src/formatters/tokens.js';
+import { formatTailwind } from '../src/formatters/tailwind.js';
+import { formatCssVars } from '../src/formatters/css-vars.js';
+import { nameFromUrl } from '../src/utils.js';
+
+const program = new Command();
+
+program
+  .name('designlang')
+  .description('Extract the complete design language from any website')
+  .version('1.0.0')
+  .argument('<url>', 'URL to extract design language from')
+  .option('-o, --out <dir>', 'output directory', './design-extract-output')
+  .option('-n, --name <name>', 'output file prefix (default: derived from URL)')
+  .option('-w, --width <px>', 'viewport width', parseInt, 1280)
+  .option('-h, --height <px>', 'viewport height', parseInt, 800)
+  .option('--wait <ms>', 'wait after page load (ms)', parseInt, 0)
+  .option('--dark', 'also extract dark mode styles')
+  .option('--verbose', 'show detailed progress')
+  .action(async (url, opts) => {
+    // Ensure URL has protocol
+    if (!url.startsWith('http')) url = `https://${url}`;
+
+    const prefix = opts.name || nameFromUrl(url);
+    const outDir = resolve(opts.out);
+
+    console.log('');
+    console.log(chalk.bold('  design-extract'));
+    console.log(chalk.gray(`  ${url}`));
+    console.log('');
+
+    const spinner = ora('Launching browser...').start();
+
+    try {
+      spinner.text = 'Crawling page and extracting styles...';
+      const design = await extractDesignLanguage(url, {
+        width: opts.width,
+        height: opts.height,
+        wait: opts.wait,
+        dark: opts.dark,
+      });
+
+      spinner.text = 'Generating output files...';
+
+      mkdirSync(outDir, { recursive: true });
+
+      const files = [
+        { name: `${prefix}-design-language.md`, content: formatMarkdown(design), label: 'Markdown (AI-optimized)' },
+        { name: `${prefix}-design-tokens.json`, content: formatTokens(design), label: 'Design Tokens (W3C)' },
+        { name: `${prefix}-tailwind.config.js`, content: formatTailwind(design), label: 'Tailwind Config' },
+        { name: `${prefix}-variables.css`, content: formatCssVars(design), label: 'CSS Variables' },
+      ];
+
+      for (const file of files) {
+        writeFileSync(join(outDir, file.name), file.content, 'utf-8');
+      }
+
+      spinner.succeed('Extraction complete!');
+      console.log('');
+      console.log(chalk.bold('  Output files:'));
+      for (const file of files) {
+        const size = Buffer.byteLength(file.content);
+        const sizeStr = size > 1024 ? `${(size / 1024).toFixed(1)}KB` : `${size}B`;
+        console.log(`  ${chalk.green('✓')} ${chalk.cyan(file.name)} ${chalk.gray(`(${sizeStr})`)} — ${file.label}`);
+      }
+      console.log('');
+      console.log(chalk.gray(`  Saved to ${outDir}`));
+
+      // Summary stats
+      console.log('');
+      console.log(chalk.bold('  Summary:'));
+      console.log(`  ${chalk.gray('Colors:')} ${design.colors.all.length} unique colors`);
+      console.log(`  ${chalk.gray('Fonts:')} ${design.typography.families.map(f => f.name).join(', ') || 'none detected'}`);
+      console.log(`  ${chalk.gray('Spacing:')} ${design.spacing.scale.length} values${design.spacing.base ? ` (base: ${design.spacing.base}px)` : ''}`);
+      console.log(`  ${chalk.gray('Shadows:')} ${design.shadows.values.length} unique shadows`);
+      console.log(`  ${chalk.gray('Radii:')} ${design.borders.radii.length} unique values`);
+      console.log(`  ${chalk.gray('Breakpoints:')} ${design.breakpoints.length} breakpoints`);
+      console.log(`  ${chalk.gray('Components:')} ${Object.keys(design.components).length} patterns detected`);
+      console.log(`  ${chalk.gray('CSS Vars:')} ${Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0)} custom properties`);
+      console.log('');
+
+    } catch (err) {
+      spinner.fail('Extraction failed');
+      if (err.message.includes('playwright')) {
+        console.error(chalk.red('\n  Playwright is not installed.'));
+        console.error(chalk.gray('  Run: npx playwright install chromium\n'));
+      } else {
+        console.error(chalk.red(`\n  ${err.message}\n`));
+        if (opts.verbose) console.error(err.stack);
+      }
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "designlang",
+  "version": "1.0.0",
+  "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
+  "type": "module",
+  "bin": {
+    "designlang": "./bin/design-extract.js"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "postinstall": "npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium",
+    "start": "node bin/design-extract.js",
+    "test": "node --test tests/"
+  },
+  "dependencies": {
+    "playwright": "^1.42.0",
+    "commander": "^12.0.0",
+    "chalk": "^5.3.0",
+    "ora": "^8.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "design-language",
+    "css",
+    "tailwind",
+    "playwright",
+    "extraction",
+    "colors",
+    "typography",
+    "claude-code",
+    "plugin"
+  ],
+  "author": "masyv",
+  "license": "MIT"
+}

package/skills/extract-design/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: extract-design
+description: "Extract the full design language from any website URL. Produces AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors does this site use', 'what font does this site use', or '/extract-design'."
+argument-hint: "<url> [--dark] [--out <dir>]"
+allowed-tools: Bash, Read, Write, Glob
+---
+
+# Extract Design Language
+
+Extract the complete design language from any website URL.
+
+## Process
+
+1. **Run the extraction CLI** on the provided URL:
+
+```bash
+cd "${CLAUDE_SKILL_DIR}/../.." && node bin/design-extract.js $ARGUMENTS
+```
+
+If dependencies are not installed, run first:
+```bash
+cd "${CLAUDE_SKILL_DIR}/../.." && npm install
+```
+
+2. **Read the generated markdown file** to understand the design:
+
+```bash
+cat design-extract-output/*-design-language.md
+```
+
+3. **Present key findings** to the user:
+   - Primary color palette (with hex codes)
+   - Font families in use
+   - Spacing system (base unit if detected)
+   - Number of component patterns found
+   - Any notable design decisions (shadows, border-radius scale, etc.)
+
+4. **Offer next steps:**
+   - Copy `tailwind.config.js` into the user's project
+   - Import `variables.css` into their stylesheet
+   - Use `design-tokens.json` for tooling integration
+   - Use the markdown file as a reference for AI-assisted development
+
+## Output Files
+
+The tool generates 4 files in the output directory:
+
+| File | Purpose |
+|------|---------|
+| `*-design-language.md` | AI-optimized markdown describing the full design system |
+| `*-design-tokens.json` | W3C Design Tokens format for tooling |
+| `*-tailwind.config.js` | Ready-to-use Tailwind CSS theme extension |
+| `*-variables.css` | CSS custom properties for direct use |
+
+## Options
+
+- `--out <dir>` — Output directory (default: `./design-extract-output`)
+- `--dark` — Also extract dark mode color scheme
+- `--wait <ms>` — Wait time after page load for SPAs

package/src/crawler.js

@@ -0,0 +1,162 @@
+import { chromium } from 'playwright';
+
+const MAX_ELEMENTS = 5000;
+
+export async function crawlPage(url, options = {}) {
+  const { width = 1280, height = 800, wait = 0, dark = false } = options;
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width, height },
+    colorScheme: 'light',
+  });
+  const page = await context.newPage();
+
+  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  if (wait > 0) await page.waitForTimeout(wait);
+
+  // Wait for fonts to load
+  await page.evaluate(() => document.fonts.ready);
+
+  const lightData = await extractPageData(page);
+
+  let darkData = null;
+  if (dark) {
+    await context.close();
+    const darkContext = await browser.newContext({
+      viewport: { width, height },
+      colorScheme: 'dark',
+    });
+    const darkPage = await darkContext.newPage();
+    await darkPage.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+    await darkPage.evaluate(() => document.fonts.ready);
+    darkData = await extractPageData(darkPage);
+    await darkContext.close();
+  }
+
+  const title = await page.title();
+  await browser.close();
+
+  return { url, title, light: lightData, dark: darkData };
+}
+
+async function extractPageData(page) {
+  return page.evaluate((maxElements) => {
+    const results = {
+      computedStyles: [],
+      cssVariables: {},
+      mediaQueries: [],
+      keyframes: [],
+    };
+
+    // 1. Walk all elements and collect computed styles
+    const allElements = document.querySelectorAll('*');
+    const elements = allElements.length > maxElements
+      ? Array.from(allElements).slice(0, maxElements)
+      : Array.from(allElements);
+
+    for (const el of elements) {
+      const cs = getComputedStyle(el);
+      const tag = el.tagName.toLowerCase();
+      const classList = Array.from(el.classList).join(' ');
+      const role = el.getAttribute('role') || '';
+
+      // Get bounding rect for area estimation
+      const rect = el.getBoundingClientRect();
+      const area = rect.width * rect.height;
+
+      results.computedStyles.push({
+        tag,
+        classList,
+        role,
+        area,
+        color: cs.color,
+        backgroundColor: cs.backgroundColor,
+        backgroundImage: cs.backgroundImage,
+        borderColor: cs.borderColor,
+        fontFamily: cs.fontFamily,
+        fontSize: cs.fontSize,
+        fontWeight: cs.fontWeight,
+        lineHeight: cs.lineHeight,
+        letterSpacing: cs.letterSpacing,
+        paddingTop: cs.paddingTop,
+        paddingRight: cs.paddingRight,
+        paddingBottom: cs.paddingBottom,
+        paddingLeft: cs.paddingLeft,
+        marginTop: cs.marginTop,
+        marginRight: cs.marginRight,
+        marginBottom: cs.marginBottom,
+        marginLeft: cs.marginLeft,
+        gap: cs.gap,
+        borderRadius: cs.borderRadius,
+        boxShadow: cs.boxShadow,
+        zIndex: cs.zIndex,
+        transition: cs.transition,
+        animation: cs.animation,
+        display: cs.display,
+        position: cs.position,
+      });
+    }
+
+    // 2. Extract CSS custom properties from :root
+    const rootStyles = getComputedStyle(document.documentElement);
+    // Get all custom properties by iterating stylesheets
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule.selectorText === ':root' || rule.selectorText === ':host') {
+              for (let i = 0; i < rule.style.length; i++) {
+                const prop = rule.style[i];
+                if (prop.startsWith('--')) {
+                  results.cssVariables[prop] = rule.style.getPropertyValue(prop).trim();
+                }
+              }
+            }
+          }
+        } catch { /* cross-origin stylesheet, skip */ }
+      }
+    } catch { /* no stylesheets accessible */ }
+
+    // Also get any custom properties from the computed style
+    // (fallback for CSS-in-JS that sets vars on :root)
+    for (let i = 0; i < rootStyles.length; i++) {
+      const prop = rootStyles[i];
+      if (prop.startsWith('--') && !results.cssVariables[prop]) {
+        results.cssVariables[prop] = rootStyles.getPropertyValue(prop).trim();
+      }
+    }
+
+    // 3. Extract media queries from stylesheets
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSMediaRule) {
+              results.mediaQueries.push(rule.conditionText || rule.media.mediaText);
+            }
+          }
+        } catch { /* cross-origin */ }
+      }
+    } catch { /* no access */ }
+
+    // 4. Extract keyframes
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSKeyframesRule) {
+              const steps = [];
+              for (const kf of rule.cssRules) {
+                steps.push({ offset: kf.keyText, style: kf.style.cssText });
+              }
+              results.keyframes.push({ name: rule.name, steps });
+            }
+          }
+        } catch { /* cross-origin */ }
+      }
+    } catch { /* no access */ }
+
+    return results;
+  }, MAX_ELEMENTS);
+}

package/src/extractors/animations.js

@@ -0,0 +1,28 @@
+export function extractAnimations(computedStyles, keyframes) {
+  const transitionSet = new Set();
+  const easingSet = new Set();
+  const durationSet = new Set();
+
+  for (const el of computedStyles) {
+    if (el.transition && el.transition !== 'all 0s ease 0s' && el.transition !== 'none') {
+      transitionSet.add(el.transition);
+
+      // Extract easing and duration
+      const dMatch = el.transition.match(/([\d.]+m?s)/g);
+      if (dMatch) dMatch.forEach(d => durationSet.add(d));
+
+      const eMatch = el.transition.match(/(ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier\([^)]+\))/g);
+      if (eMatch) eMatch.forEach(e => easingSet.add(e));
+    }
+  }
+
+  return {
+    transitions: [...transitionSet],
+    easings: [...easingSet],
+    durations: [...durationSet],
+    keyframes: keyframes.map(kf => ({
+      name: kf.name,
+      steps: kf.steps,
+    })),
+  };
+}