[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-webflow-webflow-code-componentpre-deploy-check":3,"mdc--jgxotf-key":37,"related-repo-webflow-webflow-code-componentpre-deploy-check":3443,"related-org-webflow-webflow-code-componentpre-deploy-check":3561},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":32,"sourceUrl":35,"mdContent":36},"webflow-code-componentpre-deploy-check","webflow-code-component:pre-deploy-check","validate Webflow Code Components before deployment","Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},"webflow","Webflow","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwebflow.png",[13,17,20,23],{"name":14,"slug":15,"type":16},"Validation","validation","tag",{"name":18,"slug":19,"type":16},"QA","qa",{"name":21,"slug":22,"type":16},"Deployment","deployment",{"name":10,"slug":9,"type":16},107,"https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills","2026-05-18T06:47:51.300653",null,17,[30,31],"agent","skills",{"repoUrl":25,"stars":24,"forks":28,"topics":33,"description":34},[30,31],"Official Webflow Agent Skills","https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fwebflow-skills\u002Fskills\u002Fpre-deploy-check","---\nname: webflow-code-component:pre-deploy-check\ndescription: Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.\ncompatibility: Node.js 18+, React 18+, TypeScript, @webflow\u002Fwebflow-cli\nmetadata:\n  author: webflow\n  version: \"1.1\"\n---\n\n# Build Validate\n\nValidate code components before deployment to catch issues early.\n\n## When to Use This Skill\n\n**Use when:**\n- User is about to deploy and wants to check for issues first\n- Proactively before running `webflow library share`\n- User asks to validate, check, or verify their components\n- After making significant changes to components\n\n**Do NOT use when:**\n- Deployment already failed (use troubleshoot-deploy instead)\n- Just building for local development\n- Auditing code quality (use component-audit instead)\n\n## Instructions\n\n### Phase 1: Project Structure Check\n\n1. **Verify webflow.json exists**:\n   - Check for required fields (`library.name`, `library.components`)\n   - Validate glob pattern matches component files — the recommended pattern is `\".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"` covering all supported extensions\n   - Check `globals` path if specified — file must exist and be importable\n   - Check `bundleConfig` path if specified — file must exist\n\n2. **Check dependencies**:\n   - Verify `@webflow\u002Fwebflow-cli` installed\n   - Verify `@webflow\u002Fdata-types` installed\n   - Verify `@webflow\u002Freact` installed\n   - Check for version compatibility (check installed versions, don't assume specific versions)\n\n3. **Verify component files**:\n   - Find all `.webflow.tsx` \u002F `.webflow.ts` files matching the glob pattern\n   - Ensure matching React components exist\n   - Check for orphaned definition files\n\n4. **Validate imports in `.webflow.tsx` files**:\n   - Must import `declareComponent` from `@webflow\u002Freact`\n   - Must import `props` from `@webflow\u002Fdata-types` (if props are defined)\n   - Must import the actual React component being declared\n\n### Phase 2: Component Analysis\n\n5. **For each component, check**:\n   - `declareComponent` is called with the component and a config object\n   - `name` is provided in the config\n   - All props have `name` properties and appropriate `defaultValue` where applicable\n   - Prop types are valid — the 11 supported types are:\n     - **Text** (alias: String) — single line text input\n     - **RichText** — multi-line text with formatting\n     - **TextNode** — single\u002Fmulti-line text editable on canvas\n     - **Link** — URL input (returns `{ href, target, preload }` object)\n     - **Image** — image upload and selection\n     - **Number** — numeric input\n     - **Boolean** — true\u002Ffalse toggle\n     - **Variant** — dropdown with predefined options (requires `options` array)\n     - **Visibility** — show\u002Fhide controls\n     - **Slot** — content areas for child components\n     - **ID** — HTML element ID\n\n6. **Validate component options**:\n   - If `options` object is present, validate:\n     - `applyTagSelectors` is a boolean (default: `false`) — enables site tag selectors in Shadow DOM\n     - `ssr` is a boolean (default: `true`) — controls server-side rendering\n\n7. **Check for SSR issues**:\n   - Scan for browser-only API usage outside of `useEffect` or guarded blocks:\n     - `window`, `document`, `localStorage`, `sessionStorage`, `navigator`\n   - Flag dynamic\u002Fpersonalized content patterns (user-specific dashboards, authenticated views)\n   - Flag heavy\u002Finteractive UI that doesn't benefit from SSR (charts, 3D scenes, maps, animation-heavy elements)\n   - Flag non-deterministic output (random numbers, time-based values that differ server vs client)\n   - Suggest `ssr: false` in options if component is purely interactive or browser-dependent\n\n8. **Check styling**:\n   - Verify styles are imported in `.webflow.tsx` or via globals file\n   - Check for site class usage — site classes do NOT work in Shadow DOM\n   - Site variables DO work: `var(--variable-name, fallback)`\n   - Inherited CSS properties DO work: `font-family: inherit`\n   - Tag selectors work IF `applyTagSelectors: true` is set in component options\n   - Validate CSS-in-JS setup if used (see CSS-in-JS detection below)\n\n9. **Check for Shadow DOM + React Context issues**:\n   - If a component uses slots (`props.Slot`) AND imports\u002Fuses `useContext` or a Context Provider:\n     - Warn that parent and child components in slots cannot share React Context — each child renders in its own Shadow DOM with a separate React root\n     - Suggest alternatives: Nano Stores, custom events, URL parameters, or browser storage\n\n### Phase 3: Build Test\n\n10. **Run TypeScript\u002Fbuild check**:\n    - Check for TypeScript compilation errors\n    - Verify all imports resolve correctly\n    - Identify any build-time issues\n\n11. **Check bundle size**:\n    - If a build output exists, verify total bundle size is under **50MB** (maximum bundle limit)\n    - If over limit, flag as error and suggest optimization\n\n12. **Run local bundle test** (optional, suggest to user):\n    - Suggest running `npx webflow library bundle --public-path http:\u002F\u002Flocalhost:4000\u002F` to test bundling before sharing\n    - If bundling issues occur, suggest `--debug-bundler` flag to inspect the final webpack config\n\n### Phase 4: Detect Framework-Specific Setup\n\n13. **CSS-in-JS library detection**:\n    - If project uses **styled-components**: verify `@webflow\u002Fstyled-components-utils` is installed and `styledComponentsShadowDomDecorator` is exported from globals decorators array\n    - If project uses **Emotion** or **Material UI** (`@emotion\u002Fstyled`, `@emotion\u002Freact`, `@mui\u002Fmaterial`): verify `@webflow\u002Femotion-utils` is installed and `emotionShadowDomDecorator` is exported from globals decorators array\n\n14. **Tailwind CSS detection**:\n    - If project uses **Tailwind CSS** (`tailwindcss` in dependencies):\n      - Verify `@tailwindcss\u002Fpostcss` is installed\n      - Verify `postcss.config.mjs` exists with `@tailwindcss\u002Fpostcss` plugin\n      - Verify Tailwind CSS is imported in globals file (e.g., `@import \"tailwindcss\"` in globals.css)\n\n15. **Sass\u002FLess preprocessor detection**:\n    - If project uses **Sass** (`.scss` files or `sass` in dependencies): verify `sass` and `sass-loader` are installed, and a webpack config adds the `.scss` rule\n    - If project uses **Less** (`.less` files or `less` in dependencies): verify `less` and `less-loader` are installed, and a webpack config adds the `.less` rule\n    - For either: verify `bundleConfig` is set in `webflow.json` pointing to the webpack config\n\n16. **Webpack custom config validation** (if `bundleConfig` is specified):\n    - Verify the file exists at the specified path\n    - Verify it uses CommonJS exports (`module.exports`)\n    - Warn if it attempts to override blocked properties: `entry`, `output`, `target` (these are silently filtered out)\n    - Verify `module.rules` uses function syntax `(currentRules) => { ... }`, not an array\n\n### Phase 5: Report Results\n\n17. **Generate validation report**:\n    - List all checks performed\n    - Show passed\u002Ffailed\u002Fwarning status\n    - Provide fix suggestions for failures\n    - Indicate deployment readiness\n\n## Validation Checks\n\n### Required Checks\n\n| Check | Severity | Description |\n|-------|----------|-------------|\n| webflow.json exists | Error | Required for CLI |\n| Dependencies installed | Error | `@webflow\u002Fwebflow-cli`, `@webflow\u002Fdata-types`, `@webflow\u002Freact` |\n| Component files exist | Error | React + definition files present |\n| declareComponent called | Error | Required in .webflow.tsx with correct imports |\n| Valid prop types | Error | Only the 11 supported types (Text\u002FString, RichText, TextNode, Link, Image, Number, Boolean, Variant, Visibility, Slot, ID) |\n| Build succeeds | Error | No compilation errors |\n| Bundle size \u003C 50MB | Error | Maximum bundle limit enforced by Webflow |\n\n### Warning Checks\n\n| Check | Severity | Description |\n|-------|----------|-------------|\n| Props have defaults | Warning | Better designer experience |\n| SSR compatibility | Warning | Browser APIs, dynamic content, heavy UI, non-deterministic output |\n| Styles imported | Warning | Styles may not appear in Shadow DOM |\n| Site class usage | Warning | Site classes don't work in Shadow DOM — use component-specific classes |\n| Shadow DOM + Context | Warning | Slots prevent React Context sharing between parent\u002Fchild |\n| CSS-in-JS decorator | Warning | styled-components\u002FEmotion need Shadow DOM decorators |\n| Tailwind setup | Warning | Missing postcss config or globals import |\n| Sass\u002FLess setup | Warning | Missing loaders or webpack config |\n| Webpack blocked props | Warning | `entry`, `output`, `target` overrides are silently ignored |\n| Webpack rules format | Warning | Must use function syntax, not array |\n| Component options | Warning | `applyTagSelectors` and `ssr` must be booleans |\n| Glob pattern coverage | Warning | Pattern should cover all supported extensions (.js, .jsx, .mjs, .ts, .tsx) |\n| bundleConfig file | Warning | File must exist if specified in webflow.json |\n\n### Info Checks\n\n| Check | Severity | Description |\n|-------|----------|-------------|\n| Component count | Info | Number of components |\n| Prop count | Info | Props per component |\n| Bundle size | Info | Current bundle size vs 50MB limit |\n| Frameworks detected | Info | CSS-in-JS, Tailwind, Sass\u002FLess usage |\n\n## Examples\n\n**User prompt:**\n```\nCheck if my components are ready to deploy\n```\n\n**Response:**\n```\n🔍 Build Validation: My Component Library\n\nRunning pre-deployment checks...\n\n---\n\n## Project Structure\n\n✅ webflow.json found\n✅ library.name: \"My Component Library\"\n✅ library.components: \".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"\n✅ globals: \".\u002Fsrc\u002Fglobals.ts\"\n✅ bundleConfig: not specified (using defaults)\n\n---\n\n## Dependencies\n\n✅ @webflow\u002Fwebflow-cli: installed\n✅ @webflow\u002Fdata-types: installed\n✅ @webflow\u002Freact: installed\n✅ react: installed\n✅ typescript: installed\n\n---\n\n## Frameworks Detected\n\n✅ Tailwind CSS detected\n  ✅ @tailwindcss\u002Fpostcss installed\n  ✅ postcss.config.mjs found\n  ✅ globals.css imports Tailwind\n\n---\n\n## Components Found (4)\n\n### 1. Button ✅\n- File: src\u002Fcomponents\u002FButton\u002FButton.webflow.tsx\n- Imports: ✅ declareComponent, ✅ props, ✅ Button component\n- Props: label (Text), variant (Variant), disabled (Boolean)\n- All props have defaults ✅\n- SSR compatible ✅\n- Options: applyTagSelectors: true ✅\n- Styles imported ✅\n\n### 2. Card ✅\n- File: src\u002Fcomponents\u002FCard\u002FCard.webflow.tsx\n- Imports: ✅ declareComponent, ✅ props, ✅ Card component\n- Props: title (Text), image (Image), content (RichText), link (Link)\n- All props have defaults ✅\n- SSR compatible ✅\n- Styles imported ✅\n\n### 3. Modal ⚠️\n- File: src\u002Fcomponents\u002FModal\u002FModal.webflow.tsx\n- Imports: ✅ declareComponent, ✅ props, ✅ Modal component\n- Props: title (Text), isOpen (Boolean), content (Slot)\n- All props have defaults ✅\n- ⚠️ SSR Issue: Uses `document.body` in render\n  → Suggestion: Add `ssr: false` to options or wrap in useEffect\n- Styles imported ✅\n\n### 4. CartIcon ⚠️\n- File: src\u002Fcomponents\u002FCartIcon\u002FCartIcon.webflow.tsx\n- Imports: ✅ declareComponent, ✅ CartIcon component\n- Props: none\n- ⚠️ Missing props - component has no editable properties\n  → Suggestion: Consider adding props for designer customization\n- ⚠️ Uses localStorage without SSR guard\n  → Suggestion: Wrap in useEffect or useState initializer\n- Styles imported ✅\n\n---\n\n## Build Test\n\n✅ Build completed successfully\n✅ No TypeScript errors\n✅ No webpack errors\n✅ Bundle size: 2.3MB \u002F 50MB limit\n\n---\n\n## Summary\n\n| Category | Status |\n|----------|--------|\n| Project Structure | ✅ Pass |\n| Dependencies | ✅ Pass |\n| Frameworks | ✅ Pass |\n| Components | ⚠️ 2 warnings |\n| Build | ✅ Pass |\n\n---\n\n## Ready to Deploy: ⚠️ WITH WARNINGS\n\nYou can deploy, but consider fixing these issues:\n\n1. **Modal SSR Issue**\n   Add to Modal.webflow.tsx:\n   ```typescript\n   options: {\n     ssr: false\n   }\n   ```\n\n2. **CartIcon localStorage Usage**\n   Update CartIcon.tsx:\n   ```typescript\n   const [count, setCount] = useState(() => {\n     if (typeof window === \"undefined\") return 0;\n     return parseInt(localStorage.getItem(\"cartCount\") || \"0\");\n   });\n   ```\n\n---\n\n💡 To deploy: `npx webflow library share`\n💡 To test locally first: `npx webflow library bundle --public-path http:\u002F\u002Flocalhost:4000\u002F`\n```\n\n---\n\n**Example: Build Failure**\n\n```\n🔍 Build Validation: My Component Library\n\nRunning pre-deployment checks...\n\n---\n\n## Project Structure\n\n✅ webflow.json found\n⚠️ library.components uses narrow glob: \".\u002Fsrc\u002F**\u002F*.webflow.tsx\"\n  → Recommendation: Use \".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\" to cover all supported extensions\n\n---\n\n## Dependencies\n\n❌ Missing: @webflow\u002Freact\n   Fix: npm install --save-dev @webflow\u002Freact\n\n---\n\n## Build Test\n\n❌ Build Failed\n\nError in src\u002Fcomponents\u002FButton\u002FButton.webflow.tsx:\n```\nModule not found: Error: Can't resolve '@webflow\u002Freact'\n```\n\n---\n\n## Summary\n\n| Category | Status |\n|----------|--------|\n| Dependencies | ❌ 1 error |\n| Build | ❌ Failed |\n\n---\n\n## Ready to Deploy: ❌ NO\n\nFix the following before deployment:\n\n1. **Install missing dependency**\n   ```bash\n   npm install --save-dev @webflow\u002Freact\n   ```\n\n2. **Re-run validation**\n   After installing, run this check again.\n```\n\n---\n\n**Example: CSS-in-JS Missing Decorator**\n\n```\n🔍 Build Validation: My Component Library\n\n---\n\n## Frameworks Detected\n\n⚠️ styled-components detected but Shadow DOM decorator not configured\n  → Install: npm install @webflow\u002Fstyled-components-utils\n  → Add to globals.ts:\n    ```typescript\n    import { styledComponentsShadowDomDecorator } from \"@webflow\u002Fstyled-components-utils\";\n    export const decorators = [styledComponentsShadowDomDecorator];\n    ```\n  → Reference globals in webflow.json:\n    ```json\n    { \"library\": { \"globals\": \".\u002Fsrc\u002Fglobals.ts\" } }\n    ```\n\nWithout this, styled-components styles will be injected into document.head\ninstead of the Shadow DOM, and your components will appear unstyled.\n```\n\n---\n\n**Example: Webpack Config Issues**\n\n```\n🔍 Build Validation: My Component Library\n\n---\n\n## Webpack Configuration\n\n⚠️ webpack.webflow.js: `module.rules` uses array syntax\n  → Must use function syntax: `rules: (currentRules) => { return [...]; }`\n  → Array syntax will not work — the function receives current rules to extend\n\n⚠️ webpack.webflow.js: overrides `output` property\n  → The `output` property is blocked and will be silently ignored\n  → Blocked properties: entry, output, target\n\n💡 Use `--debug-bundler` flag to inspect the final merged webpack config:\n   npx webflow library bundle --debug-bundler\n```\n\n---\n\n**Example: Shadow DOM Context Warning**\n\n```\n## Components Found (2)\n\n### 1. ThemeProvider ⚠️\n- File: src\u002Fcomponents\u002FThemeProvider\u002FThemeProvider.webflow.tsx\n- Props: theme (Variant), children (Slot)\n- ⚠️ Shadow DOM + React Context Issue:\n  Component uses Slot prop AND React Context (ThemeContext).\n  Children placed in slots render in separate Shadow DOM containers\n  with their own React roots — they cannot access this Context.\n\n  Alternatives for cross-component state:\n  - Nano Stores (lightweight reactive state)\n  - Custom events (window.dispatchEvent\u002FaddEventListener)\n  - URL parameters (for shareable state)\n  - Browser storage (localStorage\u002FsessionStorage)\n```\n\n---\n\n## Guidelines\n\n### Validation Order\n\nRun checks in this order for efficiency:\n\n1. Project structure (fast, catches obvious issues)\n2. Dependencies (medium, required for build)\n3. Component analysis (medium, catches code issues)\n4. Framework detection (medium, validates CSS-in-JS\u002FTailwind\u002FSass setup)\n5. Build test (slow, but required)\n\n### SSR Detection Patterns\n\nLook for these patterns that indicate SSR issues:\n\n```typescript\n\u002F\u002F Direct browser API usage (will break SSR)\nwindow.innerWidth\ndocument.getElementById\nlocalStorage.getItem\nnavigator.userAgent\nsessionStorage.getItem\n\n\u002F\u002F Dynamic\u002Fpersonalized content (may cause hydration mismatch)\n\u002F\u002F User-specific dashboards, authenticated views\n\n\u002F\u002F Heavy\u002Finteractive UI (SSR adds no value, re-renders anyway)\n\u002F\u002F Charts, 3D scenes, maps, animation-driven elements\n\n\u002F\u002F Non-deterministic output (differs server vs client)\nMath.random()\nnew Date().toLocaleString()\n\n\u002F\u002F Safe patterns (in useEffect or state initializer)\nuseEffect(() => {\n  \u002F\u002F Browser APIs here are fine\n}, []);\n\nuseState(() => {\n  if (typeof window === \"undefined\") return default;\n  return window.innerWidth;\n});\n```\n\nWhen SSR issues are found, prominently suggest the `ssr: false` option:\n```typescript\nexport default declareComponent(MyComponent, {\n  name: \"My Component\",\n  options: {\n    ssr: false  \u002F\u002F Disables server-side rendering\n  },\n});\n```\n\n### CSS-in-JS \u002F Tailwind \u002F Preprocessor Detection\n\nCheck project dependencies and files to detect styling frameworks:\n\n**styled-components:**\n- Detect: `styled-components` in package.json dependencies\n- Require: `@webflow\u002Fstyled-components-utils` installed\n- Require: `styledComponentsShadowDomDecorator` in globals decorators array\n\n**Emotion \u002F Material UI:**\n- Detect: `@emotion\u002Fstyled`, `@emotion\u002Freact`, or `@mui\u002Fmaterial` in dependencies\n- Require: `@webflow\u002Femotion-utils` installed\n- Require: `emotionShadowDomDecorator` in globals decorators array\n\n**Tailwind CSS:**\n- Detect: `tailwindcss` in dependencies\n- Require: `@tailwindcss\u002Fpostcss` installed\n- Require: `postcss.config.mjs` with `@tailwindcss\u002Fpostcss` plugin\n- Require: Tailwind import in globals CSS (`@import \"tailwindcss\"`)\n\n**Sass:**\n- Detect: `.scss` files in src or `sass` in dependencies\n- Require: `sass` and `sass-loader` installed as dev dependencies\n- Require: webpack config with `.scss` rule using function syntax for module.rules\n- Require: `bundleConfig` set in webflow.json\n\n**Less:**\n- Detect: `.less` files in src or `less` in dependencies\n- Require: `less` and `less-loader` installed as dev dependencies\n- Require: webpack config with `.less` rule using function syntax for module.rules\n- Require: `bundleConfig` set in webflow.json\n\n### Webpack Config Validation Rules\n\nWhen `bundleConfig` is specified in webflow.json:\n\n1. File must exist at the specified path\n2. Must use CommonJS: `module.exports = { ... }`\n3. Blocked properties that are silently ignored: `entry`, `output`, `target`\n4. `module.rules` must be a function, not an array: `rules: (currentRules) => { ... }`\n5. `ModuleFederationPlugin` and `MiniCssExtractPlugin` are auto-deduplicated\n\n### Common Build Errors\n\n| Error | Cause | Fix |\n|-------|-------|-----|\n| \"Can't resolve '@webflow\u002Freact'\" | Missing dependency | `npm i -D @webflow\u002Freact` |\n| \"Cannot find module '.\u002FComponent'\" | Wrong import path | Check relative paths |\n| \"Type 'X' is not assignable\" | TypeScript error | Fix type mismatch |\n| \"Unexpected token\" | Syntax error | Check JSX\u002FTS syntax |\n| \"Maximum call stack\" | Circular import | Break dependency cycle |\n| Bundle exceeds 50MB | Too many\u002Flarge dependencies | Tree-shake, lazy load, replace heavy libs |\n| Styles not appearing | Missing Shadow DOM decorator | Add CSS-in-JS decorator or import styles in .webflow.tsx |\n\n### Bundle Size Optimization\n\nQuick wins for reducing bundle size:\n\n1. **Use production build**: Ensure minification is enabled\n2. **Tree-shake imports**: Import specific exports\n3. **Replace heavy libraries**: moment → date-fns, lodash → lodash-es\n4. **Lazy load**: Dynamic imports for heavy components\n5. **Check for duplicates**: Multiple React versions, etc.\n6. **Monitor size**: Bundle must stay under 50MB limit\n",{"data":38,"body":42},{"name":5,"description":7,"compatibility":39,"metadata":40},"Node.js 18+, React 18+, TypeScript, @webflow\u002Fwebflow-cli",{"author":9,"version":41},"1.1",{"type":43,"children":44},"root",[45,54,60,67,76,108,116,134,140,147,378,384,847,853,952,958,1340,1346,1382,1388,1394,1562,1568,1842,1848,1941,1947,1955,1967,1975,1984,2239,2243,2261,2270,2275,2280,2283,2289,2301,2304,2310,2315,2318,2324,2329,2334,2343,2346,2352,2399,2402,2408,2413,2467,2476,2480,2483,2489,2508,2513,2522,2526,2529,2535,2555,2574,2586,2595,2601,2607,2654,2663,2675,2807,2813,2818,2826,2863,2871,2918,2926,2977,2985,3045,3053,3108,3114,3126,3201,3207,3363,3369,3374,3437],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"build-validate",[51],{"type":52,"value":53},"text","Build Validate",{"type":46,"tag":55,"props":56,"children":57},"p",{},[58],{"type":52,"value":59},"Validate code components before deployment to catch issues early.",{"type":46,"tag":61,"props":62,"children":64},"h2",{"id":63},"when-to-use-this-skill",[65],{"type":52,"value":66},"When to Use This Skill",{"type":46,"tag":55,"props":68,"children":69},{},[70],{"type":46,"tag":71,"props":72,"children":73},"strong",{},[74],{"type":52,"value":75},"Use when:",{"type":46,"tag":77,"props":78,"children":79},"ul",{},[80,86,98,103],{"type":46,"tag":81,"props":82,"children":83},"li",{},[84],{"type":52,"value":85},"User is about to deploy and wants to check for issues first",{"type":46,"tag":81,"props":87,"children":88},{},[89,91],{"type":52,"value":90},"Proactively before running ",{"type":46,"tag":92,"props":93,"children":95},"code",{"className":94},[],[96],{"type":52,"value":97},"webflow library share",{"type":46,"tag":81,"props":99,"children":100},{},[101],{"type":52,"value":102},"User asks to validate, check, or verify their components",{"type":46,"tag":81,"props":104,"children":105},{},[106],{"type":52,"value":107},"After making significant changes to components",{"type":46,"tag":55,"props":109,"children":110},{},[111],{"type":46,"tag":71,"props":112,"children":113},{},[114],{"type":52,"value":115},"Do NOT use when:",{"type":46,"tag":77,"props":117,"children":118},{},[119,124,129],{"type":46,"tag":81,"props":120,"children":121},{},[122],{"type":52,"value":123},"Deployment already failed (use troubleshoot-deploy instead)",{"type":46,"tag":81,"props":125,"children":126},{},[127],{"type":52,"value":128},"Just building for local development",{"type":46,"tag":81,"props":130,"children":131},{},[132],{"type":52,"value":133},"Auditing code quality (use component-audit instead)",{"type":46,"tag":61,"props":135,"children":137},{"id":136},"instructions",[138],{"type":52,"value":139},"Instructions",{"type":46,"tag":141,"props":142,"children":144},"h3",{"id":143},"phase-1-project-structure-check",[145],{"type":52,"value":146},"Phase 1: Project Structure Check",{"type":46,"tag":148,"props":149,"children":150},"ol",{},[151,223,275,318],{"type":46,"tag":81,"props":152,"children":153},{},[154,159,161],{"type":46,"tag":71,"props":155,"children":156},{},[157],{"type":52,"value":158},"Verify webflow.json exists",{"type":52,"value":160},":",{"type":46,"tag":77,"props":162,"children":163},{},[164,185,198,211],{"type":46,"tag":81,"props":165,"children":166},{},[167,169,175,177,183],{"type":52,"value":168},"Check for required fields (",{"type":46,"tag":92,"props":170,"children":172},{"className":171},[],[173],{"type":52,"value":174},"library.name",{"type":52,"value":176},", ",{"type":46,"tag":92,"props":178,"children":180},{"className":179},[],[181],{"type":52,"value":182},"library.components",{"type":52,"value":184},")",{"type":46,"tag":81,"props":186,"children":187},{},[188,190,196],{"type":52,"value":189},"Validate glob pattern matches component files — the recommended pattern is ",{"type":46,"tag":92,"props":191,"children":193},{"className":192},[],[194],{"type":52,"value":195},"\".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"",{"type":52,"value":197}," covering all supported extensions",{"type":46,"tag":81,"props":199,"children":200},{},[201,203,209],{"type":52,"value":202},"Check ",{"type":46,"tag":92,"props":204,"children":206},{"className":205},[],[207],{"type":52,"value":208},"globals",{"type":52,"value":210}," path if specified — file must exist and be importable",{"type":46,"tag":81,"props":212,"children":213},{},[214,215,221],{"type":52,"value":202},{"type":46,"tag":92,"props":216,"children":218},{"className":217},[],[219],{"type":52,"value":220},"bundleConfig",{"type":52,"value":222}," path if specified — file must exist",{"type":46,"tag":81,"props":224,"children":225},{},[226,231,232],{"type":46,"tag":71,"props":227,"children":228},{},[229],{"type":52,"value":230},"Check dependencies",{"type":52,"value":160},{"type":46,"tag":77,"props":233,"children":234},{},[235,248,259,270],{"type":46,"tag":81,"props":236,"children":237},{},[238,240,246],{"type":52,"value":239},"Verify ",{"type":46,"tag":92,"props":241,"children":243},{"className":242},[],[244],{"type":52,"value":245},"@webflow\u002Fwebflow-cli",{"type":52,"value":247}," installed",{"type":46,"tag":81,"props":249,"children":250},{},[251,252,258],{"type":52,"value":239},{"type":46,"tag":92,"props":253,"children":255},{"className":254},[],[256],{"type":52,"value":257},"@webflow\u002Fdata-types",{"type":52,"value":247},{"type":46,"tag":81,"props":260,"children":261},{},[262,263,269],{"type":52,"value":239},{"type":46,"tag":92,"props":264,"children":266},{"className":265},[],[267],{"type":52,"value":268},"@webflow\u002Freact",{"type":52,"value":247},{"type":46,"tag":81,"props":271,"children":272},{},[273],{"type":52,"value":274},"Check for version compatibility (check installed versions, don't assume specific versions)",{"type":46,"tag":81,"props":276,"children":277},{},[278,283,284],{"type":46,"tag":71,"props":279,"children":280},{},[281],{"type":52,"value":282},"Verify component files",{"type":52,"value":160},{"type":46,"tag":77,"props":285,"children":286},{},[287,308,313],{"type":46,"tag":81,"props":288,"children":289},{},[290,292,298,300,306],{"type":52,"value":291},"Find all ",{"type":46,"tag":92,"props":293,"children":295},{"className":294},[],[296],{"type":52,"value":297},".webflow.tsx",{"type":52,"value":299}," \u002F ",{"type":46,"tag":92,"props":301,"children":303},{"className":302},[],[304],{"type":52,"value":305},".webflow.ts",{"type":52,"value":307}," files matching the glob pattern",{"type":46,"tag":81,"props":309,"children":310},{},[311],{"type":52,"value":312},"Ensure matching React components exist",{"type":46,"tag":81,"props":314,"children":315},{},[316],{"type":52,"value":317},"Check for orphaned definition files",{"type":46,"tag":81,"props":319,"children":320},{},[321,333,334],{"type":46,"tag":71,"props":322,"children":323},{},[324,326,331],{"type":52,"value":325},"Validate imports in ",{"type":46,"tag":92,"props":327,"children":329},{"className":328},[],[330],{"type":52,"value":297},{"type":52,"value":332}," files",{"type":52,"value":160},{"type":46,"tag":77,"props":335,"children":336},{},[337,355,373],{"type":46,"tag":81,"props":338,"children":339},{},[340,342,348,350],{"type":52,"value":341},"Must import ",{"type":46,"tag":92,"props":343,"children":345},{"className":344},[],[346],{"type":52,"value":347},"declareComponent",{"type":52,"value":349}," from ",{"type":46,"tag":92,"props":351,"children":353},{"className":352},[],[354],{"type":52,"value":268},{"type":46,"tag":81,"props":356,"children":357},{},[358,359,365,366,371],{"type":52,"value":341},{"type":46,"tag":92,"props":360,"children":362},{"className":361},[],[363],{"type":52,"value":364},"props",{"type":52,"value":349},{"type":46,"tag":92,"props":367,"children":369},{"className":368},[],[370],{"type":52,"value":257},{"type":52,"value":372}," (if props are defined)",{"type":46,"tag":81,"props":374,"children":375},{},[376],{"type":52,"value":377},"Must import the actual React component being declared",{"type":46,"tag":141,"props":379,"children":381},{"id":380},"phase-2-component-analysis",[382],{"type":52,"value":383},"Phase 2: Component Analysis",{"type":46,"tag":148,"props":385,"children":387},{"start":386},5,[388,575,639,732,801],{"type":46,"tag":81,"props":389,"children":390},{},[391,396,397],{"type":46,"tag":71,"props":392,"children":393},{},[394],{"type":52,"value":395},"For each component, check",{"type":52,"value":160},{"type":46,"tag":77,"props":398,"children":399},{},[400,410,421,441],{"type":46,"tag":81,"props":401,"children":402},{},[403,408],{"type":46,"tag":92,"props":404,"children":406},{"className":405},[],[407],{"type":52,"value":347},{"type":52,"value":409}," is called with the component and a config object",{"type":46,"tag":81,"props":411,"children":412},{},[413,419],{"type":46,"tag":92,"props":414,"children":416},{"className":415},[],[417],{"type":52,"value":418},"name",{"type":52,"value":420}," is provided in the config",{"type":46,"tag":81,"props":422,"children":423},{},[424,426,431,433,439],{"type":52,"value":425},"All props have ",{"type":46,"tag":92,"props":427,"children":429},{"className":428},[],[430],{"type":52,"value":418},{"type":52,"value":432}," properties and appropriate ",{"type":46,"tag":92,"props":434,"children":436},{"className":435},[],[437],{"type":52,"value":438},"defaultValue",{"type":52,"value":440}," where applicable",{"type":46,"tag":81,"props":442,"children":443},{},[444,446],{"type":52,"value":445},"Prop types are valid — the 11 supported types are:\n",{"type":46,"tag":77,"props":447,"children":448},{},[449,459,469,479,497,507,517,527,545,555,565],{"type":46,"tag":81,"props":450,"children":451},{},[452,457],{"type":46,"tag":71,"props":453,"children":454},{},[455],{"type":52,"value":456},"Text",{"type":52,"value":458}," (alias: String) — single line text input",{"type":46,"tag":81,"props":460,"children":461},{},[462,467],{"type":46,"tag":71,"props":463,"children":464},{},[465],{"type":52,"value":466},"RichText",{"type":52,"value":468}," — multi-line text with formatting",{"type":46,"tag":81,"props":470,"children":471},{},[472,477],{"type":46,"tag":71,"props":473,"children":474},{},[475],{"type":52,"value":476},"TextNode",{"type":52,"value":478}," — single\u002Fmulti-line text editable on canvas",{"type":46,"tag":81,"props":480,"children":481},{},[482,487,489,495],{"type":46,"tag":71,"props":483,"children":484},{},[485],{"type":52,"value":486},"Link",{"type":52,"value":488}," — URL input (returns ",{"type":46,"tag":92,"props":490,"children":492},{"className":491},[],[493],{"type":52,"value":494},"{ href, target, preload }",{"type":52,"value":496}," object)",{"type":46,"tag":81,"props":498,"children":499},{},[500,505],{"type":46,"tag":71,"props":501,"children":502},{},[503],{"type":52,"value":504},"Image",{"type":52,"value":506}," — image upload and selection",{"type":46,"tag":81,"props":508,"children":509},{},[510,515],{"type":46,"tag":71,"props":511,"children":512},{},[513],{"type":52,"value":514},"Number",{"type":52,"value":516}," — numeric input",{"type":46,"tag":81,"props":518,"children":519},{},[520,525],{"type":46,"tag":71,"props":521,"children":522},{},[523],{"type":52,"value":524},"Boolean",{"type":52,"value":526}," — true\u002Ffalse toggle",{"type":46,"tag":81,"props":528,"children":529},{},[530,535,537,543],{"type":46,"tag":71,"props":531,"children":532},{},[533],{"type":52,"value":534},"Variant",{"type":52,"value":536}," — dropdown with predefined options (requires ",{"type":46,"tag":92,"props":538,"children":540},{"className":539},[],[541],{"type":52,"value":542},"options",{"type":52,"value":544}," array)",{"type":46,"tag":81,"props":546,"children":547},{},[548,553],{"type":46,"tag":71,"props":549,"children":550},{},[551],{"type":52,"value":552},"Visibility",{"type":52,"value":554}," — show\u002Fhide controls",{"type":46,"tag":81,"props":556,"children":557},{},[558,563],{"type":46,"tag":71,"props":559,"children":560},{},[561],{"type":52,"value":562},"Slot",{"type":52,"value":564}," — content areas for child components",{"type":46,"tag":81,"props":566,"children":567},{},[568,573],{"type":46,"tag":71,"props":569,"children":570},{},[571],{"type":52,"value":572},"ID",{"type":52,"value":574}," — HTML element ID",{"type":46,"tag":81,"props":576,"children":577},{},[578,583,584],{"type":46,"tag":71,"props":579,"children":580},{},[581],{"type":52,"value":582},"Validate component options",{"type":52,"value":160},{"type":46,"tag":77,"props":585,"children":586},{},[587],{"type":46,"tag":81,"props":588,"children":589},{},[590,592,597,599],{"type":52,"value":591},"If ",{"type":46,"tag":92,"props":593,"children":595},{"className":594},[],[596],{"type":52,"value":542},{"type":52,"value":598}," object is present, validate:\n",{"type":46,"tag":77,"props":600,"children":601},{},[602,621],{"type":46,"tag":81,"props":603,"children":604},{},[605,611,613,619],{"type":46,"tag":92,"props":606,"children":608},{"className":607},[],[609],{"type":52,"value":610},"applyTagSelectors",{"type":52,"value":612}," is a boolean (default: ",{"type":46,"tag":92,"props":614,"children":616},{"className":615},[],[617],{"type":52,"value":618},"false",{"type":52,"value":620},") — enables site tag selectors in Shadow DOM",{"type":46,"tag":81,"props":622,"children":623},{},[624,630,631,637],{"type":46,"tag":92,"props":625,"children":627},{"className":626},[],[628],{"type":52,"value":629},"ssr",{"type":52,"value":612},{"type":46,"tag":92,"props":632,"children":634},{"className":633},[],[635],{"type":52,"value":636},"true",{"type":52,"value":638},") — controls server-side rendering",{"type":46,"tag":81,"props":640,"children":641},{},[642,647,648],{"type":46,"tag":71,"props":643,"children":644},{},[645],{"type":52,"value":646},"Check for SSR issues",{"type":52,"value":160},{"type":46,"tag":77,"props":649,"children":650},{},[651,704,709,714,719],{"type":46,"tag":81,"props":652,"children":653},{},[654,656,662,664],{"type":52,"value":655},"Scan for browser-only API usage outside of ",{"type":46,"tag":92,"props":657,"children":659},{"className":658},[],[660],{"type":52,"value":661},"useEffect",{"type":52,"value":663}," or guarded blocks:\n",{"type":46,"tag":77,"props":665,"children":666},{},[667],{"type":46,"tag":81,"props":668,"children":669},{},[670,676,677,683,684,690,691,697,698],{"type":46,"tag":92,"props":671,"children":673},{"className":672},[],[674],{"type":52,"value":675},"window",{"type":52,"value":176},{"type":46,"tag":92,"props":678,"children":680},{"className":679},[],[681],{"type":52,"value":682},"document",{"type":52,"value":176},{"type":46,"tag":92,"props":685,"children":687},{"className":686},[],[688],{"type":52,"value":689},"localStorage",{"type":52,"value":176},{"type":46,"tag":92,"props":692,"children":694},{"className":693},[],[695],{"type":52,"value":696},"sessionStorage",{"type":52,"value":176},{"type":46,"tag":92,"props":699,"children":701},{"className":700},[],[702],{"type":52,"value":703},"navigator",{"type":46,"tag":81,"props":705,"children":706},{},[707],{"type":52,"value":708},"Flag dynamic\u002Fpersonalized content patterns (user-specific dashboards, authenticated views)",{"type":46,"tag":81,"props":710,"children":711},{},[712],{"type":52,"value":713},"Flag heavy\u002Finteractive UI that doesn't benefit from SSR (charts, 3D scenes, maps, animation-heavy elements)",{"type":46,"tag":81,"props":715,"children":716},{},[717],{"type":52,"value":718},"Flag non-deterministic output (random numbers, time-based values that differ server vs client)",{"type":46,"tag":81,"props":720,"children":721},{},[722,724,730],{"type":52,"value":723},"Suggest ",{"type":46,"tag":92,"props":725,"children":727},{"className":726},[],[728],{"type":52,"value":729},"ssr: false",{"type":52,"value":731}," in options if component is purely interactive or browser-dependent",{"type":46,"tag":81,"props":733,"children":734},{},[735,740,741],{"type":46,"tag":71,"props":736,"children":737},{},[738],{"type":52,"value":739},"Check styling",{"type":52,"value":160},{"type":46,"tag":77,"props":742,"children":743},{},[744,756,761,772,783,796],{"type":46,"tag":81,"props":745,"children":746},{},[747,749,754],{"type":52,"value":748},"Verify styles are imported in ",{"type":46,"tag":92,"props":750,"children":752},{"className":751},[],[753],{"type":52,"value":297},{"type":52,"value":755}," or via globals file",{"type":46,"tag":81,"props":757,"children":758},{},[759],{"type":52,"value":760},"Check for site class usage — site classes do NOT work in Shadow DOM",{"type":46,"tag":81,"props":762,"children":763},{},[764,766],{"type":52,"value":765},"Site variables DO work: ",{"type":46,"tag":92,"props":767,"children":769},{"className":768},[],[770],{"type":52,"value":771},"var(--variable-name, fallback)",{"type":46,"tag":81,"props":773,"children":774},{},[775,777],{"type":52,"value":776},"Inherited CSS properties DO work: ",{"type":46,"tag":92,"props":778,"children":780},{"className":779},[],[781],{"type":52,"value":782},"font-family: inherit",{"type":46,"tag":81,"props":784,"children":785},{},[786,788,794],{"type":52,"value":787},"Tag selectors work IF ",{"type":46,"tag":92,"props":789,"children":791},{"className":790},[],[792],{"type":52,"value":793},"applyTagSelectors: true",{"type":52,"value":795}," is set in component options",{"type":46,"tag":81,"props":797,"children":798},{},[799],{"type":52,"value":800},"Validate CSS-in-JS setup if used (see CSS-in-JS detection below)",{"type":46,"tag":81,"props":802,"children":803},{},[804,809,810],{"type":46,"tag":71,"props":805,"children":806},{},[807],{"type":52,"value":808},"Check for Shadow DOM + React Context issues",{"type":52,"value":160},{"type":46,"tag":77,"props":811,"children":812},{},[813],{"type":46,"tag":81,"props":814,"children":815},{},[816,818,824,826,832,834],{"type":52,"value":817},"If a component uses slots (",{"type":46,"tag":92,"props":819,"children":821},{"className":820},[],[822],{"type":52,"value":823},"props.Slot",{"type":52,"value":825},") AND imports\u002Fuses ",{"type":46,"tag":92,"props":827,"children":829},{"className":828},[],[830],{"type":52,"value":831},"useContext",{"type":52,"value":833}," or a Context Provider:\n",{"type":46,"tag":77,"props":835,"children":836},{},[837,842],{"type":46,"tag":81,"props":838,"children":839},{},[840],{"type":52,"value":841},"Warn that parent and child components in slots cannot share React Context — each child renders in its own Shadow DOM with a separate React root",{"type":46,"tag":81,"props":843,"children":844},{},[845],{"type":52,"value":846},"Suggest alternatives: Nano Stores, custom events, URL parameters, or browser storage",{"type":46,"tag":141,"props":848,"children":850},{"id":849},"phase-3-build-test",[851],{"type":52,"value":852},"Phase 3: Build Test",{"type":46,"tag":148,"props":854,"children":856},{"start":855},10,[857,884,913],{"type":46,"tag":81,"props":858,"children":859},{},[860,865,866],{"type":46,"tag":71,"props":861,"children":862},{},[863],{"type":52,"value":864},"Run TypeScript\u002Fbuild check",{"type":52,"value":160},{"type":46,"tag":77,"props":867,"children":868},{},[869,874,879],{"type":46,"tag":81,"props":870,"children":871},{},[872],{"type":52,"value":873},"Check for TypeScript compilation errors",{"type":46,"tag":81,"props":875,"children":876},{},[877],{"type":52,"value":878},"Verify all imports resolve correctly",{"type":46,"tag":81,"props":880,"children":881},{},[882],{"type":52,"value":883},"Identify any build-time issues",{"type":46,"tag":81,"props":885,"children":886},{},[887,892,893],{"type":46,"tag":71,"props":888,"children":889},{},[890],{"type":52,"value":891},"Check bundle size",{"type":52,"value":160},{"type":46,"tag":77,"props":894,"children":895},{},[896,908],{"type":46,"tag":81,"props":897,"children":898},{},[899,901,906],{"type":52,"value":900},"If a build output exists, verify total bundle size is under ",{"type":46,"tag":71,"props":902,"children":903},{},[904],{"type":52,"value":905},"50MB",{"type":52,"value":907}," (maximum bundle limit)",{"type":46,"tag":81,"props":909,"children":910},{},[911],{"type":52,"value":912},"If over limit, flag as error and suggest optimization",{"type":46,"tag":81,"props":914,"children":915},{},[916,921,923],{"type":46,"tag":71,"props":917,"children":918},{},[919],{"type":52,"value":920},"Run local bundle test",{"type":52,"value":922}," (optional, suggest to user):",{"type":46,"tag":77,"props":924,"children":925},{},[926,939],{"type":46,"tag":81,"props":927,"children":928},{},[929,931,937],{"type":52,"value":930},"Suggest running ",{"type":46,"tag":92,"props":932,"children":934},{"className":933},[],[935],{"type":52,"value":936},"npx webflow library bundle --public-path http:\u002F\u002Flocalhost:4000\u002F",{"type":52,"value":938}," to test bundling before sharing",{"type":46,"tag":81,"props":940,"children":941},{},[942,944,950],{"type":52,"value":943},"If bundling issues occur, suggest ",{"type":46,"tag":92,"props":945,"children":947},{"className":946},[],[948],{"type":52,"value":949},"--debug-bundler",{"type":52,"value":951}," flag to inspect the final webpack config",{"type":46,"tag":141,"props":953,"children":955},{"id":954},"phase-4-detect-framework-specific-setup",[956],{"type":52,"value":957},"Phase 4: Detect Framework-Specific Setup",{"type":46,"tag":148,"props":959,"children":961},{"start":960},13,[962,1056,1133,1256],{"type":46,"tag":81,"props":963,"children":964},{},[965,970,971],{"type":46,"tag":71,"props":966,"children":967},{},[968],{"type":52,"value":969},"CSS-in-JS library detection",{"type":52,"value":160},{"type":46,"tag":77,"props":972,"children":973},{},[974,1002],{"type":46,"tag":81,"props":975,"children":976},{},[977,979,984,986,992,994,1000],{"type":52,"value":978},"If project uses ",{"type":46,"tag":71,"props":980,"children":981},{},[982],{"type":52,"value":983},"styled-components",{"type":52,"value":985},": verify ",{"type":46,"tag":92,"props":987,"children":989},{"className":988},[],[990],{"type":52,"value":991},"@webflow\u002Fstyled-components-utils",{"type":52,"value":993}," is installed and ",{"type":46,"tag":92,"props":995,"children":997},{"className":996},[],[998],{"type":52,"value":999},"styledComponentsShadowDomDecorator",{"type":52,"value":1001}," is exported from globals decorators array",{"type":46,"tag":81,"props":1003,"children":1004},{},[1005,1006,1011,1013,1018,1020,1026,1027,1033,1034,1040,1042,1048,1049,1055],{"type":52,"value":978},{"type":46,"tag":71,"props":1007,"children":1008},{},[1009],{"type":52,"value":1010},"Emotion",{"type":52,"value":1012}," or ",{"type":46,"tag":71,"props":1014,"children":1015},{},[1016],{"type":52,"value":1017},"Material UI",{"type":52,"value":1019}," (",{"type":46,"tag":92,"props":1021,"children":1023},{"className":1022},[],[1024],{"type":52,"value":1025},"@emotion\u002Fstyled",{"type":52,"value":176},{"type":46,"tag":92,"props":1028,"children":1030},{"className":1029},[],[1031],{"type":52,"value":1032},"@emotion\u002Freact",{"type":52,"value":176},{"type":46,"tag":92,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":52,"value":1039},"@mui\u002Fmaterial",{"type":52,"value":1041},"): verify ",{"type":46,"tag":92,"props":1043,"children":1045},{"className":1044},[],[1046],{"type":52,"value":1047},"@webflow\u002Femotion-utils",{"type":52,"value":993},{"type":46,"tag":92,"props":1050,"children":1052},{"className":1051},[],[1053],{"type":52,"value":1054},"emotionShadowDomDecorator",{"type":52,"value":1001},{"type":46,"tag":81,"props":1057,"children":1058},{},[1059,1064,1065],{"type":46,"tag":71,"props":1060,"children":1061},{},[1062],{"type":52,"value":1063},"Tailwind CSS detection",{"type":52,"value":160},{"type":46,"tag":77,"props":1066,"children":1067},{},[1068],{"type":46,"tag":81,"props":1069,"children":1070},{},[1071,1072,1077,1078,1084,1086],{"type":52,"value":978},{"type":46,"tag":71,"props":1073,"children":1074},{},[1075],{"type":52,"value":1076},"Tailwind CSS",{"type":52,"value":1019},{"type":46,"tag":92,"props":1079,"children":1081},{"className":1080},[],[1082],{"type":52,"value":1083},"tailwindcss",{"type":52,"value":1085}," in dependencies):\n",{"type":46,"tag":77,"props":1087,"children":1088},{},[1089,1101,1120],{"type":46,"tag":81,"props":1090,"children":1091},{},[1092,1093,1099],{"type":52,"value":239},{"type":46,"tag":92,"props":1094,"children":1096},{"className":1095},[],[1097],{"type":52,"value":1098},"@tailwindcss\u002Fpostcss",{"type":52,"value":1100}," is installed",{"type":46,"tag":81,"props":1102,"children":1103},{},[1104,1105,1111,1113,1118],{"type":52,"value":239},{"type":46,"tag":92,"props":1106,"children":1108},{"className":1107},[],[1109],{"type":52,"value":1110},"postcss.config.mjs",{"type":52,"value":1112}," exists with ",{"type":46,"tag":92,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":52,"value":1098},{"type":52,"value":1119}," plugin",{"type":46,"tag":81,"props":1121,"children":1122},{},[1123,1125,1131],{"type":52,"value":1124},"Verify Tailwind CSS is imported in globals file (e.g., ",{"type":46,"tag":92,"props":1126,"children":1128},{"className":1127},[],[1129],{"type":52,"value":1130},"@import \"tailwindcss\"",{"type":52,"value":1132}," in globals.css)",{"type":46,"tag":81,"props":1134,"children":1135},{},[1136,1141,1142],{"type":46,"tag":71,"props":1137,"children":1138},{},[1139],{"type":52,"value":1140},"Sass\u002FLess preprocessor detection",{"type":52,"value":160},{"type":46,"tag":77,"props":1143,"children":1144},{},[1145,1193,1236],{"type":46,"tag":81,"props":1146,"children":1147},{},[1148,1149,1154,1155,1161,1163,1169,1171,1176,1178,1184,1186,1191],{"type":52,"value":978},{"type":46,"tag":71,"props":1150,"children":1151},{},[1152],{"type":52,"value":1153},"Sass",{"type":52,"value":1019},{"type":46,"tag":92,"props":1156,"children":1158},{"className":1157},[],[1159],{"type":52,"value":1160},".scss",{"type":52,"value":1162}," files or ",{"type":46,"tag":92,"props":1164,"children":1166},{"className":1165},[],[1167],{"type":52,"value":1168},"sass",{"type":52,"value":1170}," in dependencies): verify ",{"type":46,"tag":92,"props":1172,"children":1174},{"className":1173},[],[1175],{"type":52,"value":1168},{"type":52,"value":1177}," and ",{"type":46,"tag":92,"props":1179,"children":1181},{"className":1180},[],[1182],{"type":52,"value":1183},"sass-loader",{"type":52,"value":1185}," are installed, and a webpack config adds the ",{"type":46,"tag":92,"props":1187,"children":1189},{"className":1188},[],[1190],{"type":52,"value":1160},{"type":52,"value":1192}," rule",{"type":46,"tag":81,"props":1194,"children":1195},{},[1196,1197,1202,1203,1209,1210,1216,1217,1222,1223,1229,1230,1235],{"type":52,"value":978},{"type":46,"tag":71,"props":1198,"children":1199},{},[1200],{"type":52,"value":1201},"Less",{"type":52,"value":1019},{"type":46,"tag":92,"props":1204,"children":1206},{"className":1205},[],[1207],{"type":52,"value":1208},".less",{"type":52,"value":1162},{"type":46,"tag":92,"props":1211,"children":1213},{"className":1212},[],[1214],{"type":52,"value":1215},"less",{"type":52,"value":1170},{"type":46,"tag":92,"props":1218,"children":1220},{"className":1219},[],[1221],{"type":52,"value":1215},{"type":52,"value":1177},{"type":46,"tag":92,"props":1224,"children":1226},{"className":1225},[],[1227],{"type":52,"value":1228},"less-loader",{"type":52,"value":1185},{"type":46,"tag":92,"props":1231,"children":1233},{"className":1232},[],[1234],{"type":52,"value":1208},{"type":52,"value":1192},{"type":46,"tag":81,"props":1237,"children":1238},{},[1239,1241,1246,1248,1254],{"type":52,"value":1240},"For either: verify ",{"type":46,"tag":92,"props":1242,"children":1244},{"className":1243},[],[1245],{"type":52,"value":220},{"type":52,"value":1247}," is set in ",{"type":46,"tag":92,"props":1249,"children":1251},{"className":1250},[],[1252],{"type":52,"value":1253},"webflow.json",{"type":52,"value":1255}," pointing to the webpack config",{"type":46,"tag":81,"props":1257,"children":1258},{},[1259,1264,1266,1271,1273],{"type":46,"tag":71,"props":1260,"children":1261},{},[1262],{"type":52,"value":1263},"Webpack custom config validation",{"type":52,"value":1265}," (if ",{"type":46,"tag":92,"props":1267,"children":1269},{"className":1268},[],[1270],{"type":52,"value":220},{"type":52,"value":1272}," is specified):",{"type":46,"tag":77,"props":1274,"children":1275},{},[1276,1281,1293,1320],{"type":46,"tag":81,"props":1277,"children":1278},{},[1279],{"type":52,"value":1280},"Verify the file exists at the specified path",{"type":46,"tag":81,"props":1282,"children":1283},{},[1284,1286,1292],{"type":52,"value":1285},"Verify it uses CommonJS exports (",{"type":46,"tag":92,"props":1287,"children":1289},{"className":1288},[],[1290],{"type":52,"value":1291},"module.exports",{"type":52,"value":184},{"type":46,"tag":81,"props":1294,"children":1295},{},[1296,1298,1304,1305,1311,1312,1318],{"type":52,"value":1297},"Warn if it attempts to override blocked properties: ",{"type":46,"tag":92,"props":1299,"children":1301},{"className":1300},[],[1302],{"type":52,"value":1303},"entry",{"type":52,"value":176},{"type":46,"tag":92,"props":1306,"children":1308},{"className":1307},[],[1309],{"type":52,"value":1310},"output",{"type":52,"value":176},{"type":46,"tag":92,"props":1313,"children":1315},{"className":1314},[],[1316],{"type":52,"value":1317},"target",{"type":52,"value":1319}," (these are silently filtered out)",{"type":46,"tag":81,"props":1321,"children":1322},{},[1323,1324,1330,1332,1338],{"type":52,"value":239},{"type":46,"tag":92,"props":1325,"children":1327},{"className":1326},[],[1328],{"type":52,"value":1329},"module.rules",{"type":52,"value":1331}," uses function syntax ",{"type":46,"tag":92,"props":1333,"children":1335},{"className":1334},[],[1336],{"type":52,"value":1337},"(currentRules) => { ... }",{"type":52,"value":1339},", not an array",{"type":46,"tag":141,"props":1341,"children":1343},{"id":1342},"phase-5-report-results",[1344],{"type":52,"value":1345},"Phase 5: Report Results",{"type":46,"tag":148,"props":1347,"children":1348},{"start":28},[1349],{"type":46,"tag":81,"props":1350,"children":1351},{},[1352,1357,1359],{"type":46,"tag":71,"props":1353,"children":1354},{},[1355],{"type":52,"value":1356},"Generate validation report",{"type":52,"value":1358},":\n",{"type":46,"tag":77,"props":1360,"children":1361},{},[1362,1367,1372,1377],{"type":46,"tag":81,"props":1363,"children":1364},{},[1365],{"type":52,"value":1366},"List all checks performed",{"type":46,"tag":81,"props":1368,"children":1369},{},[1370],{"type":52,"value":1371},"Show passed\u002Ffailed\u002Fwarning status",{"type":46,"tag":81,"props":1373,"children":1374},{},[1375],{"type":52,"value":1376},"Provide fix suggestions for failures",{"type":46,"tag":81,"props":1378,"children":1379},{},[1380],{"type":52,"value":1381},"Indicate deployment readiness",{"type":46,"tag":61,"props":1383,"children":1385},{"id":1384},"validation-checks",[1386],{"type":52,"value":1387},"Validation Checks",{"type":46,"tag":141,"props":1389,"children":1391},{"id":1390},"required-checks",[1392],{"type":52,"value":1393},"Required Checks",{"type":46,"tag":1395,"props":1396,"children":1397},"table",{},[1398,1422],{"type":46,"tag":1399,"props":1400,"children":1401},"thead",{},[1402],{"type":46,"tag":1403,"props":1404,"children":1405},"tr",{},[1406,1412,1417],{"type":46,"tag":1407,"props":1408,"children":1409},"th",{},[1410],{"type":52,"value":1411},"Check",{"type":46,"tag":1407,"props":1413,"children":1414},{},[1415],{"type":52,"value":1416},"Severity",{"type":46,"tag":1407,"props":1418,"children":1419},{},[1420],{"type":52,"value":1421},"Description",{"type":46,"tag":1423,"props":1424,"children":1425},"tbody",{},[1426,1445,1477,1494,1511,1528,1545],{"type":46,"tag":1403,"props":1427,"children":1428},{},[1429,1435,1440],{"type":46,"tag":1430,"props":1431,"children":1432},"td",{},[1433],{"type":52,"value":1434},"webflow.json exists",{"type":46,"tag":1430,"props":1436,"children":1437},{},[1438],{"type":52,"value":1439},"Error",{"type":46,"tag":1430,"props":1441,"children":1442},{},[1443],{"type":52,"value":1444},"Required for CLI",{"type":46,"tag":1403,"props":1446,"children":1447},{},[1448,1453,1457],{"type":46,"tag":1430,"props":1449,"children":1450},{},[1451],{"type":52,"value":1452},"Dependencies installed",{"type":46,"tag":1430,"props":1454,"children":1455},{},[1456],{"type":52,"value":1439},{"type":46,"tag":1430,"props":1458,"children":1459},{},[1460,1465,1466,1471,1472],{"type":46,"tag":92,"props":1461,"children":1463},{"className":1462},[],[1464],{"type":52,"value":245},{"type":52,"value":176},{"type":46,"tag":92,"props":1467,"children":1469},{"className":1468},[],[1470],{"type":52,"value":257},{"type":52,"value":176},{"type":46,"tag":92,"props":1473,"children":1475},{"className":1474},[],[1476],{"type":52,"value":268},{"type":46,"tag":1403,"props":1478,"children":1479},{},[1480,1485,1489],{"type":46,"tag":1430,"props":1481,"children":1482},{},[1483],{"type":52,"value":1484},"Component files exist",{"type":46,"tag":1430,"props":1486,"children":1487},{},[1488],{"type":52,"value":1439},{"type":46,"tag":1430,"props":1490,"children":1491},{},[1492],{"type":52,"value":1493},"React + definition files present",{"type":46,"tag":1403,"props":1495,"children":1496},{},[1497,1502,1506],{"type":46,"tag":1430,"props":1498,"children":1499},{},[1500],{"type":52,"value":1501},"declareComponent called",{"type":46,"tag":1430,"props":1503,"children":1504},{},[1505],{"type":52,"value":1439},{"type":46,"tag":1430,"props":1507,"children":1508},{},[1509],{"type":52,"value":1510},"Required in .webflow.tsx with correct imports",{"type":46,"tag":1403,"props":1512,"children":1513},{},[1514,1519,1523],{"type":46,"tag":1430,"props":1515,"children":1516},{},[1517],{"type":52,"value":1518},"Valid prop types",{"type":46,"tag":1430,"props":1520,"children":1521},{},[1522],{"type":52,"value":1439},{"type":46,"tag":1430,"props":1524,"children":1525},{},[1526],{"type":52,"value":1527},"Only the 11 supported types (Text\u002FString, RichText, TextNode, Link, Image, Number, Boolean, Variant, Visibility, Slot, ID)",{"type":46,"tag":1403,"props":1529,"children":1530},{},[1531,1536,1540],{"type":46,"tag":1430,"props":1532,"children":1533},{},[1534],{"type":52,"value":1535},"Build succeeds",{"type":46,"tag":1430,"props":1537,"children":1538},{},[1539],{"type":52,"value":1439},{"type":46,"tag":1430,"props":1541,"children":1542},{},[1543],{"type":52,"value":1544},"No compilation errors",{"type":46,"tag":1403,"props":1546,"children":1547},{},[1548,1553,1557],{"type":46,"tag":1430,"props":1549,"children":1550},{},[1551],{"type":52,"value":1552},"Bundle size \u003C 50MB",{"type":46,"tag":1430,"props":1554,"children":1555},{},[1556],{"type":52,"value":1439},{"type":46,"tag":1430,"props":1558,"children":1559},{},[1560],{"type":52,"value":1561},"Maximum bundle limit enforced by Webflow",{"type":46,"tag":141,"props":1563,"children":1565},{"id":1564},"warning-checks",[1566],{"type":52,"value":1567},"Warning Checks",{"type":46,"tag":1395,"props":1569,"children":1570},{},[1571,1589],{"type":46,"tag":1399,"props":1572,"children":1573},{},[1574],{"type":46,"tag":1403,"props":1575,"children":1576},{},[1577,1581,1585],{"type":46,"tag":1407,"props":1578,"children":1579},{},[1580],{"type":52,"value":1411},{"type":46,"tag":1407,"props":1582,"children":1583},{},[1584],{"type":52,"value":1416},{"type":46,"tag":1407,"props":1586,"children":1587},{},[1588],{"type":52,"value":1421},{"type":46,"tag":1423,"props":1590,"children":1591},{},[1592,1610,1627,1644,1661,1678,1695,1712,1729,1763,1780,1808,1825],{"type":46,"tag":1403,"props":1593,"children":1594},{},[1595,1600,1605],{"type":46,"tag":1430,"props":1596,"children":1597},{},[1598],{"type":52,"value":1599},"Props have defaults",{"type":46,"tag":1430,"props":1601,"children":1602},{},[1603],{"type":52,"value":1604},"Warning",{"type":46,"tag":1430,"props":1606,"children":1607},{},[1608],{"type":52,"value":1609},"Better designer experience",{"type":46,"tag":1403,"props":1611,"children":1612},{},[1613,1618,1622],{"type":46,"tag":1430,"props":1614,"children":1615},{},[1616],{"type":52,"value":1617},"SSR compatibility",{"type":46,"tag":1430,"props":1619,"children":1620},{},[1621],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1623,"children":1624},{},[1625],{"type":52,"value":1626},"Browser APIs, dynamic content, heavy UI, non-deterministic output",{"type":46,"tag":1403,"props":1628,"children":1629},{},[1630,1635,1639],{"type":46,"tag":1430,"props":1631,"children":1632},{},[1633],{"type":52,"value":1634},"Styles imported",{"type":46,"tag":1430,"props":1636,"children":1637},{},[1638],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1640,"children":1641},{},[1642],{"type":52,"value":1643},"Styles may not appear in Shadow DOM",{"type":46,"tag":1403,"props":1645,"children":1646},{},[1647,1652,1656],{"type":46,"tag":1430,"props":1648,"children":1649},{},[1650],{"type":52,"value":1651},"Site class usage",{"type":46,"tag":1430,"props":1653,"children":1654},{},[1655],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1657,"children":1658},{},[1659],{"type":52,"value":1660},"Site classes don't work in Shadow DOM — use component-specific classes",{"type":46,"tag":1403,"props":1662,"children":1663},{},[1664,1669,1673],{"type":46,"tag":1430,"props":1665,"children":1666},{},[1667],{"type":52,"value":1668},"Shadow DOM + Context",{"type":46,"tag":1430,"props":1670,"children":1671},{},[1672],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1674,"children":1675},{},[1676],{"type":52,"value":1677},"Slots prevent React Context sharing between parent\u002Fchild",{"type":46,"tag":1403,"props":1679,"children":1680},{},[1681,1686,1690],{"type":46,"tag":1430,"props":1682,"children":1683},{},[1684],{"type":52,"value":1685},"CSS-in-JS decorator",{"type":46,"tag":1430,"props":1687,"children":1688},{},[1689],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1691,"children":1692},{},[1693],{"type":52,"value":1694},"styled-components\u002FEmotion need Shadow DOM decorators",{"type":46,"tag":1403,"props":1696,"children":1697},{},[1698,1703,1707],{"type":46,"tag":1430,"props":1699,"children":1700},{},[1701],{"type":52,"value":1702},"Tailwind setup",{"type":46,"tag":1430,"props":1704,"children":1705},{},[1706],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1708,"children":1709},{},[1710],{"type":52,"value":1711},"Missing postcss config or globals import",{"type":46,"tag":1403,"props":1713,"children":1714},{},[1715,1720,1724],{"type":46,"tag":1430,"props":1716,"children":1717},{},[1718],{"type":52,"value":1719},"Sass\u002FLess setup",{"type":46,"tag":1430,"props":1721,"children":1722},{},[1723],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1725,"children":1726},{},[1727],{"type":52,"value":1728},"Missing loaders or webpack config",{"type":46,"tag":1403,"props":1730,"children":1731},{},[1732,1737,1741],{"type":46,"tag":1430,"props":1733,"children":1734},{},[1735],{"type":52,"value":1736},"Webpack blocked props",{"type":46,"tag":1430,"props":1738,"children":1739},{},[1740],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1742,"children":1743},{},[1744,1749,1750,1755,1756,1761],{"type":46,"tag":92,"props":1745,"children":1747},{"className":1746},[],[1748],{"type":52,"value":1303},{"type":52,"value":176},{"type":46,"tag":92,"props":1751,"children":1753},{"className":1752},[],[1754],{"type":52,"value":1310},{"type":52,"value":176},{"type":46,"tag":92,"props":1757,"children":1759},{"className":1758},[],[1760],{"type":52,"value":1317},{"type":52,"value":1762}," overrides are silently ignored",{"type":46,"tag":1403,"props":1764,"children":1765},{},[1766,1771,1775],{"type":46,"tag":1430,"props":1767,"children":1768},{},[1769],{"type":52,"value":1770},"Webpack rules format",{"type":46,"tag":1430,"props":1772,"children":1773},{},[1774],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1776,"children":1777},{},[1778],{"type":52,"value":1779},"Must use function syntax, not array",{"type":46,"tag":1403,"props":1781,"children":1782},{},[1783,1788,1792],{"type":46,"tag":1430,"props":1784,"children":1785},{},[1786],{"type":52,"value":1787},"Component options",{"type":46,"tag":1430,"props":1789,"children":1790},{},[1791],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1793,"children":1794},{},[1795,1800,1801,1806],{"type":46,"tag":92,"props":1796,"children":1798},{"className":1797},[],[1799],{"type":52,"value":610},{"type":52,"value":1177},{"type":46,"tag":92,"props":1802,"children":1804},{"className":1803},[],[1805],{"type":52,"value":629},{"type":52,"value":1807}," must be booleans",{"type":46,"tag":1403,"props":1809,"children":1810},{},[1811,1816,1820],{"type":46,"tag":1430,"props":1812,"children":1813},{},[1814],{"type":52,"value":1815},"Glob pattern coverage",{"type":46,"tag":1430,"props":1817,"children":1818},{},[1819],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1821,"children":1822},{},[1823],{"type":52,"value":1824},"Pattern should cover all supported extensions (.js, .jsx, .mjs, .ts, .tsx)",{"type":46,"tag":1403,"props":1826,"children":1827},{},[1828,1833,1837],{"type":46,"tag":1430,"props":1829,"children":1830},{},[1831],{"type":52,"value":1832},"bundleConfig file",{"type":46,"tag":1430,"props":1834,"children":1835},{},[1836],{"type":52,"value":1604},{"type":46,"tag":1430,"props":1838,"children":1839},{},[1840],{"type":52,"value":1841},"File must exist if specified in webflow.json",{"type":46,"tag":141,"props":1843,"children":1845},{"id":1844},"info-checks",[1846],{"type":52,"value":1847},"Info Checks",{"type":46,"tag":1395,"props":1849,"children":1850},{},[1851,1869],{"type":46,"tag":1399,"props":1852,"children":1853},{},[1854],{"type":46,"tag":1403,"props":1855,"children":1856},{},[1857,1861,1865],{"type":46,"tag":1407,"props":1858,"children":1859},{},[1860],{"type":52,"value":1411},{"type":46,"tag":1407,"props":1862,"children":1863},{},[1864],{"type":52,"value":1416},{"type":46,"tag":1407,"props":1866,"children":1867},{},[1868],{"type":52,"value":1421},{"type":46,"tag":1423,"props":1870,"children":1871},{},[1872,1890,1907,1924],{"type":46,"tag":1403,"props":1873,"children":1874},{},[1875,1880,1885],{"type":46,"tag":1430,"props":1876,"children":1877},{},[1878],{"type":52,"value":1879},"Component count",{"type":46,"tag":1430,"props":1881,"children":1882},{},[1883],{"type":52,"value":1884},"Info",{"type":46,"tag":1430,"props":1886,"children":1887},{},[1888],{"type":52,"value":1889},"Number of components",{"type":46,"tag":1403,"props":1891,"children":1892},{},[1893,1898,1902],{"type":46,"tag":1430,"props":1894,"children":1895},{},[1896],{"type":52,"value":1897},"Prop count",{"type":46,"tag":1430,"props":1899,"children":1900},{},[1901],{"type":52,"value":1884},{"type":46,"tag":1430,"props":1903,"children":1904},{},[1905],{"type":52,"value":1906},"Props per component",{"type":46,"tag":1403,"props":1908,"children":1909},{},[1910,1915,1919],{"type":46,"tag":1430,"props":1911,"children":1912},{},[1913],{"type":52,"value":1914},"Bundle size",{"type":46,"tag":1430,"props":1916,"children":1917},{},[1918],{"type":52,"value":1884},{"type":46,"tag":1430,"props":1920,"children":1921},{},[1922],{"type":52,"value":1923},"Current bundle size vs 50MB limit",{"type":46,"tag":1403,"props":1925,"children":1926},{},[1927,1932,1936],{"type":46,"tag":1430,"props":1928,"children":1929},{},[1930],{"type":52,"value":1931},"Frameworks detected",{"type":46,"tag":1430,"props":1933,"children":1934},{},[1935],{"type":52,"value":1884},{"type":46,"tag":1430,"props":1937,"children":1938},{},[1939],{"type":52,"value":1940},"CSS-in-JS, Tailwind, Sass\u002FLess usage",{"type":46,"tag":61,"props":1942,"children":1944},{"id":1943},"examples",[1945],{"type":52,"value":1946},"Examples",{"type":46,"tag":55,"props":1948,"children":1949},{},[1950],{"type":46,"tag":71,"props":1951,"children":1952},{},[1953],{"type":52,"value":1954},"User prompt:",{"type":46,"tag":1956,"props":1957,"children":1961},"pre",{"className":1958,"code":1960,"language":52},[1959],"language-text","Check if my components are ready to deploy\n",[1962],{"type":46,"tag":92,"props":1963,"children":1965},{"__ignoreMap":1964},"",[1966],{"type":52,"value":1960},{"type":46,"tag":55,"props":1968,"children":1969},{},[1970],{"type":46,"tag":71,"props":1971,"children":1972},{},[1973],{"type":52,"value":1974},"Response:",{"type":46,"tag":1956,"props":1976,"children":1979},{"className":1977,"code":1978,"language":52},[1959],"🔍 Build Validation: My Component Library\n\nRunning pre-deployment checks...\n\n---\n\n## Project Structure\n\n✅ webflow.json found\n✅ library.name: \"My Component Library\"\n✅ library.components: \".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"\n✅ globals: \".\u002Fsrc\u002Fglobals.ts\"\n✅ bundleConfig: not specified (using defaults)\n\n---\n\n## Dependencies\n\n✅ @webflow\u002Fwebflow-cli: installed\n✅ @webflow\u002Fdata-types: installed\n✅ @webflow\u002Freact: installed\n✅ react: installed\n✅ typescript: installed\n\n---\n\n## Frameworks Detected\n\n✅ Tailwind CSS detected\n  ✅ @tailwindcss\u002Fpostcss installed\n  ✅ postcss.config.mjs found\n  ✅ globals.css imports Tailwind\n\n---\n\n## Components Found (4)\n\n### 1. Button ✅\n- File: src\u002Fcomponents\u002FButton\u002FButton.webflow.tsx\n- Imports: ✅ declareComponent, ✅ props, ✅ Button component\n- Props: label (Text), variant (Variant), disabled (Boolean)\n- All props have defaults ✅\n- SSR compatible ✅\n- Options: applyTagSelectors: true ✅\n- Styles imported ✅\n\n### 2. Card ✅\n- File: src\u002Fcomponents\u002FCard\u002FCard.webflow.tsx\n- Imports: ✅ declareComponent, ✅ props, ✅ Card component\n- Props: title (Text), image (Image), content (RichText), link (Link)\n- All props have defaults ✅\n- SSR compatible ✅\n- Styles imported ✅\n\n### 3. Modal ⚠️\n- File: src\u002Fcomponents\u002FModal\u002FModal.webflow.tsx\n- Imports: ✅ declareComponent, ✅ props, ✅ Modal component\n- Props: title (Text), isOpen (Boolean), content (Slot)\n- All props have defaults ✅\n- ⚠️ SSR Issue: Uses `document.body` in render\n  → Suggestion: Add `ssr: false` to options or wrap in useEffect\n- Styles imported ✅\n\n### 4. CartIcon ⚠️\n- File: src\u002Fcomponents\u002FCartIcon\u002FCartIcon.webflow.tsx\n- Imports: ✅ declareComponent, ✅ CartIcon component\n- Props: none\n- ⚠️ Missing props - component has no editable properties\n  → Suggestion: Consider adding props for designer customization\n- ⚠️ Uses localStorage without SSR guard\n  → Suggestion: Wrap in useEffect or useState initializer\n- Styles imported ✅\n\n---\n\n## Build Test\n\n✅ Build completed successfully\n✅ No TypeScript errors\n✅ No webpack errors\n✅ Bundle size: 2.3MB \u002F 50MB limit\n\n---\n\n## Summary\n\n| Category | Status |\n|----------|--------|\n| Project Structure | ✅ Pass |\n| Dependencies | ✅ Pass |\n| Frameworks | ✅ Pass |\n| Components | ⚠️ 2 warnings |\n| Build | ✅ Pass |\n\n---\n\n## Ready to Deploy: ⚠️ WITH WARNINGS\n\nYou can deploy, but consider fixing these issues:\n\n1. **Modal SSR Issue**\n   Add to Modal.webflow.tsx:\n   ```typescript\n   options: {\n     ssr: false\n   }\n",[1980],{"type":46,"tag":92,"props":1981,"children":1982},{"__ignoreMap":1964},[1983],{"type":52,"value":1978},{"type":46,"tag":148,"props":1985,"children":1987},{"start":1986},2,[1988],{"type":46,"tag":81,"props":1989,"children":1990},{},[1991,1996,1998],{"type":46,"tag":71,"props":1992,"children":1993},{},[1994],{"type":52,"value":1995},"CartIcon localStorage Usage",{"type":52,"value":1997},"\nUpdate CartIcon.tsx:\n",{"type":46,"tag":1956,"props":1999,"children":2003},{"className":2000,"code":2001,"language":2002,"meta":1964,"style":1964},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const [count, setCount] = useState(() => {\n  if (typeof window === \"undefined\") return 0;\n  return parseInt(localStorage.getItem(\"cartCount\") || \"0\");\n});\n","typescript",[2004],{"type":46,"tag":92,"props":2005,"children":2006},{"__ignoreMap":1964},[2007,2077,2143,2222],{"type":46,"tag":2008,"props":2009,"children":2012},"span",{"class":2010,"line":2011},"line",1,[2013,2019,2025,2031,2036,2041,2046,2051,2057,2062,2067,2072],{"type":46,"tag":2008,"props":2014,"children":2016},{"style":2015},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[2017],{"type":52,"value":2018},"const",{"type":46,"tag":2008,"props":2020,"children":2022},{"style":2021},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[2023],{"type":52,"value":2024}," [",{"type":46,"tag":2008,"props":2026,"children":2028},{"style":2027},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[2029],{"type":52,"value":2030},"count",{"type":46,"tag":2008,"props":2032,"children":2033},{"style":2021},[2034],{"type":52,"value":2035},",",{"type":46,"tag":2008,"props":2037,"children":2038},{"style":2027},[2039],{"type":52,"value":2040}," setCount",{"type":46,"tag":2008,"props":2042,"children":2043},{"style":2021},[2044],{"type":52,"value":2045},"]",{"type":46,"tag":2008,"props":2047,"children":2048},{"style":2021},[2049],{"type":52,"value":2050}," =",{"type":46,"tag":2008,"props":2052,"children":2054},{"style":2053},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[2055],{"type":52,"value":2056}," useState",{"type":46,"tag":2008,"props":2058,"children":2059},{"style":2027},[2060],{"type":52,"value":2061},"(",{"type":46,"tag":2008,"props":2063,"children":2064},{"style":2021},[2065],{"type":52,"value":2066},"()",{"type":46,"tag":2008,"props":2068,"children":2069},{"style":2015},[2070],{"type":52,"value":2071}," =>",{"type":46,"tag":2008,"props":2073,"children":2074},{"style":2021},[2075],{"type":52,"value":2076}," {\n",{"type":46,"tag":2008,"props":2078,"children":2079},{"class":2010,"line":1986},[2080,2086,2091,2096,2101,2106,2111,2117,2122,2127,2132,2138],{"type":46,"tag":2008,"props":2081,"children":2083},{"style":2082},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[2084],{"type":52,"value":2085},"  if",{"type":46,"tag":2008,"props":2087,"children":2089},{"style":2088},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[2090],{"type":52,"value":1019},{"type":46,"tag":2008,"props":2092,"children":2093},{"style":2021},[2094],{"type":52,"value":2095},"typeof",{"type":46,"tag":2008,"props":2097,"children":2098},{"style":2027},[2099],{"type":52,"value":2100}," window",{"type":46,"tag":2008,"props":2102,"children":2103},{"style":2021},[2104],{"type":52,"value":2105}," ===",{"type":46,"tag":2008,"props":2107,"children":2108},{"style":2021},[2109],{"type":52,"value":2110}," \"",{"type":46,"tag":2008,"props":2112,"children":2114},{"style":2113},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[2115],{"type":52,"value":2116},"undefined",{"type":46,"tag":2008,"props":2118,"children":2119},{"style":2021},[2120],{"type":52,"value":2121},"\"",{"type":46,"tag":2008,"props":2123,"children":2124},{"style":2088},[2125],{"type":52,"value":2126},") ",{"type":46,"tag":2008,"props":2128,"children":2129},{"style":2082},[2130],{"type":52,"value":2131},"return",{"type":46,"tag":2008,"props":2133,"children":2135},{"style":2134},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2136],{"type":52,"value":2137}," 0",{"type":46,"tag":2008,"props":2139,"children":2140},{"style":2021},[2141],{"type":52,"value":2142},";\n",{"type":46,"tag":2008,"props":2144,"children":2146},{"class":2010,"line":2145},3,[2147,2152,2157,2161,2165,2170,2175,2179,2183,2188,2192,2196,2201,2205,2210,2214,2218],{"type":46,"tag":2008,"props":2148,"children":2149},{"style":2082},[2150],{"type":52,"value":2151},"  return",{"type":46,"tag":2008,"props":2153,"children":2154},{"style":2053},[2155],{"type":52,"value":2156}," parseInt",{"type":46,"tag":2008,"props":2158,"children":2159},{"style":2088},[2160],{"type":52,"value":2061},{"type":46,"tag":2008,"props":2162,"children":2163},{"style":2027},[2164],{"type":52,"value":689},{"type":46,"tag":2008,"props":2166,"children":2167},{"style":2021},[2168],{"type":52,"value":2169},".",{"type":46,"tag":2008,"props":2171,"children":2172},{"style":2053},[2173],{"type":52,"value":2174},"getItem",{"type":46,"tag":2008,"props":2176,"children":2177},{"style":2088},[2178],{"type":52,"value":2061},{"type":46,"tag":2008,"props":2180,"children":2181},{"style":2021},[2182],{"type":52,"value":2121},{"type":46,"tag":2008,"props":2184,"children":2185},{"style":2113},[2186],{"type":52,"value":2187},"cartCount",{"type":46,"tag":2008,"props":2189,"children":2190},{"style":2021},[2191],{"type":52,"value":2121},{"type":46,"tag":2008,"props":2193,"children":2194},{"style":2088},[2195],{"type":52,"value":2126},{"type":46,"tag":2008,"props":2197,"children":2198},{"style":2021},[2199],{"type":52,"value":2200},"||",{"type":46,"tag":2008,"props":2202,"children":2203},{"style":2021},[2204],{"type":52,"value":2110},{"type":46,"tag":2008,"props":2206,"children":2207},{"style":2113},[2208],{"type":52,"value":2209},"0",{"type":46,"tag":2008,"props":2211,"children":2212},{"style":2021},[2213],{"type":52,"value":2121},{"type":46,"tag":2008,"props":2215,"children":2216},{"style":2088},[2217],{"type":52,"value":184},{"type":46,"tag":2008,"props":2219,"children":2220},{"style":2021},[2221],{"type":52,"value":2142},{"type":46,"tag":2008,"props":2223,"children":2225},{"class":2010,"line":2224},4,[2226,2231,2235],{"type":46,"tag":2008,"props":2227,"children":2228},{"style":2021},[2229],{"type":52,"value":2230},"}",{"type":46,"tag":2008,"props":2232,"children":2233},{"style":2027},[2234],{"type":52,"value":184},{"type":46,"tag":2008,"props":2236,"children":2237},{"style":2021},[2238],{"type":52,"value":2142},{"type":46,"tag":2240,"props":2241,"children":2242},"hr",{},[],{"type":46,"tag":55,"props":2244,"children":2245},{},[2246,2248,2254,2256],{"type":52,"value":2247},"💡 To deploy: ",{"type":46,"tag":92,"props":2249,"children":2251},{"className":2250},[],[2252],{"type":52,"value":2253},"npx webflow library share",{"type":52,"value":2255},"\n💡 To test locally first: ",{"type":46,"tag":92,"props":2257,"children":2259},{"className":2258},[],[2260],{"type":52,"value":936},{"type":46,"tag":1956,"props":2262,"children":2265},{"className":2263,"code":2264,"language":52},[1959],"\n---\n\n**Example: Build Failure**\n\n",[2266],{"type":46,"tag":92,"props":2267,"children":2268},{"__ignoreMap":1964},[2269],{"type":52,"value":2264},{"type":46,"tag":55,"props":2271,"children":2272},{},[2273],{"type":52,"value":2274},"🔍 Build Validation: My Component Library",{"type":46,"tag":55,"props":2276,"children":2277},{},[2278],{"type":52,"value":2279},"Running pre-deployment checks...",{"type":46,"tag":2240,"props":2281,"children":2282},{},[],{"type":46,"tag":61,"props":2284,"children":2286},{"id":2285},"project-structure",[2287],{"type":52,"value":2288},"Project Structure",{"type":46,"tag":55,"props":2290,"children":2291},{},[2292,2294,2299],{"type":52,"value":2293},"✅ webflow.json found\n⚠️ library.components uses narrow glob: \".\u002Fsrc\u002F",{"type":46,"tag":71,"props":2295,"children":2296},{},[2297],{"type":52,"value":2298},"\u002F*.webflow.tsx\"\n→ Recommendation: Use \".\u002Fsrc\u002F",{"type":52,"value":2300},"\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\" to cover all supported extensions",{"type":46,"tag":2240,"props":2302,"children":2303},{},[],{"type":46,"tag":61,"props":2305,"children":2307},{"id":2306},"dependencies",[2308],{"type":52,"value":2309},"Dependencies",{"type":46,"tag":55,"props":2311,"children":2312},{},[2313],{"type":52,"value":2314},"❌ Missing: @webflow\u002Freact\nFix: npm install --save-dev @webflow\u002Freact",{"type":46,"tag":2240,"props":2316,"children":2317},{},[],{"type":46,"tag":61,"props":2319,"children":2321},{"id":2320},"build-test",[2322],{"type":52,"value":2323},"Build Test",{"type":46,"tag":55,"props":2325,"children":2326},{},[2327],{"type":52,"value":2328},"❌ Build Failed",{"type":46,"tag":55,"props":2330,"children":2331},{},[2332],{"type":52,"value":2333},"Error in src\u002Fcomponents\u002FButton\u002FButton.webflow.tsx:",{"type":46,"tag":1956,"props":2335,"children":2338},{"className":2336,"code":2337,"language":52},[1959],"Module not found: Error: Can't resolve '@webflow\u002Freact'\n",[2339],{"type":46,"tag":92,"props":2340,"children":2341},{"__ignoreMap":1964},[2342],{"type":52,"value":2337},{"type":46,"tag":2240,"props":2344,"children":2345},{},[],{"type":46,"tag":61,"props":2347,"children":2349},{"id":2348},"summary",[2350],{"type":52,"value":2351},"Summary",{"type":46,"tag":1395,"props":2353,"children":2354},{},[2355,2371],{"type":46,"tag":1399,"props":2356,"children":2357},{},[2358],{"type":46,"tag":1403,"props":2359,"children":2360},{},[2361,2366],{"type":46,"tag":1407,"props":2362,"children":2363},{},[2364],{"type":52,"value":2365},"Category",{"type":46,"tag":1407,"props":2367,"children":2368},{},[2369],{"type":52,"value":2370},"Status",{"type":46,"tag":1423,"props":2372,"children":2373},{},[2374,2386],{"type":46,"tag":1403,"props":2375,"children":2376},{},[2377,2381],{"type":46,"tag":1430,"props":2378,"children":2379},{},[2380],{"type":52,"value":2309},{"type":46,"tag":1430,"props":2382,"children":2383},{},[2384],{"type":52,"value":2385},"❌ 1 error",{"type":46,"tag":1403,"props":2387,"children":2388},{},[2389,2394],{"type":46,"tag":1430,"props":2390,"children":2391},{},[2392],{"type":52,"value":2393},"Build",{"type":46,"tag":1430,"props":2395,"children":2396},{},[2397],{"type":52,"value":2398},"❌ Failed",{"type":46,"tag":2240,"props":2400,"children":2401},{},[],{"type":46,"tag":61,"props":2403,"children":2405},{"id":2404},"ready-to-deploy-no",[2406],{"type":52,"value":2407},"Ready to Deploy: ❌ NO",{"type":46,"tag":55,"props":2409,"children":2410},{},[2411],{"type":52,"value":2412},"Fix the following before deployment:",{"type":46,"tag":148,"props":2414,"children":2415},{},[2416,2457],{"type":46,"tag":81,"props":2417,"children":2418},{},[2419,2424],{"type":46,"tag":71,"props":2420,"children":2421},{},[2422],{"type":52,"value":2423},"Install missing dependency",{"type":46,"tag":1956,"props":2425,"children":2429},{"className":2426,"code":2427,"language":2428,"meta":1964,"style":1964},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install --save-dev @webflow\u002Freact\n","bash",[2430],{"type":46,"tag":92,"props":2431,"children":2432},{"__ignoreMap":1964},[2433],{"type":46,"tag":2008,"props":2434,"children":2435},{"class":2010,"line":2011},[2436,2442,2447,2452],{"type":46,"tag":2008,"props":2437,"children":2439},{"style":2438},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[2440],{"type":52,"value":2441},"npm",{"type":46,"tag":2008,"props":2443,"children":2444},{"style":2113},[2445],{"type":52,"value":2446}," install",{"type":46,"tag":2008,"props":2448,"children":2449},{"style":2113},[2450],{"type":52,"value":2451}," --save-dev",{"type":46,"tag":2008,"props":2453,"children":2454},{"style":2113},[2455],{"type":52,"value":2456}," @webflow\u002Freact\n",{"type":46,"tag":81,"props":2458,"children":2459},{},[2460,2465],{"type":46,"tag":71,"props":2461,"children":2462},{},[2463],{"type":52,"value":2464},"Re-run validation",{"type":52,"value":2466},"\nAfter installing, run this check again.",{"type":46,"tag":1956,"props":2468,"children":2471},{"className":2469,"code":2470,"language":52},[1959],"\n---\n\n**Example: CSS-in-JS Missing Decorator**\n\n",[2472],{"type":46,"tag":92,"props":2473,"children":2474},{"__ignoreMap":1964},[2475],{"type":52,"value":2470},{"type":46,"tag":55,"props":2477,"children":2478},{},[2479],{"type":52,"value":2274},{"type":46,"tag":2240,"props":2481,"children":2482},{},[],{"type":46,"tag":61,"props":2484,"children":2486},{"id":2485},"frameworks-detected",[2487],{"type":52,"value":2488},"Frameworks Detected",{"type":46,"tag":55,"props":2490,"children":2491},{},[2492,2494,2500,2502],{"type":52,"value":2493},"⚠️ styled-components detected but Shadow DOM decorator not configured\n→ Install: npm install @webflow\u002Fstyled-components-utils\n→ Add to globals.ts:\n",{"type":46,"tag":92,"props":2495,"children":2497},{"className":2496},[],[2498],{"type":52,"value":2499},"typescript     import { styledComponentsShadowDomDecorator } from \"@webflow\u002Fstyled-components-utils\";     export const decorators = [styledComponentsShadowDomDecorator];     ",{"type":52,"value":2501},"\n→ Reference globals in webflow.json:\n",{"type":46,"tag":92,"props":2503,"children":2505},{"className":2504},[],[2506],{"type":52,"value":2507},"json     { \"library\": { \"globals\": \".\u002Fsrc\u002Fglobals.ts\" } }     ",{"type":46,"tag":55,"props":2509,"children":2510},{},[2511],{"type":52,"value":2512},"Without this, styled-components styles will be injected into document.head\ninstead of the Shadow DOM, and your components will appear unstyled.",{"type":46,"tag":1956,"props":2514,"children":2517},{"className":2515,"code":2516,"language":52},[1959],"\n---\n\n**Example: Webpack Config Issues**\n\n",[2518],{"type":46,"tag":92,"props":2519,"children":2520},{"__ignoreMap":1964},[2521],{"type":52,"value":2516},{"type":46,"tag":55,"props":2523,"children":2524},{},[2525],{"type":52,"value":2274},{"type":46,"tag":2240,"props":2527,"children":2528},{},[],{"type":46,"tag":61,"props":2530,"children":2532},{"id":2531},"webpack-configuration",[2533],{"type":52,"value":2534},"Webpack Configuration",{"type":46,"tag":55,"props":2536,"children":2537},{},[2538,2540,2545,2547,2553],{"type":52,"value":2539},"⚠️ webpack.webflow.js: ",{"type":46,"tag":92,"props":2541,"children":2543},{"className":2542},[],[2544],{"type":52,"value":1329},{"type":52,"value":2546}," uses array syntax\n→ Must use function syntax: ",{"type":46,"tag":92,"props":2548,"children":2550},{"className":2549},[],[2551],{"type":52,"value":2552},"rules: (currentRules) => { return [...]; }",{"type":52,"value":2554},"\n→ Array syntax will not work — the function receives current rules to extend",{"type":46,"tag":55,"props":2556,"children":2557},{},[2558,2560,2565,2567,2572],{"type":52,"value":2559},"⚠️ webpack.webflow.js: overrides ",{"type":46,"tag":92,"props":2561,"children":2563},{"className":2562},[],[2564],{"type":52,"value":1310},{"type":52,"value":2566}," property\n→ The ",{"type":46,"tag":92,"props":2568,"children":2570},{"className":2569},[],[2571],{"type":52,"value":1310},{"type":52,"value":2573}," property is blocked and will be silently ignored\n→ Blocked properties: entry, output, target",{"type":46,"tag":55,"props":2575,"children":2576},{},[2577,2579,2584],{"type":52,"value":2578},"💡 Use ",{"type":46,"tag":92,"props":2580,"children":2582},{"className":2581},[],[2583],{"type":52,"value":949},{"type":52,"value":2585}," flag to inspect the final merged webpack config:\nnpx webflow library bundle --debug-bundler",{"type":46,"tag":1956,"props":2587,"children":2590},{"className":2588,"code":2589,"language":52},[1959],"\n---\n\n**Example: Shadow DOM Context Warning**\n\n",[2591],{"type":46,"tag":92,"props":2592,"children":2593},{"__ignoreMap":1964},[2594],{"type":52,"value":2589},{"type":46,"tag":61,"props":2596,"children":2598},{"id":2597},"components-found-2",[2599],{"type":52,"value":2600},"Components Found (2)",{"type":46,"tag":141,"props":2602,"children":2604},{"id":2603},"_1-themeprovider-️",[2605],{"type":52,"value":2606},"1. ThemeProvider ⚠️",{"type":46,"tag":77,"props":2608,"children":2609},{},[2610,2615,2620],{"type":46,"tag":81,"props":2611,"children":2612},{},[2613],{"type":52,"value":2614},"File: src\u002Fcomponents\u002FThemeProvider\u002FThemeProvider.webflow.tsx",{"type":46,"tag":81,"props":2616,"children":2617},{},[2618],{"type":52,"value":2619},"Props: theme (Variant), children (Slot)",{"type":46,"tag":81,"props":2621,"children":2622},{},[2623,2625,2629,2631],{"type":52,"value":2624},"⚠️ Shadow DOM + React Context Issue:\nComponent uses Slot prop AND React Context (ThemeContext).\nChildren placed in slots render in separate Shadow DOM containers\nwith their own React roots — they cannot access this Context.",{"type":46,"tag":2626,"props":2627,"children":2628},"br",{},[],{"type":52,"value":2630},"Alternatives for cross-component state:",{"type":46,"tag":77,"props":2632,"children":2633},{},[2634,2639,2644,2649],{"type":46,"tag":81,"props":2635,"children":2636},{},[2637],{"type":52,"value":2638},"Nano Stores (lightweight reactive state)",{"type":46,"tag":81,"props":2640,"children":2641},{},[2642],{"type":52,"value":2643},"Custom events (window.dispatchEvent\u002FaddEventListener)",{"type":46,"tag":81,"props":2645,"children":2646},{},[2647],{"type":52,"value":2648},"URL parameters (for shareable state)",{"type":46,"tag":81,"props":2650,"children":2651},{},[2652],{"type":52,"value":2653},"Browser storage (localStorage\u002FsessionStorage)",{"type":46,"tag":1956,"props":2655,"children":2658},{"className":2656,"code":2657,"language":52},[1959],"\n---\n\n## Guidelines\n\n### Validation Order\n\nRun checks in this order for efficiency:\n\n1. Project structure (fast, catches obvious issues)\n2. Dependencies (medium, required for build)\n3. Component analysis (medium, catches code issues)\n4. Framework detection (medium, validates CSS-in-JS\u002FTailwind\u002FSass setup)\n5. Build test (slow, but required)\n\n### SSR Detection Patterns\n\nLook for these patterns that indicate SSR issues:\n\n```typescript\n\u002F\u002F Direct browser API usage (will break SSR)\nwindow.innerWidth\ndocument.getElementById\nlocalStorage.getItem\nnavigator.userAgent\nsessionStorage.getItem\n\n\u002F\u002F Dynamic\u002Fpersonalized content (may cause hydration mismatch)\n\u002F\u002F User-specific dashboards, authenticated views\n\n\u002F\u002F Heavy\u002Finteractive UI (SSR adds no value, re-renders anyway)\n\u002F\u002F Charts, 3D scenes, maps, animation-driven elements\n\n\u002F\u002F Non-deterministic output (differs server vs client)\nMath.random()\nnew Date().toLocaleString()\n\n\u002F\u002F Safe patterns (in useEffect or state initializer)\nuseEffect(() => {\n  \u002F\u002F Browser APIs here are fine\n}, []);\n\nuseState(() => {\n  if (typeof window === \"undefined\") return default;\n  return window.innerWidth;\n});\n",[2659],{"type":46,"tag":92,"props":2660,"children":2661},{"__ignoreMap":1964},[2662],{"type":52,"value":2657},{"type":46,"tag":55,"props":2664,"children":2665},{},[2666,2668,2673],{"type":52,"value":2667},"When SSR issues are found, prominently suggest the ",{"type":46,"tag":92,"props":2669,"children":2671},{"className":2670},[],[2672],{"type":52,"value":729},{"type":52,"value":2674}," option:",{"type":46,"tag":1956,"props":2676,"children":2678},{"className":2000,"code":2677,"language":2002,"meta":1964,"style":1964},"export default declareComponent(MyComponent, {\n  name: \"My Component\",\n  options: {\n    ssr: false  \u002F\u002F Disables server-side rendering\n  },\n});\n",[2679],{"type":46,"tag":92,"props":2680,"children":2681},{"__ignoreMap":1964},[2682,2713,2743,2759,2783,2791],{"type":46,"tag":2008,"props":2683,"children":2684},{"class":2010,"line":2011},[2685,2690,2695,2700,2705,2709],{"type":46,"tag":2008,"props":2686,"children":2687},{"style":2082},[2688],{"type":52,"value":2689},"export",{"type":46,"tag":2008,"props":2691,"children":2692},{"style":2082},[2693],{"type":52,"value":2694}," default",{"type":46,"tag":2008,"props":2696,"children":2697},{"style":2053},[2698],{"type":52,"value":2699}," declareComponent",{"type":46,"tag":2008,"props":2701,"children":2702},{"style":2027},[2703],{"type":52,"value":2704},"(MyComponent",{"type":46,"tag":2008,"props":2706,"children":2707},{"style":2021},[2708],{"type":52,"value":2035},{"type":46,"tag":2008,"props":2710,"children":2711},{"style":2021},[2712],{"type":52,"value":2076},{"type":46,"tag":2008,"props":2714,"children":2715},{"class":2010,"line":1986},[2716,2721,2725,2729,2734,2738],{"type":46,"tag":2008,"props":2717,"children":2718},{"style":2088},[2719],{"type":52,"value":2720},"  name",{"type":46,"tag":2008,"props":2722,"children":2723},{"style":2021},[2724],{"type":52,"value":160},{"type":46,"tag":2008,"props":2726,"children":2727},{"style":2021},[2728],{"type":52,"value":2110},{"type":46,"tag":2008,"props":2730,"children":2731},{"style":2113},[2732],{"type":52,"value":2733},"My Component",{"type":46,"tag":2008,"props":2735,"children":2736},{"style":2021},[2737],{"type":52,"value":2121},{"type":46,"tag":2008,"props":2739,"children":2740},{"style":2021},[2741],{"type":52,"value":2742},",\n",{"type":46,"tag":2008,"props":2744,"children":2745},{"class":2010,"line":2145},[2746,2751,2755],{"type":46,"tag":2008,"props":2747,"children":2748},{"style":2088},[2749],{"type":52,"value":2750},"  options",{"type":46,"tag":2008,"props":2752,"children":2753},{"style":2021},[2754],{"type":52,"value":160},{"type":46,"tag":2008,"props":2756,"children":2757},{"style":2021},[2758],{"type":52,"value":2076},{"type":46,"tag":2008,"props":2760,"children":2761},{"class":2010,"line":2224},[2762,2767,2771,2777],{"type":46,"tag":2008,"props":2763,"children":2764},{"style":2088},[2765],{"type":52,"value":2766},"    ssr",{"type":46,"tag":2008,"props":2768,"children":2769},{"style":2021},[2770],{"type":52,"value":160},{"type":46,"tag":2008,"props":2772,"children":2774},{"style":2773},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[2775],{"type":52,"value":2776}," false",{"type":46,"tag":2008,"props":2778,"children":2780},{"style":2779},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[2781],{"type":52,"value":2782},"  \u002F\u002F Disables server-side rendering\n",{"type":46,"tag":2008,"props":2784,"children":2785},{"class":2010,"line":386},[2786],{"type":46,"tag":2008,"props":2787,"children":2788},{"style":2021},[2789],{"type":52,"value":2790},"  },\n",{"type":46,"tag":2008,"props":2792,"children":2794},{"class":2010,"line":2793},6,[2795,2799,2803],{"type":46,"tag":2008,"props":2796,"children":2797},{"style":2021},[2798],{"type":52,"value":2230},{"type":46,"tag":2008,"props":2800,"children":2801},{"style":2027},[2802],{"type":52,"value":184},{"type":46,"tag":2008,"props":2804,"children":2805},{"style":2021},[2806],{"type":52,"value":2142},{"type":46,"tag":141,"props":2808,"children":2810},{"id":2809},"css-in-js-tailwind-preprocessor-detection",[2811],{"type":52,"value":2812},"CSS-in-JS \u002F Tailwind \u002F Preprocessor Detection",{"type":46,"tag":55,"props":2814,"children":2815},{},[2816],{"type":52,"value":2817},"Check project dependencies and files to detect styling frameworks:",{"type":46,"tag":55,"props":2819,"children":2820},{},[2821],{"type":46,"tag":71,"props":2822,"children":2823},{},[2824],{"type":52,"value":2825},"styled-components:",{"type":46,"tag":77,"props":2827,"children":2828},{},[2829,2841,2852],{"type":46,"tag":81,"props":2830,"children":2831},{},[2832,2834,2839],{"type":52,"value":2833},"Detect: ",{"type":46,"tag":92,"props":2835,"children":2837},{"className":2836},[],[2838],{"type":52,"value":983},{"type":52,"value":2840}," in package.json dependencies",{"type":46,"tag":81,"props":2842,"children":2843},{},[2844,2846,2851],{"type":52,"value":2845},"Require: ",{"type":46,"tag":92,"props":2847,"children":2849},{"className":2848},[],[2850],{"type":52,"value":991},{"type":52,"value":247},{"type":46,"tag":81,"props":2853,"children":2854},{},[2855,2856,2861],{"type":52,"value":2845},{"type":46,"tag":92,"props":2857,"children":2859},{"className":2858},[],[2860],{"type":52,"value":999},{"type":52,"value":2862}," in globals decorators array",{"type":46,"tag":55,"props":2864,"children":2865},{},[2866],{"type":46,"tag":71,"props":2867,"children":2868},{},[2869],{"type":52,"value":2870},"Emotion \u002F Material UI:",{"type":46,"tag":77,"props":2872,"children":2873},{},[2874,2898,2908],{"type":46,"tag":81,"props":2875,"children":2876},{},[2877,2878,2883,2884,2889,2891,2896],{"type":52,"value":2833},{"type":46,"tag":92,"props":2879,"children":2881},{"className":2880},[],[2882],{"type":52,"value":1025},{"type":52,"value":176},{"type":46,"tag":92,"props":2885,"children":2887},{"className":2886},[],[2888],{"type":52,"value":1032},{"type":52,"value":2890},", or ",{"type":46,"tag":92,"props":2892,"children":2894},{"className":2893},[],[2895],{"type":52,"value":1039},{"type":52,"value":2897}," in dependencies",{"type":46,"tag":81,"props":2899,"children":2900},{},[2901,2902,2907],{"type":52,"value":2845},{"type":46,"tag":92,"props":2903,"children":2905},{"className":2904},[],[2906],{"type":52,"value":1047},{"type":52,"value":247},{"type":46,"tag":81,"props":2909,"children":2910},{},[2911,2912,2917],{"type":52,"value":2845},{"type":46,"tag":92,"props":2913,"children":2915},{"className":2914},[],[2916],{"type":52,"value":1054},{"type":52,"value":2862},{"type":46,"tag":55,"props":2919,"children":2920},{},[2921],{"type":46,"tag":71,"props":2922,"children":2923},{},[2924],{"type":52,"value":2925},"Tailwind CSS:",{"type":46,"tag":77,"props":2927,"children":2928},{},[2929,2939,2949,2966],{"type":46,"tag":81,"props":2930,"children":2931},{},[2932,2933,2938],{"type":52,"value":2833},{"type":46,"tag":92,"props":2934,"children":2936},{"className":2935},[],[2937],{"type":52,"value":1083},{"type":52,"value":2897},{"type":46,"tag":81,"props":2940,"children":2941},{},[2942,2943,2948],{"type":52,"value":2845},{"type":46,"tag":92,"props":2944,"children":2946},{"className":2945},[],[2947],{"type":52,"value":1098},{"type":52,"value":247},{"type":46,"tag":81,"props":2950,"children":2951},{},[2952,2953,2958,2960,2965],{"type":52,"value":2845},{"type":46,"tag":92,"props":2954,"children":2956},{"className":2955},[],[2957],{"type":52,"value":1110},{"type":52,"value":2959}," with ",{"type":46,"tag":92,"props":2961,"children":2963},{"className":2962},[],[2964],{"type":52,"value":1098},{"type":52,"value":1119},{"type":46,"tag":81,"props":2967,"children":2968},{},[2969,2971,2976],{"type":52,"value":2970},"Require: Tailwind import in globals CSS (",{"type":46,"tag":92,"props":2972,"children":2974},{"className":2973},[],[2975],{"type":52,"value":1130},{"type":52,"value":184},{"type":46,"tag":55,"props":2978,"children":2979},{},[2980],{"type":46,"tag":71,"props":2981,"children":2982},{},[2983],{"type":52,"value":2984},"Sass:",{"type":46,"tag":77,"props":2986,"children":2987},{},[2988,3005,3022,3034],{"type":46,"tag":81,"props":2989,"children":2990},{},[2991,2992,2997,2999,3004],{"type":52,"value":2833},{"type":46,"tag":92,"props":2993,"children":2995},{"className":2994},[],[2996],{"type":52,"value":1160},{"type":52,"value":2998}," files in src or ",{"type":46,"tag":92,"props":3000,"children":3002},{"className":3001},[],[3003],{"type":52,"value":1168},{"type":52,"value":2897},{"type":46,"tag":81,"props":3006,"children":3007},{},[3008,3009,3014,3015,3020],{"type":52,"value":2845},{"type":46,"tag":92,"props":3010,"children":3012},{"className":3011},[],[3013],{"type":52,"value":1168},{"type":52,"value":1177},{"type":46,"tag":92,"props":3016,"children":3018},{"className":3017},[],[3019],{"type":52,"value":1183},{"type":52,"value":3021}," installed as dev dependencies",{"type":46,"tag":81,"props":3023,"children":3024},{},[3025,3027,3032],{"type":52,"value":3026},"Require: webpack config with ",{"type":46,"tag":92,"props":3028,"children":3030},{"className":3029},[],[3031],{"type":52,"value":1160},{"type":52,"value":3033}," rule using function syntax for module.rules",{"type":46,"tag":81,"props":3035,"children":3036},{},[3037,3038,3043],{"type":52,"value":2845},{"type":46,"tag":92,"props":3039,"children":3041},{"className":3040},[],[3042],{"type":52,"value":220},{"type":52,"value":3044}," set in webflow.json",{"type":46,"tag":55,"props":3046,"children":3047},{},[3048],{"type":46,"tag":71,"props":3049,"children":3050},{},[3051],{"type":52,"value":3052},"Less:",{"type":46,"tag":77,"props":3054,"children":3055},{},[3056,3072,3088,3098],{"type":46,"tag":81,"props":3057,"children":3058},{},[3059,3060,3065,3066,3071],{"type":52,"value":2833},{"type":46,"tag":92,"props":3061,"children":3063},{"className":3062},[],[3064],{"type":52,"value":1208},{"type":52,"value":2998},{"type":46,"tag":92,"props":3067,"children":3069},{"className":3068},[],[3070],{"type":52,"value":1215},{"type":52,"value":2897},{"type":46,"tag":81,"props":3073,"children":3074},{},[3075,3076,3081,3082,3087],{"type":52,"value":2845},{"type":46,"tag":92,"props":3077,"children":3079},{"className":3078},[],[3080],{"type":52,"value":1215},{"type":52,"value":1177},{"type":46,"tag":92,"props":3083,"children":3085},{"className":3084},[],[3086],{"type":52,"value":1228},{"type":52,"value":3021},{"type":46,"tag":81,"props":3089,"children":3090},{},[3091,3092,3097],{"type":52,"value":3026},{"type":46,"tag":92,"props":3093,"children":3095},{"className":3094},[],[3096],{"type":52,"value":1208},{"type":52,"value":3033},{"type":46,"tag":81,"props":3099,"children":3100},{},[3101,3102,3107],{"type":52,"value":2845},{"type":46,"tag":92,"props":3103,"children":3105},{"className":3104},[],[3106],{"type":52,"value":220},{"type":52,"value":3044},{"type":46,"tag":141,"props":3109,"children":3111},{"id":3110},"webpack-config-validation-rules",[3112],{"type":52,"value":3113},"Webpack Config Validation Rules",{"type":46,"tag":55,"props":3115,"children":3116},{},[3117,3119,3124],{"type":52,"value":3118},"When ",{"type":46,"tag":92,"props":3120,"children":3122},{"className":3121},[],[3123],{"type":52,"value":220},{"type":52,"value":3125}," is specified in webflow.json:",{"type":46,"tag":148,"props":3127,"children":3128},{},[3129,3134,3145,3167,3183],{"type":46,"tag":81,"props":3130,"children":3131},{},[3132],{"type":52,"value":3133},"File must exist at the specified path",{"type":46,"tag":81,"props":3135,"children":3136},{},[3137,3139],{"type":52,"value":3138},"Must use CommonJS: ",{"type":46,"tag":92,"props":3140,"children":3142},{"className":3141},[],[3143],{"type":52,"value":3144},"module.exports = { ... }",{"type":46,"tag":81,"props":3146,"children":3147},{},[3148,3150,3155,3156,3161,3162],{"type":52,"value":3149},"Blocked properties that are silently ignored: ",{"type":46,"tag":92,"props":3151,"children":3153},{"className":3152},[],[3154],{"type":52,"value":1303},{"type":52,"value":176},{"type":46,"tag":92,"props":3157,"children":3159},{"className":3158},[],[3160],{"type":52,"value":1310},{"type":52,"value":176},{"type":46,"tag":92,"props":3163,"children":3165},{"className":3164},[],[3166],{"type":52,"value":1317},{"type":46,"tag":81,"props":3168,"children":3169},{},[3170,3175,3177],{"type":46,"tag":92,"props":3171,"children":3173},{"className":3172},[],[3174],{"type":52,"value":1329},{"type":52,"value":3176}," must be a function, not an array: ",{"type":46,"tag":92,"props":3178,"children":3180},{"className":3179},[],[3181],{"type":52,"value":3182},"rules: (currentRules) => { ... }",{"type":46,"tag":81,"props":3184,"children":3185},{},[3186,3192,3193,3199],{"type":46,"tag":92,"props":3187,"children":3189},{"className":3188},[],[3190],{"type":52,"value":3191},"ModuleFederationPlugin",{"type":52,"value":1177},{"type":46,"tag":92,"props":3194,"children":3196},{"className":3195},[],[3197],{"type":52,"value":3198},"MiniCssExtractPlugin",{"type":52,"value":3200}," are auto-deduplicated",{"type":46,"tag":141,"props":3202,"children":3204},{"id":3203},"common-build-errors",[3205],{"type":52,"value":3206},"Common Build Errors",{"type":46,"tag":1395,"props":3208,"children":3209},{},[3210,3230],{"type":46,"tag":1399,"props":3211,"children":3212},{},[3213],{"type":46,"tag":1403,"props":3214,"children":3215},{},[3216,3220,3225],{"type":46,"tag":1407,"props":3217,"children":3218},{},[3219],{"type":52,"value":1439},{"type":46,"tag":1407,"props":3221,"children":3222},{},[3223],{"type":52,"value":3224},"Cause",{"type":46,"tag":1407,"props":3226,"children":3227},{},[3228],{"type":52,"value":3229},"Fix",{"type":46,"tag":1423,"props":3231,"children":3232},{},[3233,3255,3273,3291,3309,3327,3345],{"type":46,"tag":1403,"props":3234,"children":3235},{},[3236,3241,3246],{"type":46,"tag":1430,"props":3237,"children":3238},{},[3239],{"type":52,"value":3240},"\"Can't resolve '@webflow\u002Freact'\"",{"type":46,"tag":1430,"props":3242,"children":3243},{},[3244],{"type":52,"value":3245},"Missing dependency",{"type":46,"tag":1430,"props":3247,"children":3248},{},[3249],{"type":46,"tag":92,"props":3250,"children":3252},{"className":3251},[],[3253],{"type":52,"value":3254},"npm i -D @webflow\u002Freact",{"type":46,"tag":1403,"props":3256,"children":3257},{},[3258,3263,3268],{"type":46,"tag":1430,"props":3259,"children":3260},{},[3261],{"type":52,"value":3262},"\"Cannot find module '.\u002FComponent'\"",{"type":46,"tag":1430,"props":3264,"children":3265},{},[3266],{"type":52,"value":3267},"Wrong import path",{"type":46,"tag":1430,"props":3269,"children":3270},{},[3271],{"type":52,"value":3272},"Check relative paths",{"type":46,"tag":1403,"props":3274,"children":3275},{},[3276,3281,3286],{"type":46,"tag":1430,"props":3277,"children":3278},{},[3279],{"type":52,"value":3280},"\"Type 'X' is not assignable\"",{"type":46,"tag":1430,"props":3282,"children":3283},{},[3284],{"type":52,"value":3285},"TypeScript error",{"type":46,"tag":1430,"props":3287,"children":3288},{},[3289],{"type":52,"value":3290},"Fix type mismatch",{"type":46,"tag":1403,"props":3292,"children":3293},{},[3294,3299,3304],{"type":46,"tag":1430,"props":3295,"children":3296},{},[3297],{"type":52,"value":3298},"\"Unexpected token\"",{"type":46,"tag":1430,"props":3300,"children":3301},{},[3302],{"type":52,"value":3303},"Syntax error",{"type":46,"tag":1430,"props":3305,"children":3306},{},[3307],{"type":52,"value":3308},"Check JSX\u002FTS syntax",{"type":46,"tag":1403,"props":3310,"children":3311},{},[3312,3317,3322],{"type":46,"tag":1430,"props":3313,"children":3314},{},[3315],{"type":52,"value":3316},"\"Maximum call stack\"",{"type":46,"tag":1430,"props":3318,"children":3319},{},[3320],{"type":52,"value":3321},"Circular import",{"type":46,"tag":1430,"props":3323,"children":3324},{},[3325],{"type":52,"value":3326},"Break dependency cycle",{"type":46,"tag":1403,"props":3328,"children":3329},{},[3330,3335,3340],{"type":46,"tag":1430,"props":3331,"children":3332},{},[3333],{"type":52,"value":3334},"Bundle exceeds 50MB",{"type":46,"tag":1430,"props":3336,"children":3337},{},[3338],{"type":52,"value":3339},"Too many\u002Flarge dependencies",{"type":46,"tag":1430,"props":3341,"children":3342},{},[3343],{"type":52,"value":3344},"Tree-shake, lazy load, replace heavy libs",{"type":46,"tag":1403,"props":3346,"children":3347},{},[3348,3353,3358],{"type":46,"tag":1430,"props":3349,"children":3350},{},[3351],{"type":52,"value":3352},"Styles not appearing",{"type":46,"tag":1430,"props":3354,"children":3355},{},[3356],{"type":52,"value":3357},"Missing Shadow DOM decorator",{"type":46,"tag":1430,"props":3359,"children":3360},{},[3361],{"type":52,"value":3362},"Add CSS-in-JS decorator or import styles in .webflow.tsx",{"type":46,"tag":141,"props":3364,"children":3366},{"id":3365},"bundle-size-optimization",[3367],{"type":52,"value":3368},"Bundle Size Optimization",{"type":46,"tag":55,"props":3370,"children":3371},{},[3372],{"type":52,"value":3373},"Quick wins for reducing bundle size:",{"type":46,"tag":148,"props":3375,"children":3376},{},[3377,3387,3397,3407,3417,3427],{"type":46,"tag":81,"props":3378,"children":3379},{},[3380,3385],{"type":46,"tag":71,"props":3381,"children":3382},{},[3383],{"type":52,"value":3384},"Use production build",{"type":52,"value":3386},": Ensure minification is enabled",{"type":46,"tag":81,"props":3388,"children":3389},{},[3390,3395],{"type":46,"tag":71,"props":3391,"children":3392},{},[3393],{"type":52,"value":3394},"Tree-shake imports",{"type":52,"value":3396},": Import specific exports",{"type":46,"tag":81,"props":3398,"children":3399},{},[3400,3405],{"type":46,"tag":71,"props":3401,"children":3402},{},[3403],{"type":52,"value":3404},"Replace heavy libraries",{"type":52,"value":3406},": moment → date-fns, lodash → lodash-es",{"type":46,"tag":81,"props":3408,"children":3409},{},[3410,3415],{"type":46,"tag":71,"props":3411,"children":3412},{},[3413],{"type":52,"value":3414},"Lazy load",{"type":52,"value":3416},": Dynamic imports for heavy components",{"type":46,"tag":81,"props":3418,"children":3419},{},[3420,3425],{"type":46,"tag":71,"props":3421,"children":3422},{},[3423],{"type":52,"value":3424},"Check for duplicates",{"type":52,"value":3426},": Multiple React versions, etc.",{"type":46,"tag":81,"props":3428,"children":3429},{},[3430,3435],{"type":46,"tag":71,"props":3431,"children":3432},{},[3433],{"type":52,"value":3434},"Monitor size",{"type":52,"value":3436},": Bundle must stay under 50MB limit",{"type":46,"tag":3438,"props":3439,"children":3440},"style",{},[3441],{"type":52,"value":3442},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3444,"total":3560},[3445,3464,3481,3497,3514,3530,3546],{"slug":3446,"name":3447,"fn":3448,"description":3449,"org":3450,"tags":3451,"stars":24,"repoUrl":25,"updatedAt":3463},"webflow-clicloud","webflow-cli:cloud","deploy applications to Webflow Cloud","Initialize, build, and deploy full-stack Webflow applications to Webflow Cloud hosting. Supports site-attached deploys (linked to an existing Webflow site) and project app deploys (independent project, no existing site required). Use when creating new projects, deploying existing ones, or setting up CI\u002FCD pipelines for Webflow Cloud.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3452,3455,3458,3459,3462],{"name":3453,"slug":3454,"type":16},"CLI","cli",{"name":3456,"slug":3457,"type":16},"Cloud","cloud",{"name":21,"slug":22,"type":16},{"name":3460,"slug":3461,"type":16},"Full-stack","full-stack",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:47.514609",{"slug":3465,"name":3466,"fn":3467,"description":3468,"org":3469,"tags":3470,"stars":24,"repoUrl":25,"updatedAt":3480},"webflow-clicode-component","webflow-cli:code-component","create and deploy Webflow Code Components","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.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3471,3472,3473,3476,3479],{"name":3453,"slug":3454,"type":16},{"name":21,"slug":22,"type":16},{"name":3474,"slug":3475,"type":16},"React","react",{"name":3477,"slug":3478,"type":16},"UI Components","ui-components",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:41.421071",{"slug":3482,"name":3483,"fn":3484,"description":3485,"org":3486,"tags":3487,"stars":24,"repoUrl":25,"updatedAt":3496},"webflow-clidesigner-extension","webflow-cli:designer-extension","build Webflow Designer Extensions","Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default\u002Freact\u002Ftypescript-alt), bundles extensions for upload, and serves locally for development.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3488,3489,3492,3493,3495],{"name":3453,"slug":3454,"type":16},{"name":3490,"slug":3491,"type":16},"Plugin Development","plugin-development",{"name":3474,"slug":3475,"type":16},{"name":3494,"slug":2002,"type":16},"TypeScript",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:43.853573",{"slug":3498,"name":3499,"fn":3500,"description":3501,"org":3502,"tags":3503,"stars":24,"repoUrl":25,"updatedAt":3513},"webflow-clidevlink","webflow-cli:devlink","export Webflow components to React and Next.js","Export Webflow Designer components to React\u002FNext.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React\u002FNext.js.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3504,3505,3508,3511,3512],{"name":3453,"slug":3454,"type":16},{"name":3506,"slug":3507,"type":16},"Frontend","frontend",{"name":3509,"slug":3510,"type":16},"Next.js","next-js",{"name":3474,"slug":3475,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:40.182468",{"slug":3515,"name":3516,"fn":3517,"description":3518,"org":3519,"tags":3520,"stars":24,"repoUrl":25,"updatedAt":3529},"webflow-clitroubleshooter","webflow-cli:troubleshooter","troubleshoot Webflow CLI issues","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.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3521,3522,3525,3528],{"name":3453,"slug":3454,"type":16},{"name":3523,"slug":3524,"type":16},"Configuration","configuration",{"name":3526,"slug":3527,"type":16},"Debugging","debugging",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:48.831648",{"slug":3531,"name":3532,"fn":3533,"description":3534,"org":3535,"tags":3536,"stars":24,"repoUrl":25,"updatedAt":3545},"webflow-code-componentcomponent-audit","webflow-code-component:component-audit","audit Webflow Code Component architecture","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.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3537,3540,3543,3544],{"name":3538,"slug":3539,"type":16},"Architecture","architecture",{"name":3541,"slug":3542,"type":16},"Code Analysis","code-analysis",{"name":3474,"slug":3475,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:46.277768",{"slug":3547,"name":3548,"fn":3549,"description":3550,"org":3551,"tags":3552,"stars":24,"repoUrl":25,"updatedAt":3559},"webflow-code-componentcomponent-scaffold","webflow-code-component:component-scaffold","scaffold Webflow Code Component boilerplate","Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config\u002Fdependencies.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3553,3554,3555,3558],{"name":3506,"slug":3507,"type":16},{"name":3474,"slug":3475,"type":16},{"name":3556,"slug":3557,"type":16},"Templates","templates",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:42.638042",28,{"items":3562,"total":3560},[3563,3571,3579,3587,3595,3602,3609,3616,3630,3642,3656,3663],{"slug":3446,"name":3447,"fn":3448,"description":3449,"org":3564,"tags":3565,"stars":24,"repoUrl":25,"updatedAt":3463},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3566,3567,3568,3569,3570],{"name":3453,"slug":3454,"type":16},{"name":3456,"slug":3457,"type":16},{"name":21,"slug":22,"type":16},{"name":3460,"slug":3461,"type":16},{"name":10,"slug":9,"type":16},{"slug":3465,"name":3466,"fn":3467,"description":3468,"org":3572,"tags":3573,"stars":24,"repoUrl":25,"updatedAt":3480},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3574,3575,3576,3577,3578],{"name":3453,"slug":3454,"type":16},{"name":21,"slug":22,"type":16},{"name":3474,"slug":3475,"type":16},{"name":3477,"slug":3478,"type":16},{"name":10,"slug":9,"type":16},{"slug":3482,"name":3483,"fn":3484,"description":3485,"org":3580,"tags":3581,"stars":24,"repoUrl":25,"updatedAt":3496},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3582,3583,3584,3585,3586],{"name":3453,"slug":3454,"type":16},{"name":3490,"slug":3491,"type":16},{"name":3474,"slug":3475,"type":16},{"name":3494,"slug":2002,"type":16},{"name":10,"slug":9,"type":16},{"slug":3498,"name":3499,"fn":3500,"description":3501,"org":3588,"tags":3589,"stars":24,"repoUrl":25,"updatedAt":3513},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3590,3591,3592,3593,3594],{"name":3453,"slug":3454,"type":16},{"name":3506,"slug":3507,"type":16},{"name":3509,"slug":3510,"type":16},{"name":3474,"slug":3475,"type":16},{"name":10,"slug":9,"type":16},{"slug":3515,"name":3516,"fn":3517,"description":3518,"org":3596,"tags":3597,"stars":24,"repoUrl":25,"updatedAt":3529},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3598,3599,3600,3601],{"name":3453,"slug":3454,"type":16},{"name":3523,"slug":3524,"type":16},{"name":3526,"slug":3527,"type":16},{"name":10,"slug":9,"type":16},{"slug":3531,"name":3532,"fn":3533,"description":3534,"org":3603,"tags":3604,"stars":24,"repoUrl":25,"updatedAt":3545},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3605,3606,3607,3608],{"name":3538,"slug":3539,"type":16},{"name":3541,"slug":3542,"type":16},{"name":3474,"slug":3475,"type":16},{"name":10,"slug":9,"type":16},{"slug":3547,"name":3548,"fn":3549,"description":3550,"org":3610,"tags":3611,"stars":24,"repoUrl":25,"updatedAt":3559},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3612,3613,3614,3615],{"name":3506,"slug":3507,"type":16},{"name":3474,"slug":3475,"type":16},{"name":3556,"slug":3557,"type":16},{"name":10,"slug":9,"type":16},{"slug":3617,"name":3618,"fn":3619,"description":3620,"org":3621,"tags":3622,"stars":24,"repoUrl":25,"updatedAt":3629},"webflow-code-componentconvert-component","webflow-code-component:convert-component","convert React components to Webflow Code Components","Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3623,3626,3627,3628],{"name":3624,"slug":3625,"type":16},"Migration","migration",{"name":3474,"slug":3475,"type":16},{"name":3494,"slug":2002,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:52.523608",{"slug":3631,"name":3632,"fn":3633,"description":3634,"org":3635,"tags":3636,"stars":24,"repoUrl":25,"updatedAt":3641},"webflow-code-componentdeploy-guide","webflow-code-component:deploy-guide","deploy Webflow Code Components","Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3637,3638,3639,3640],{"name":21,"slug":22,"type":16},{"name":3506,"slug":3507,"type":16},{"name":3474,"slug":3475,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:38.947875",{"slug":3643,"name":3644,"fn":3645,"description":3646,"org":3647,"tags":3648,"stars":24,"repoUrl":25,"updatedAt":3655},"webflow-code-componentlocal-dev-setup","webflow-code-component:local-dev-setup","set up local Webflow Code Component projects","Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3649,3650,3653,3654],{"name":3523,"slug":3524,"type":16},{"name":3651,"slug":3652,"type":16},"Local Development","local-development",{"name":3474,"slug":3475,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:50.062783",{"slug":4,"name":5,"fn":6,"description":7,"org":3657,"tags":3658,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3659,3660,3661,3662],{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},{"slug":3664,"name":3665,"fn":3666,"description":3667,"org":3668,"tags":3669,"stars":24,"repoUrl":25,"updatedAt":3676},"webflow-code-componenttroubleshoot-deploy","webflow-code-component:troubleshoot-deploy","troubleshoot Webflow Code Component deployments","Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3670,3671,3672,3675],{"name":3526,"slug":3527,"type":16},{"name":21,"slug":22,"type":16},{"name":3673,"slug":3674,"type":16},"Observability","observability",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:45.057571"]