Frontend Inferencer Skill

Purpose

Infer frontend technologies by analyzing collected signals from JavaScript, DOM, HTML, and CSS analysis phases.

Input

Raw signals from Phase 2:

• javascript_signals

• Global variables, DOM attributes, bundle patterns

• html_signals

• Meta tags, script URLs, CSS classes

• http_signals

• Headers (for SPA indicators)

Technology Categories

JavaScript Frameworks

Technology Detection Signals Weight

React window.React, data-reactroot, /_next/ 30-40

Vue.js window.Vue, data-v-*, /_nuxt/ 30-40

Angular ng-version, _ngcontent-*, window.ng 30-40

Svelte window.__svelte, data-svelte-h 30-35

jQuery window.jQuery, window.$ 25-30

Alpine.js window.Alpine, x-data, x-init 25-30

Meta-Frameworks

Technology Detection Signals Implies Weight

Next.js NEXT_DATA, /_next/static/ React, Node.js 35-40

Nuxt.js window.NUXT, /_nuxt/ Vue.js, Node.js 35-40

Gatsby window.___gatsby React 35-40

Remix __remixContext React 35-40

SvelteKit __sveltekit Svelte 35-40

Astro data-astro-*

30-35

CSS Frameworks

Technology Detection Signals Weight

Bootstrap btn btn-, container, navbar, col- 25-30

Tailwind CSS bg-, text-, flex, p-, m- 25-30

Material UI MuiButton, MuiGrid, MuiPaper 30-35

Ant Design ant-btn, ant-card, ant-table 30-35

Chakra UI chakra-* classes 25-30

Foundation button, callout, grid-x 25-30

Bulma button is-*, columns, hero 25-30

UI Component Libraries

Technology Detection Signals Weight

Radix UI data-radix-* 25-30

Headless UI data-headlessui-* 25-30

shadcn/ui Combination of Tailwind + Radix patterns 20-25

State Management

Technology Detection Signals Weight

Redux window.REDUX_DEVTOOLS_EXTENSION 25-30

MobX window.__mobxGlobal 25-30

Zustand Bundle patterns 20-25

Recoil Bundle patterns 20-25

Build Tools (from bundle patterns)

Technology Detection Signals Weight

Webpack /bundle.js, .chunk.js, /vendor.js 20-25

Vite /@vite/, .js?v= 25-30

Parcel /parcel-* 20-25

esbuild Bundle patterns 20-25

Rollup Bundle patterns 20-25

Inference Logic

def infer_frontend_technologies(signals): results = []

# JavaScript Framework Detection
for framework in FRAMEWORK_PATTERNS:
    score = 0
    evidence = []

    # Check global variables
    for global_var in framework.globals:
        if global_var in signals.javascript_signals.globals:
            score += framework.global_weight
            evidence.append(f"{global_var} detected")

    # Check DOM attributes
    for attr in framework.dom_attributes:
        if attr in signals.html_signals.dom_attributes:
            score += framework.dom_weight
            evidence.append(f"{attr} attribute found")

    # Check bundle patterns
    for pattern in framework.bundle_patterns:
        if pattern in signals.javascript_signals.script_urls:
            score += framework.bundle_weight
            evidence.append(f"Bundle pattern: {pattern}")

    if score > 0:
        results.append({
            "name": framework.name,
            "category": framework.category,
            "signals": evidence,
            "total_weight": score,
            "implies": framework.implies
        })

# CSS Framework Detection
for css_framework in CSS_FRAMEWORK_PATTERNS:
    matches = count_class_matches(
        signals.html_signals.css_classes,
        css_framework.patterns
    )

    if matches >= css_framework.min_matches:
        score = css_framework.base_weight + (matches * 2)
        results.append({
            "name": css_framework.name,
            "category": "CSS Framework",
            "signals": [f"{matches} class patterns matched"],
            "total_weight": score
        })

return results

Output

{ "skill": "frontend_inferencer", "results": { "technologies": [ { "name": "React", "category": "JavaScript Framework", "version": "18.x (if detectable)", "signals": [ { "type": "javascript_global", "value": "window.React detected", "source": "https://example.com", "weight": 30 }, { "type": "dom_attribute", "value": "data-reactroot found", "source": "https://example.com", "weight": 25 } ], "total_weight": 55, "implies": [] }, { "name": "Next.js", "category": "Meta-Framework", "version": "13.x", "signals": [ { "type": "javascript_global", "value": "NEXT_DATA found", "source": "https://example.com", "weight": 35 }, { "type": "bundle_pattern", "value": "/_next/static/ paths", "source": "https://example.com", "weight": 30 } ], "total_weight": 65, "implies": ["React", "Node.js"] }, { "name": "Tailwind CSS", "category": "CSS Framework", "signals": [ { "type": "css_classes", "value": "15 Tailwind class patterns matched (bg-, text-, flex, p-*, etc.)", "source": "https://example.com", "weight": 30 } ], "total_weight": 30 } ], "implied_technologies": [ { "name": "Node.js", "implied_by": ["Next.js"], "confidence": "High" } ], "summary": { "primary_framework": "Next.js", "ui_library": "Tailwind CSS", "state_management": null, "build_tool": "Webpack (via Next.js)" } } }

Version Detection

React

// From REACT_DEVTOOLS_GLOBAL_HOOK window.REACT_DEVTOOLS_GLOBAL_HOOK.renderers.get(1).version

// From React DevTools window.React.version

Angular

<!-- From ng-version attribute --> <app-root ng-version="16.2.0">

Next.js

// From NEXT_DATA JSON.parse(document.getElementById('NEXT_DATA').textContent).nextVersion

Vue.js

// From Vue instance window.Vue.version

Confidence Calculation

Frontend Technology Confidence:

High (80-100%):

• Direct framework global detected
• Multiple supporting signals
• Version information available

Medium (50-79%):

• Bundle patterns match
• DOM attributes present
• No direct confirmation

Low (20-49%):

• Only CSS class patterns
• Single indirect signal
• Job posting mention only

Error Handling

• Missing signals: Return empty results for category

• Conflicting signals: Include both with notes

• Version detection failure: Omit version, continue