Sk Code Webflow

webflow Surface — Frontend Evidence

Domain evidence and shared workflow doctrine for browser/Webflow frontend work. This surface owns the implement -> debug -> verify phases through the workflow references below, and acts on the evidence gathered here when the hub detects a Webflow surface. Detection markers: src/2_javascript, webflow, --vw- custom properties, CDN-delivered client scripts.

1. WHEN THE HUB BUNDLES THIS

• The task touches Webflow-published pages, CDN-delivered webflow.js/client scripts, or src/2_javascript sources.
• The active workflow phase needs frontend standards (CSS/HTML/JS), an implementation pattern, a performance remediation, a deployment step, or a browser debugging/verification procedure.
• This surface owns edits, tests, and verification through the workflow references; hand off formal findings-first review to code-review and author-side quality gates to code-quality.

---

2. REFERENCE MAP

Language standards (load the detected language's trio; a frontend task legitimately spans all three):

• CSS — references/css/style-guide.md, references/css/quality-standards/patterns-and-naming-enforcement.md, references/css/quality-standards/typography-autofill-and-color.md, references/css/quality-standards/focus-has-print-and-quick-reference.md, references/css/quick-reference.md, references/css/patterns/tokens-state-machine-and-triggers.md, references/css/patterns/data-attributes-and-forms.md, references/css/patterns/focus-accessibility-and-mobile.md, references/css/patterns/designer-component-and-performance.md, references/css/patterns/quick-reference-and-related.md
• HTML — references/html/style-guide.md, references/html/quality-standards.md
• JavaScript — references/javascript/style-guide/overview-naming-and-structure.md, references/javascript/style-guide/formatting.md, references/javascript/style-guide/commenting-and-related.md, references/javascript/quality-standards/init-dom-error-and-async.md, references/javascript/quality-standards/observer-validation-and-performance.md, references/javascript/quality-standards/state-and-cleanup.md, references/javascript/quality-standards/shared-listener-and-weakmap.md, references/javascript/quality-standards/enforcement-and-quick-reference.md, references/javascript/quick-reference.md

Implementation patterns (references/implementation/):

• Core: references/implementation/implementation-workflows/condition-based-waiting.md, references/implementation/implementation-workflows/validation-minification-and-cdn.md, references/implementation/webflow-patterns/overview-limits-and-collection-lists.md, references/implementation/webflow-patterns/development-and-production.md, references/implementation/webflow-patterns/finsweet-custom-select-bridge.md
• Async & observers: references/implementation/async-patterns/raf-ric-microtask-and-posttask.md, references/implementation/async-patterns/timing-compat-and-webflow.md, references/implementation/observer-patterns/mutation-and-intersection.md, references/implementation/observer-patterns/resize-best-practices-and-shared.md
• Forms & focus: references/implementation/form-upload-workflows/overview-architecture-and-filepond.md, references/implementation/form-upload-workflows/state-machine-worker-and-forms.md, references/implementation/form-upload-workflows/mime-troubleshooting-and-deployment.md, references/implementation/focus-management/selector-and-focus-trap.md, references/implementation/focus-management/restoration-touch-and-anti-patterns.md
• Media & vendors: references/implementation/third-party-integrations/overview-hls-and-lenis.md, references/implementation/third-party-integrations/botpoison-and-finsweet.md, references/implementation/third-party-integrations/filepond.md, references/implementation/third-party-integrations/best-practices-and-summary.md, references/implementation/swiper-patterns/overview-timeline-and-marquee.md, references/implementation/swiper-patterns/autoplay-accessibility-and-naming.md, references/implementation/swiper-patterns/initialization-and-troubleshooting.md
• Hardening & performance: references/implementation/security-patterns/overview-and-checklist.md, references/implementation/security-patterns/owasp-prototype-and-safe-access.md, references/implementation/performance-patterns/overview-and-checklist.md, references/implementation/performance-patterns/budgets-and-anti-patterns.md

Animation / Motion.dev (references/animation/): references/animation/animation-principles.md, references/animation/animate-and-timelines.md, references/animation/decision-matrix.md, references/animation/performance-and-pitfalls.md, references/animation/scroll-and-gestures.md, references/animation/integration-patterns.md, references/animation/quick-start.md Use after the Webflow surface resolves when Motion.dev overlays Webflow animation needs: scroll reveals, timelines, gestures; snippets live in assets/animation/snippets/.

Performance (references/performance/): cwv-remediation.md, resource-loading.md, interaction-gated-loading.md, third-party.md, webflow-constraints.md

Deployment (references/deployment/): references/deployment/cdn-deployment.md, references/deployment/minification-guide/overview-terser-and-patterns.md, references/deployment/minification-guide/workflow-verification-and-debugging.md, references/deployment/minification-guide/batch-rules-and-related.md, references/deployment/webflow-staging-production.md

Browser debugging (references/debugging/): references/debugging/debugging-workflows/systematic-four-phases.md, references/debugging/debugging-workflows/rules-and-root-cause.md, references/debugging/debugging-workflows/performance-debugging.md, references/debugging/debugging-workflows/quick-reference-and-lenis.md, references/debugging/debugging-workflows/sub-agent-verification.md, references/debugging/debugging-workflows/scroll-interceptor-and-related.md, references/debugging/error-recovery.md

Browser verification (references/verification/): references/verification/verification-workflows/gate-and-automated-options.md, references/verification/verification-workflows/requirements-rules-and-checklist.md, references/verification/performance-checklist.md

Cross-language shared tier (references/shared/): references/shared/dev-workflow/overview-nav-and-logging.md, references/shared/dev-workflow/automation-errors-and-compat.md, references/shared/dev-workflow/common-commands.md, references/shared/dev-workflow/checklists-and-decision-matrix.md, references/shared/cross-language-rules.md, references/shared/enforcement.md

Supporting assets and performance resources: assets/animation/install-card.md, assets/animation/playbook-entries.md, assets/animation/snippets/README.md, assets/integrations/README.md, assets/patterns/README.md, assets/scripts/README.md, assets/templates/README.md, assets/webflow-debugging-checklist.md, assets/webflow-verification-checklist.md, references/implementation/animation-workflows/motion-dev-advanced.md, references/implementation/animation-workflows/motion-dev-and-performance.md, references/implementation/animation-workflows/overview-decision-tree-and-css.md, references/implementation/animation-workflows/testing-and-common-issues.md, references/performance/cwv-remediation.md, references/performance/interaction-gated-loading.md, references/performance/resource-loading.md, references/performance/third-party.md, references/performance/webflow-constraints.md

Workflow: the implement -> debug -> verify phases are covered by the split implementation, debugging, and verification resources above; no root-level workflow trio is assumed.

2b. SMART ROUTING (machine-readable)

This block is the deterministic projection of code-webflow's own reference/asset routing, consumed by the skill-benchmark router-replay; keep it in sync with the parent hub union.

# code-webflow owns its intent -> reference/asset routing. Paths are relative to
# this skill root. The parent sk-code hub RESOURCE_MAP is the union of this map
# (re-prefixed with sk-code-webflow/) and the sibling code-opencode map plus the
# parent-owned universal/shared tier; a drift guard enforces that equality.
DEFAULT_RESOURCE = [
    "references/shared/dev-workflow/overview-nav-and-logging.md",
    "references/shared/dev-workflow/automation-errors-and-compat.md",
    "references/shared/dev-workflow/common-commands.md",
    "references/shared/dev-workflow/checklists-and-decision-matrix.md",
]

INTENT_SIGNALS = {
    "IMPLEMENTATION":     {"weight": 1, "keywords": ["implement", "build", "create", "feature", "component", "module", "authoring", "smooth-scroll", "intersectionobserver"]},
    "CODE_QUALITY":       {"weight": 1, "keywords": ["lint", "format", "quality gate", "naming", "standards", "code smell"]},
    "DEBUGGING":          {"weight": 1, "keywords": ["debug", "broken", "failing", "stack trace", "console error", "regression"]},
    "VERIFICATION":       {"weight": 1, "keywords": ["verify", "passing", "type-check", "alignment drift", "completion claim"]},
    "TESTING":            {"weight": 1, "keywords": ["unit test", "integration test", "coverage", "vitest", "pytest", "shellcheck"]},
    "DEPLOYMENT":         {"weight": 1, "keywords": ["deploy", "cdn", "wrangler", "minify", "staging", "production release"]},
    "PERFORMANCE":        {"weight": 1, "keywords": ["lighthouse", "core web vitals", "web vitals", "largest contentful", "lcp", "interaction to next paint", "inp", "cumulative layout shift", "cls", "pagespeed", "jank", "frame budget"]},
    "ANIMATION":          {"weight": 1, "keywords": ["animation", "transition", "easing", "stagger", "motion principles", "motion language", "gsap", "lenis", "carousel", "parallax"]},
    "MOTION_DEV":         {"weight": 1, "keywords": ["motion.dev", "motion-dev", "animate()", "inview", "in-view", "motion cdn", "scroll()", "stagger()", "animation principles", "cross-stack animation"]},
    "ACCESSIBILITY":      {"weight": 1, "keywords": ["reduced motion", "reduced-motion", "prefers-reduced-motion", "a11y", "accessibility"]},
    "FORMS":              {"weight": 1, "keywords": ["form upload", "filepond", "field validation", "focus trap"]},
    "VIDEO":              {"weight": 1, "keywords": ["hls", "adaptive stream", "video player"]},
    "LANGUAGE_STANDARDS": {"weight": 1, "keywords": ["typescript", ".ts", ".tsx", "python", ".py", "shell script", "bash", ".sh", "commonjs", ".cjs", ".mjs", "docstring"]},
}

RESOURCE_MAP = {
    "IMPLEMENTATION": [
        "references/implementation/implementation-workflows/condition-based-waiting.md",
        "references/implementation/implementation-workflows/validation-minification-and-cdn.md",
        "references/implementation/async-patterns/raf-ric-microtask-and-posttask.md",
        "references/implementation/async-patterns/timing-compat-and-webflow.md",
        "references/implementation/observer-patterns/mutation-and-intersection.md",
        "references/implementation/observer-patterns/resize-best-practices-and-shared.md",
        "references/implementation/security-patterns/overview-and-checklist.md",
        "references/implementation/security-patterns/owasp-prototype-and-safe-access.md",
        "references/implementation/third-party-integrations/overview-hls-and-lenis.md",
        "references/implementation/third-party-integrations/botpoison-and-finsweet.md",
        "references/implementation/third-party-integrations/filepond.md",
        "references/implementation/third-party-integrations/best-practices-and-summary.md",
        "references/implementation/webflow-patterns/overview-limits-and-collection-lists.md",
        "references/implementation/webflow-patterns/development-and-production.md",
        "references/implementation/webflow-patterns/finsweet-custom-select-bridge.md",
        "references/shared/dev-workflow/overview-nav-and-logging.md",
        "references/shared/dev-workflow/automation-errors-and-compat.md",
        "references/shared/dev-workflow/common-commands.md",
        "references/shared/dev-workflow/checklists-and-decision-matrix.md",
        "assets/integrations/README.md",
        "assets/patterns/README.md",
        "assets/templates/README.md"
    ],
    "CODE_QUALITY": [
        "references/shared/cross-language-rules.md",
        "references/shared/enforcement.md",
    ],
    "DEBUGGING": [
        "references/debugging/debugging-workflows/systematic-four-phases.md",
        "references/debugging/debugging-workflows/rules-and-root-cause.md",
        "references/debugging/debugging-workflows/performance-debugging.md",
        "references/debugging/debugging-workflows/quick-reference-and-lenis.md",
        "references/debugging/debugging-workflows/sub-agent-verification.md",
        "references/debugging/debugging-workflows/scroll-interceptor-and-related.md",
        "references/debugging/error-recovery.md",
        "assets/webflow-debugging-checklist.md"
    ],
    "VERIFICATION": [
        "references/verification/verification-workflows/gate-and-automated-options.md",
        "references/verification/verification-workflows/requirements-rules-and-checklist.md",
        "assets/webflow-verification-checklist.md"
    ],
    "TESTING": [
        "assets/animation/playbook-entries.md"
    ],
    "DEPLOYMENT": [
        "references/deployment/cdn-deployment.md",
        "references/deployment/minification-guide/overview-terser-and-patterns.md",
        "references/deployment/minification-guide/workflow-verification-and-debugging.md",
        "references/deployment/minification-guide/batch-rules-and-related.md",
        "references/deployment/webflow-staging-production.md",
        "assets/scripts/README.md"
    ],
    "PERFORMANCE": [
        "references/performance/cwv-remediation.md",
        "references/performance/interaction-gated-loading.md",
        "references/performance/resource-loading.md",
        "references/performance/third-party.md",
        "references/performance/webflow-constraints.md",
        "references/verification/performance-checklist.md",
        "references/implementation/performance-patterns/overview-and-checklist.md",
        "references/implementation/performance-patterns/budgets-and-anti-patterns.md",
        "references/animation/performance-and-pitfalls.md"
    ],
    "ANIMATION": [
        "references/implementation/animation-workflows/overview-decision-tree-and-css.md",
        "references/implementation/animation-workflows/motion-dev-and-performance.md",
        "references/implementation/animation-workflows/testing-and-common-issues.md",
        "references/implementation/animation-workflows/motion-dev-advanced.md",
        "references/implementation/swiper-patterns/overview-timeline-and-marquee.md",
        "references/implementation/swiper-patterns/autoplay-accessibility-and-naming.md",
        "references/implementation/swiper-patterns/initialization-and-troubleshooting.md"
    ],
    "MOTION_DEV": [
        "references/animation/quick-start.md",
        "references/animation/animation-principles.md",
        "references/animation/animate-and-timelines.md",
        "references/animation/scroll-and-gestures.md",
        "references/animation/integration-patterns.md",
        "references/animation/decision-matrix.md",
        "references/animation/performance-and-pitfalls.md",
        "assets/animation/install-card.md",
        "assets/animation/snippets/principled-reveal.js",
        "assets/animation/snippets/README.md"
    ],
    "ACCESSIBILITY": [
        "references/animation/performance-and-pitfalls.md",
        "references/implementation/animation-workflows/overview-decision-tree-and-css.md",
        "references/implementation/animation-workflows/motion-dev-and-performance.md",
        "references/implementation/anim

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [MichelKerkmeester](https://github.com/MichelKerkmeester)
- **Source:** [MichelKerkmeester/skilled-harness__spec-driven-agent-loops](https://github.com/MichelKerkmeester/skilled-harness__spec-driven-agent-loops)
- **License:** MIT

Install and usage instructions live in the source repository linked above.