component-audit

Name: component-audit
Author: webflow

106stars16forks

How to install component-audit?

webflow/webflow-skills/component-audit

$npx -y skills add webflow/webflow-skills --skill component-audit

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Component Audit
2
3	Audit existing code components for Webflow-specific architecture decisions. This skill focuses on how well components integrate with Webflow Designer, not generic React best practices.
4
5	## When to Use This Skill
6
7	Use when:
8	- User wants to improve how their components work in Webflow Designer
9	- Reviewing whether the right things are exposed as props vs hardcoded
10	- Checking if state management patterns are Webflow-compatible
11	- Looking for opportunities to make components more designer-friendly
12	- Component isn't rendering or behaving as expected in Webflow
13
14	Do NOT use when:
15	- Validating before deployment (use pre-deploy-check instead)
16	- Creating new components (use component-scaffold instead)
17	- Converting a React component (use convert-component instead)
18	- Generic code quality review (use a linter)
19
20	## Core Philosophy
21
22	This audit answers three questions:
23
24	1. Designer Control: Are the right things exposed as props for designers to customize?
25	2. Webflow Compatibility: Does the component work within Webflow's constraints (Shadow DOM, SSR, isolated React roots)?
26	3. Component Architecture: Is this the right level of granularity, or should it be split/combined?
27
28	## Instructions
29
30	### Phase 1: Discovery
31
32	1. Find all components:
33	- Locate webflow.json
34	- Find all .webflow.tsx files
35	- Read corresponding React components
36
37	2. Understand intent: Ask user what the components are for and any specific concerns
38
39	### Phase 2: Analysis
40
41	For each component, analyze these Webflow-specific areas:
42
43	#### A. Prop Exposure Analysis
44
45	Goal: Identify what designers SHOULD be able to control but currently can't.
46
47	\| Look For \| Recommendation \|
48	\|----------\|----------------\|
49	\| Hardcoded text strings \| Expose as `props.Text()` \|
50	\| Text that designers should edit on canvas \| Expose as `props.RichText()` \|
51	\| Hardcoded values from a fixed set of options \| Expose as `props.Variant({ options: [...] })` \|
52	\| Hardcoded image URLs \| Expose as `props.Image()` \|
53	\| Hardcoded link URLs \| Expose as `props.Link()` \|
54	\| Hardcoded HTML `id` attributes \| Expose as `props.Id()` \|
55	\| Conditional rendering with boolean \| Expose as `props.Boolean()` or `props.Visibility()` \|
56	\| Internal state that affects appearance \| Consider exposing initial value as prop \|
57	\| `children` not using Slot \| Convert to `props.Slot()` \|
58
59	> Aliases: `props.String` = `props.Text`, `props.Children` = `props.Slot`. Treat these as equivalent during audit.
60
61	Questions to ask:
62	- "What would a designer want to change?"
63	- "What requires a code change that shouldn't?"
64
65	#### B. State Management Architecture
66
67	Goal: Identify patterns that won't work in Webflow.
68
69	\| Anti-Pattern \| Why It Fails \| Alternative \|
70	\|--------------\|--------------\|-------------\|
71	\| React Context for cross-component state \| Each component has isolated React root \| Use nano stores, custom events, or URL params \|
72	\| Prop drilling through Slots \| Slot children are separate React apps \| Use nano stores or custom events \|
73	\| Shared state via module-level variables \| May cause SSR issues \| Use browser storage or nano stores \|
74	\| Global event listeners without cleanup \| Memory leaks, SSR issues \| Use useEffect with cleanup \|
75
76	Refactoring recommendations:
77	- If components need to communicate → suggest cross-component state pattern
78	- If using Context internally only → that's fine, document it
79	- If components are tightly coupled → suggest decomposition
80
81	#### C. Slot Opportunities
82
83	Goal: Identify hardcoded content that should be designer-controlled.
84
85	\| Current Pattern \| Better Pattern \|
86	\|-----------------\|----------------\|
87	\| Hardcoded button inside card \| Slot for actions area \|
88	\| Hardcoded icon component \| Slot or Image prop \|
89	\| Fixed header/footer structure \| Slots for header and footer \|
90	\| Hardcoded list items \| Consider if this should be multiple components \|
91
92	When NOT to use Slots:
93	- When content has specific behavioral requirements
94	- When content needs to interact with component state
95	- When the structure is truly fixed and not customizable
96
97	#### D. Shadow DOM Compatibility
98
99	Goal: Ensure styles work in isolation.
100
101	\| Issue \| Detection \| Fix \|
102	\|-------\|-----------\|-----\|
103	\| Using site/global CSS classes \| Class names like `.container`, `.btn` \| Use CSS Modules or component-scoped styles \|
104	\| CSS-in-JS not configured \| styled-components/Emotion without decorator \| Add globals.ts with `styledComponentsShadowDomDecorator` (styled-components) or `emotionShadowDomDecorator` (Emotion/MUI) \|
105	\| Missing style imports \| Styles defined but not imported in .webflow.tsx \| Add i

People who liked this also viewed

6 picks

