---

name: component-renderer-development description: "Use for Dash component wrapper generation, built-in component packages, resources, and dash-renderer internals." disable-model-invocation: true metadata: disco-role: operating license: MIT

Dash Component and Renderer Development

Use this sub-skill when a task concerns component wrapper generation, built-in Dash component packages, resource loading, or the dash-renderer frontend and its callback pipeline.

Start here

1. Read references/component-generation.md for component metadata, generated wrappers, and dash-generate-components.
2. Read references/resources-and-react.md for _js_dist, _css_dist, resource loading, and React version notes.
3. Read references/renderer-internals.md for renderer hydration, callback queues, setProps, and clientside runtime.
4. Read references/troubleshooting.md when a build, wrapper, bundle, or React runtime issue fails.
5. Run scripts/check_component_generator_cli.py, scripts/check_update_components_cli.py, and scripts/check_renderer_cli.py for safe CLI help checks before heavier builds.

Main routes

Generate or refresh component wrappers

Use this route when a task mentions component metadata, wrapper generation, or maintaining built-in component packages such as dcc, html, or dash_table.

Inspect renderer behavior

Use this route for callback hydration, layout crawling, state paths, shared worker/WebSocket client behavior, window.dash_component_api, or React/runtime compatibility problems.

Work on resource loading and React versions

Use this route when a task mentions resource URLs, asset fingerprints, serve_locally, _js_dist, _css_dist, or React version/shim behavior.

Route elsewhere

• App-level callback and page use: app callback workflows.
• Server-side async, WebSocket, background, or MCP runtime behavior: server backends and async.
• Choosing focused tests or build/lint commands: testing and maintenance.

Validation checklist

Before marking component or renderer work complete:

• The component package can be imported from Dash and its generated wrapper class names are available.
• dash-generate-components, dash-update-components, and renderer help text are healthy before a full build is attempted.
• _js_dist/_css_dist entries use the correct resource fields and do not point at the wrong namespace or package path.
• Renderer changes are checked against the current React/runtime assumptions.
• If a build script needs Black or other formatter/tooling, the failure mode is documented and the prerequisite is installed first.