webflow-code-component:local-dev-setup
Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.
- Installs
- 993
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:local-dev-setup- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads webflow-code-component:local-dev-setup automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Local Dev Setup
Set up a new Webflow Code Components project from scratch.
When to Use This Skill
Use when:
- Starting a brand new code components project
- User asks to set up, initialize, or create a new project
- Adding code components to an existing React project
- Setting up the development environment for the first time
Do NOT use when:
- Project already exists and is configured (just answer questions directly)
- Creating individual components (use component-scaffold instead)
- Deploying components (use deploy-guide instead)
Instructions
Phase 1: Assess Current State
-
Check if project exists:
- Is there an existing package.json?
- Is there an existing webflow.json?
- What's the current project structure?
-
Determine setup type:
- New project from scratch
- Add to existing React project
- Add to existing Next.js/Vite project
Phase 2: Project Initialization
-
Create project structure (if new):
- Initialize npm project
- Set up TypeScript
- Create folder structure
-
Install dependencies:
- Core: React, TypeScript
- Webflow: CLI, data-types, react utils
- Optional: Styling libraries
Phase 3: Configuration
-
Create webflow.json:
- Set library name
- Configure component glob pattern
- Set up globals if needed
-
Configure TypeScript:
- Set up tsconfig.json
- Enable JSX support
Phase 4: Create Starter Files
-
Create example component:
- Simple Button component
- Definition file
- Basic styling
-
Create globals file (optional):
- For shared styles
- For decorators
Phase 5: Verify Setup
-
Verify bundle compiles:
- Run
npx webflow library bundle --public-path http://localhost:4000/to catch build errors locally - This verifies your components, imports, and configuration are correct
- Full testing in the Webflow Designer requires deploying with
npx webflow library share
- Run
-
Provide next steps:
- How to create more components
- How to deploy
- Development workflow
Examples
For detailed step-by-step examples, see references/EXAMPLES.md.
Available examples:
- New Project from Scratch - Complete setup with React, TypeScript, and CSS Modules
- Add to Existing React Project - Integrate code components into an existing codebase
- With Tailwind CSS - Setup with Tailwind CSS support
Quick Start (New Project):
# 1. Create project
mkdir my-webflow-components && cd my-webflow-components
npm init -y
# 2. Install dependencies
npm install react react-dom
npm install -D typescript @types/react @types/react-dom
npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react
# 3. Create webflow.json
echo '{"library":{"name":"My Library","components":["./src/**/*.webflow.tsx"]}}' > webflow.json
# 4. Create component directory
mkdir -p src/components/Button
Then create your component files (.tsx, .webflow.tsx, .module.css). See Example 1 in references/EXAMPLES.md for complete file contents including component, definition, and CSS files.
Deploy with:
npx webflow library share
Validation
After setup, verify the project is correctly configured:
| Check | How to Verify |
|---|---|
webflow.json exists in project root | cat webflow.json |
| Dependencies installed | npm list @webflow/webflow-cli |
| Bundle compiles without errors | npx webflow library bundle --public-path http://localhost:4000/ |
| At least one component found | Check bundle output for "Found N component(s)" |
Guidelines
Minimum Requirements
Every code components project needs:
- package.json with dependencies
- webflow.json with library config
- tsconfig.json (for TypeScript)
- At least one
.webflow.tsxfile
Recommended Structure
project/
├── src/
│ ├── components/
│ │ └── [ComponentName]/
│ │ ├── [ComponentName].tsx
│ │ ├── [ComponentName].webflow.tsx
│ │ └── [ComponentName].module.css
│ ├── hooks/ # Custom hooks
│ ├── utils/ # Utilities
│ ├── declarations.d.ts # CSS module types
│ ├── globals.ts # Decorators/global imports
│ └── globals.css # Global styles
├── package.json
├── tsconfig.json
├── webflow.json
└── .gitignore
Development Workflow
- Create component: Use component-scaffold skill
- Develop locally: Run React project to iterate (e.g.,
npm run dev) - Validate: Use pre-deploy-check skill
- Deploy: Use deploy-guide skill or run
npx webflow library share - Test in Webflow: Add component to page in Designer
FAQ
What does the webflow-code-component:local-dev-setup skill do?
Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.
How do I install webflow-code-component:local-dev-setup?
Run npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:local-dev-setup in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webflow-code-component:local-dev-setup/ (personal) or .claude/skills/webflow-code-component:local-dev-setup/ (project).
Which AI agents can use webflow-code-component:local-dev-setup?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is webflow-code-component:local-dev-setup safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains webflow-code-component:local-dev-setup?
It is published by webflow in webflow/webflow-skills. It has 993 recorded installs.
More from webflow/webflow-skills
webflow-cli:cloud
webflow/webflow-skills
Create, build, and deploy Webflow Cloud apps from the CLI (site-attached or project apps), and manage existing ones — apps, domains, environments, deployments, build/runtime logs, and environment variables including secrets. Use when initializing or deploying a Cloud app, importing an existing GitHub repository, setting up CI/CD (GitHub Actions or GitHub-linked deploys), setting or importing secrets, retrying or rolling back a deployment, diagnosing a failed build, or resolving app/environment/workspace IDs from webflow.json or env vars.
webflow-cli:code-component
webflow/webflow-skills
Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.
webflow-cli:designer-extension
webflow/webflow-skills
Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for development.
webflow-code-component:component-audit
webflow/webflow-skills
Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.
webflow-cli:troubleshooter
webflow/webflow-skills
Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.
webflow-code-component:component-scaffold
webflow/webflow-skills
Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.