Type

component-audit

106stars16forks

View on GitHub

How to install component-audit?

webflow/webflow-skills/component-audit

$npx -y skills add webflow/webflow-skills --skill component-audit

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Component Audit
2
3	Audit existing code components for Webflow-specific architecture decisions. This skill focuses on how well components integrate with Webflow Designer, not generic React best practices.
4
5	## When to Use This Skill
6
7	Use when:
8	- User wants to improve how their components work in Webflow Designer
9	- Reviewing whether the right things are exposed as props vs hardcoded
10	- Checking if state management patterns are Webflow-compatible
11	- Looking for opportunities to make components more designer-friendly
12	- Component isn't rendering or behaving as expected in Webflow
13
14	Do NOT use when:
15	- Validating before deployment (use pre-deploy-check instead)
16	- Creating new components (use component-scaffold instead)
17	- Converting a React component (use convert-component instead)
18	- Generic code quality review (use a linter)
19
20	## Core Philosophy
21
22	This audit answers three questions:
23
24	1. Designer Control: Are the right things exposed as props for designers to customize?
25	2. Webflow Compatibility: Does the component work within Webflow's constraints (Shadow DOM, SSR, isolated React roots)?
26	3. Component Architecture: Is this the right level of granularity, or should it be split/combined?
27
28	## Instructions
29
30	### Phase 1: Discovery
31
32	1. Find all components:
33	- Locate webflow.json
34	- Find all .webflow.tsx files
35	- Read corresponding React components
36
37	2. Understand intent: Ask user what the components are for and any specific concerns
38
39	### Phase 2: Analysis
40
41	For each component, analyze these Webflow-specific areas:
42
43	#### A. Prop Exposure Analysis
44
45	Goal: Identify what designers SHOULD be able to control but currently can't.
46
47	\| Look For \| Recommendation \|
48	\|----------\|----------------\|
49	\| Hardcoded text strings \| Expose as `props.Text()` \|
50	\| Text that designers should edit on canvas \| Expose as `props.RichText()` \|
51	\| Hardcoded values from a fixed set of options \| Expose as `props.Variant({ options: [...] })` \|
52	\| Hardcoded image URLs \| Expose as `props.Image()` \|
53	\| Hardcoded link URLs \| Expose as `props.Link()` \|
54	\| Hardcoded HTML `id` attributes \| Expose as `props.Id()` \|
55	\| Conditional rendering with boolean \| Expose as `props.Boolean()` or `props.Visibility()` \|
56	\| Internal state that affects appearance \| Consider exposing initial value as prop \|
57	\| `children` not using Slot \| Convert to `props.Slot()` \|
58
59	> Aliases: `props.String` = `props.Text`, `props.Children` = `props.Slot`. Treat these as equivalent during audit.
60
61	Questions to ask:
62	- "What would a designer want to change?"
63	- "What requires a code change that shouldn't?"
64
65	#### B. State Management Architecture
66
67	Goal: Identify patterns that won't work in Webflow.
68
69	\| Anti-Pattern \| Why It Fails \| Alternative \|
70	\|--------------\|--------------\|-------------\|
71	\| React Context for cross-component state \| Each component has isolated React root \| Use nano stores, custom events, or URL params \|
72	\| Prop drilling through Slots \| Slot children are separate React apps \| Use nano stores or custom events \|
73	\| Shared state via module-level variables \| May cause SSR issues \| Use browser storage or nano stores \|
74	\| Global event listeners without cleanup \| Memory leaks, SSR issues \| Use useEffect with cleanup \|
75
76	Refactoring recommendations:
77	- If components need to communicate → suggest cross-component state pattern
78	- If using Context internally only → that's fine, document it
79	- If components are tightly coupled → suggest decomposition
80
81	#### C. Slot Opportunities
82
83	Goal: Identify hardcoded content that should be designer-controlled.
84
85	\| Current Pattern \| Better Pattern \|
86	\|-----------------\|----------------\|
87	\| Hardcoded button inside card \| Slot for actions area \|
88	\| Hardcoded icon component \| Slot or Image prop \|
89	\| Fixed header/footer structure \| Slots for header and footer \|
90	\| Hardcoded list items \| Consider if this should be multiple components \|
91
92	When NOT to use Slots:
93	- When content has specific behavioral requirements
94	- When content needs to interact with component state
95	- When the structure is truly fixed and not customizable
96
97	#### D. Shadow DOM Compatibility
98
99	Goal: Ensure styles work in isolation.
100
101	\| Issue \| Detection \| Fix \|
102	\|-------\|-----------\|-----\|
103	\| Using site/global CSS classes \| Class names like `.container`, `.btn` \| Use CSS Modules or component-scoped styles \|
104	\| CSS-in-JS not configured \| styled-components/Emotion without decorator \| Add globals.ts with `styledComponentsShadowDomDecorator` (styled-components) or `emotionShadowDomDecorator` (Emotion/MUI) \|
105	\| Missing style imports \| Styles defined but not imported in .webflow.tsx \| Add i

People who liked this also viewed

6 picks

Type