update: add webflow-code-component-skills#10
Conversation
viratatwebflow
commented
Mar 6, 2026
viratatwebflow
commented
- Introduced a new skill for building and deploying Webflow Code Components with validation workflows.
- Updated plugin.json to include the new skill in the skills array.
…onfigurations - Introduced a new skill for building and deploying Webflow Code Components with validation workflows. - Updated plugin.json to include the new skill in the skills array.
federico-fiorini
left a comment
federico-fiorini
left a comment
There was a problem hiding this comment.
I left a couple of suggestions but this looks great!
|
|
||
| | Look For | Recommendation | | ||
| |----------|----------------| | ||
| | Hardcoded text strings | Expose as `props.Text()` or `props.RichText()` | |
There was a problem hiding this comment.
RichText should probably go on the next line "Text that designers should edit on canvas". It's not a single text string but it supports markup etc and it can be edited on canvas
There was a problem hiding this comment.
Added thank you
| | Issue | Detection | Fix | | ||
| |-------|-----------|-----| | ||
| | Using site/global CSS classes | Class names like `.container`, `.btn` | Use CSS Modules or component-scoped styles | | ||
| | CSS-in-JS not configured | styled-components/Emotion without decorator | Add globals.ts with `styledComponentsShadowDomDecorator` (styled-components) or `emotionShadowDomDecorator` (Emotion/MUI) | |
There was a problem hiding this comment.
There's also another requirement to get styled-components and emotion work fine in SSR, which is to use the corresponding serve renderer in the webflow.json config
e.g.
"library": {
"renderer": {
"server": "@webflow/styled-component-utils/server"
}
}This doesn't necessarily fall under the shadow DOM compatibility but something worth calling out
There was a problem hiding this comment.
Make sense, made the changes
| **For both CSS-in-JS approaches**, update `webflow.json`: | ||
| ```json | ||
| { | ||
| "library": { |
There was a problem hiding this comment.
Maybe here add the server renderer config
"library": {
"renderer": {
"server": "@webflow/emotion-utils/server"
}
}There was a problem hiding this comment.
Just added those info
- Corrected the recommendations for exposing text properties in component audit documentation. - Added detailed SSR configuration instructions for styled-components and Emotion in the convert component documentation.
4 participants
