Webflow Hello World

---
name: webflow-hello-world
description: >-
  Build a minimal, read-first Webflow Data API v2 integration with an official SDK. Use when proving connectivity, learning resource IDs, or establishing a safe starting point. Trigger with "Webflow hello world", "test Webflow API", or "list my Webflow sites".
argument-hint: "[project-path] [site-id]"
allowed-tools: Read, Glob, Grep, WebFetch, Write, Edit
version: 1.6.0
author: Jeremy Longshore <jeremy@intentsolutions.io>
license: MIT
tags:
- saas
- webflow
- api
- quickstart
model: inherit
effort: medium
compatibility: Designed for Claude Code
---
# Webflow Data API Hello World

## Overview

This skill produces a repo-grounded Webflow plan or implementation. It treats current official documentation and the target project's installed versions as authority, keeps discovery read-only, and separates preparation from live mutation.

## Prerequisites

- A named target repository or project path and permission to inspect it
- The intended Webflow environment and non-secret resource identities, or a plan to discover them read-only
- Access to current official Webflow documentation; credentials stay in the user's existing secret store

## Tool Discipline

Use `Read` for repository instructions and relevant files, `Glob` to inventory manifests and Webflow integration paths, and `Grep` to locate API hosts, IDs, scopes, and credential names. Use `WebFetch` only for current official Webflow documentation. Use `Write` for a new user-requested artifact and `Edit` for minimal changes to existing files after the evidence pass.

## Current Contract

- Start with `GET /v2/sites`; use the returned site ID to discover collections and other site resources.
- CMS has staged and live representations. A first-run example should read both deliberately rather than imply they are interchangeable.
- Connection success is not authorization for a write. Keep the hello-world path read-only until the user names the target collection and desired mutation.
- Use the target project's installed SDK types or the current endpoint reference because generated method names can change across SDK releases.

## Authentication

Authenticate Data API calls with a bearer token selected for the integration: a site token for controlled single-site work, a workspace token only for its supported workspace/read use cases, or OAuth for user-authorized applications. Derive scopes from the exact endpoints. Never read, echo, persist, or place token values in commands, patches, examples, logs, or reports.

## Workflow

1. Inspect the project instructions, runtime, package manager, and existing environment-variable convention.
2. Add or reuse a pinned `webflow-api` dependency and a server-only `WEBFLOW_API_TOKEN` binding.
3. Create one small client module and a command that lists accessible sites without logging credentials or entire sensitive payloads.
4. Select the intended site by ID, then list collections and record their IDs and display names.
5. Read a bounded page of staged items and, separately, live items. Label which surface produced each result.
6. Run the project's typecheck or test command if already available; otherwise provide the exact command the user should run and the expected identity fields.

## Approval Boundaries

Default to read-only inspection. Before any create, update, delete, publish, unpublish, archive, deploy, token revoke, or webhook registration, show the exact environment and resource IDs, the proposed change, validation method, and rollback or compensating action. Proceed only when the user's request clearly authorizes that mutation; require a fresh explicit approval for production publication or destructive work.

## Output

Return the inspected project and versions, verified Webflow identities, relevant endpoint and scope contract, changes proposed or made, validation evidence, live-mutation status, rollback readiness, and remaining risks. Distinguish documented fact, repository evidence, and inference.

## Error Handling

| Condition | Response |
|---|---|
| No sites returned | Confirm token type and authorization; an empty result is not permission to guess a site ID. |
| Collection missing | Re-list collections for the verified site and account for environment or locale differences. |
| Write requested | Switch to the CMS lifecycle workflow and require an explicit preview plus approval. |

## Examples

Given a Node project and a site token, add a pinned client, list sites, select the expected site ID, list collections, and read ten staged items without publishing or modifying anything.

## Resources

- [Official Webflow references](references/official-docs.md)
- [Webflow developer documentation](https://developers.webflow.com/)
- [Data API v2 index](https://developers.webflow.com/data/v2.0.0/llms.txt)