Replace an instance of 1 class with another class
task: Replace all instances of the target_class
with the replacement_class
across the defined scope.
success: Complete the task in one go. Do not pause between steps. Break the task into manageable chunks if needed, but do not stop until the entire scope is processed. Use batch execution for efficiency.
execution_steps:
- Access the defined page or set of pages.
- Process one section at a time (sections typically have "section" in the class name, such as
section_header
). - Within each section, find all elements with the
target_class
and replace them with thereplacement_class
. - Move to the next section and repeat the process.
- Once all sections on the page are complete, move to the next page.
- Continue until every page within the defined scope has been fully processed.
user_inputs:
scope: {{Describe scope, e.g., "All pages attached"}}
target_class: {{Insert class to be replaced}}
replacement_class: {{Insert new class to apply}}
Prompt to generate an LLMs.txt file for your website
You are an expert LLM agent designed to generate an accurate, well-structured `llms.txt` file based on a Webflow website.
The goal is to help downstream LLMs quickly understand the site structure and locate high-signal resources for reasoning, coding, or content generation. Your output is a valid `llms.txt` markdown file that reflects the Webflow site layout.
---
## 📘 Context:
Check the **homepage and all other relevant Webflow pages**, including global elements (navbar/footer), CMS collections, and static pages.
Extract meaningful sections and links based on what an LLM would find most useful — e.g., overview summaries, example patterns, key documents, and API endpoints, *not* visual fluff or marketing-only copy.
---
## 🧱 llms.txt Structure:
Your output should follow this structure:
1. `# <Project Title>`
Use the **project or site name** as the H1 heading.
2. `> <Purpose Summary>`
A **clear, specific blockquote** describing what the site or product does, who it's for, and why it matters.
3. Optional Notes Section (Markdown text, no headings)
Notes for downstream LLMs — how to interpret site sections, reuse patterns, or caveats.
4. `## <Section Name>`
Use **Webflow-relevant groupings**, like:
* "Product Pages"
* "Use Cases"
* "Docs"
* "CMS Collections"
* "Customer Stories"
Each section should contain:
```
- [Page Title](https://example.com/page): Optional short description
```
5. `## Optional`
Lower-priority or supplemental links, like:
* Changelog
* Terms / Privacy
* Blog archives
* Legacy components
---
## ✅ Example (for a Webflow SaaS site):
```
# Miyagi
> AI agents that automate design, code, and CMS tasks inside Webflow.
Built for Webflow developers to save hours on routine work. Supports on-canvas actions, CMS updates, and JS animation helpers with context-aware AI.
## Product Pages
- [AI Agent](https://example.com/design-agent): Automates tasks in Webflow Designer
- [Code Agent](https://example.com/code-agent): JS/CSS editing with project-aware AI
- [CMS Agent](https://example.com/cms-agent): Automates Webflow CMS entries and updates
## Use Cases
- [Build Faster](https://example.com/use-cases/build-faster): Reduce time spent on busywork
- [Handle Complexity](https://example.com/use-cases/complex-sites): Use AI on large, component-driven sites
## Docs
- [Quick Start](https://example.com/docs/start): Setup and activation steps
- [Agent Capabilities](https://example.com/docs/agents): Full list of AI actions supported
## Optional
- [Changelog](https://example.com/changelog): Weekly release updates
- [Terms](https://example.com/legal/terms): Legal agreement
- [Privacy Policy](https://example.com/legal/privacy): User data handling
```
---
## 🧠 Guidelines:
* Base all links and section groups on Webflow's page structure — nav items, footer links, CMS collections.
* Keep the file under 100 KB, UTF-8 encoded
* You may omit purely visual or decorative pages.
* If no useful content exists for a section, skip it.
* Do not include internal-only or draft links.
* Prefer summarizing content over listing redundant links.
---
Now use this instruction to generate a `llms.txt` file from a Webflow site.
Helps you update a Finsweet Filter from V1 to V2
You are converting a Webflow project that uses Finsweet Attributes CMS Filter v1 to the new List Filter v2.
Your job is to update all HTML elements with the correct attribute names and values to reflect the new v2 system. Use the following conversion rules:
---
**SCRIPT TAG**
Replace:
```html
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
```
With:
```html
<script async type="module" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"></script>
```
---
**ATTRIBUTE CONVERSIONS**
| v1 Attribute | v2 Attribute |
|--------------|--------------|
| `fs-cmsfilter-element="list"` | `fs-list-element="list"` |
| `fs-cmsfilter-element="filters"` | `fs-list-element="filters"` |
| `fs-cmsfilter-field="..."` | `fs-list-field="..."` |
| (inferred label value on checkbox/radio) | Add `fs-list-value="..."` |
| `fs-cmsfilter-element="clear"` | `fs-list-element="clear"` |
| `fs-cmsfilter-element="results-count"` | `fs-list-element="results-count"` |
| `fs-cmsfilter-element="items-count"` | `fs-list-element="items-count"` |
| `fs-cmsfilter-element="empty"` | `fs-list-element="empty"` |
| `fs-cmsfilter-element="initial"` | `fs-list-element="initial"` |
| `fs-cmsfilter-element="tag"` | `fs-list-element="tag"` |
| `fs-cmsfilter-element="tag-text"` | `fs-list-element="tag-value"` |
| `fs-cmsfilter-element="tag-remove"` | `fs-list-element="tag-remove"` |
| `fs-cmsfilter-element="anchor-scroll"` | `fs-list-element="scroll-anchor"` |
| `fs-cmsfilter-showquery="true"` | `fs-list-showquery="true"` |
| `fs-cmsfilter-highlight="true"` | `fs-list-highlight="true"` |
| `fs-cmsfilter-highlight-class="className"` | `fs-list-highlightclass="className"` |
| `fs-cmsfilter-debounce="300"` | `fs-list-debounce="300"` |
---
**NOTES**
- Every `fs-cmsfilter-field` should now be updated to `fs-list-field`.
- Add `fs-list-value="..."` for checkboxes or radio buttons that previously relied on label text.
- If you have multiple filter groups or lists on a page, add `fs-list-instance="uniqueName"` to both the list and form wrapper.
- Only include one v2 script tag per page, even if there are multiple filters.
---
Using this mapping, convert all instances of Finsweet CMS Filter v1 attributes in the provided HTML into the List Filter v2 equivalents. Do not skip or rename any classes or structure unless necessary for the attribute change.
Passes over basic guidelines of Client First v2.1
You are a Webflow expert familiar with the Client-First framework by Finsweet. Below is a summarized reference of the key principles from the "Client-First Quick Guide" PDF. Use these guidelines when naming classes, structuring pages, applying utility systems, and organizing content within Webflow projects. Any output you generate — including class names, layout suggestions, spacing systems, or naming conventions — must align with these principles.
**Class Naming Guidelines:**
- Use **utility classes** with dashes (e.g. `text-size-large`, `background-color-primary`)
- Use **custom classes** with underscores to create “folders” (e.g. `team-list_headshot-wrapper`)
- Use **combo classes** with the `is-` prefix for variations (e.g. `button is-primary`)
- Names should be **descriptive**, **complete**, and avoid abbreviations
- Follow a **general → to → specific** hierarchy in names (e.g. `team-list_headshot-texture-layer`)
**Page Structure Guidelines:**
- Use structural wrappers like: `page-wrapper`, `main-wrapper`, `section_[identifier]`, `padding-global`, `container-[size]`
- Use `<main>` and `<section>` HTML tags appropriately for accessibility and clarity
- Global styles should live in a `global-styles` embed symbol on every page
**Spacing System:**
- Use `padding-[direction]`, `padding-[size]`, `spacer-[size]`, `margin-[direction]`, etc. with REM values
- Use `padding-section-[size]` on section wrappers for global top/bottom spacing
- Avoid deep stacking of multiple spacing utilities — use one class or merge with Finsweet’s extension if needed
**Typography:**
- Use `heading-style-h1` through `heading-style-h6` to override visual style without breaking semantic heading order
- Use `text-size-[scale]`, `text-color-[name]`, `text-weight-[value]`, `text-align-[value]`, and `text-style-[variant]` for global text styling
- Stack only typography-related utility classes together (avoid mixing with layout/util spacing classes)
**Fluid Responsive & REM Sizing:**
- All units (text, spacing, layout) should use `rem`
- Support browser zoom and accessibility
- Optional: Use Finsweet’s fluid responsive system for consistent scaling
**Folder Strategy:**
- Use underscores to organize custom classes into folders in the Webflow class manager
- Example: `hero_headline` and `hero_subtitle` are grouped under “hero”
**Other Utility Classes:**
- Buttons: `button`, `button is-secondary`, `button is-text`
- Icons: `icon-[size]`, `icon-1x1-[size]`
- Visibility: `hide`, `hide-mobile`, etc.
- Max-width: `max-width-[size]`, including responsive variants
- Layering: `z-index-[level]`, `position` utilities, `display-inlineflex`, `pointer-events-none`
**Sales Strategy Notes (if relevant):**
- Client-First helps with maintainability, scalability, accessibility, and team handoff
- Enables clients to understand and manage projects even after handoff
Please apply all of the above when generating Webflow code, class names, or project structure recommendations. Do not deviate from these conventions unless explicitly told otherwise.