Contribute component bundles

Bundles are groups of components that belong to the same provider or capability family.

If you want to contribute custom components back to SkillFlaw, organize them as a bundle.

Add a backend bundle

Create a new bundle directory under:

_10

src/lfx/src/lfx/components/

For example:

_10

src/lfx/src/lfx/components/darth_vader/

Inside that folder, add:

• one or more Python component files
• __init__.py to export your bundle components

For a real example, inspect existing bundles in the repository.

Add the frontend icon

Create the matching icon under:

_10

src/frontend/src/icons/DarthVader/

Typical files are:

• raw SVG asset
• JSX/SVG wrapper component
• index.tsx export file

Make sure the icon component forwards props and follows the same structure as existing icons in src/frontend/src/icons/.

Register the icon lazy import

Update:

_10

src/frontend/src/icons/lazyIconImports.ts

Add a lazy import entry whose icon name matches the frontend icon component export.

Add the bundle to the frontend menu

Update the bundle list used by the visual editor so your new bundle appears under Bundles.

The registration object should define:

• display_name: the label shown in the SkillFlaw visual editor
• name: the backend bundle directory name
• icon: the registered icon name

Reference the icon in the backend component

Inside your component class, set icon to the same icon name you registered in the frontend.

Example:

_10

class DarthVaderAPIComponent(LCToolComponent):

_10

display_name = "Darth Vader Tools"

_10

description = "Use the force to run actions with your agent"

_10

name = "DarthVaderAPI"

_10

icon = "DarthVader"

Validate the bundle

After wiring the backend and frontend pieces together, rebuild and run the app, then confirm the new bundle appears in the visual editor.

For repository commands, see Makefile command reference.