mcpField
I
implementing-new-features

implementing-new-features

github.com/streamlitDevelopment46.2k68 installsUpdated today
Repository

About implementing-new-features

A development guide for implementing Streamlit features across its backend, frontend, and protobuf layers. It outlines an implementation order with Python, Vitest, and Playwright tests, followed by autofix and verification.

Key features

  1. 01Backend, frontend, and protobuf implementation order
  2. 02Python unit test guidance
  3. 03Vitest frontend test guidance
  4. 04Playwright end-to-end test guidance
  5. 05Autofix and make check verification

Use cases

  1. 01Planning a cross-layer feature change
  2. 02Adding tests for a new Streamlit element
  3. 03Checking implementation before completion

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/streamlit/streamlit --skill implementing-new-features

After installing, type/implementing-new-featuresin Claude Code to confirm it loaded.

Details

From the project README

New Feature Implementation Guide

For understanding the underlying architecture (backend runtime, frontend rendering, WebSocket communication, element tree), see the understanding-streamlit-architecture skill.

Most features need implementation in three areas:

  • Backend: lib/streamlit/
  • Frontend: frontend/
  • Protobufs: proto/

New features should include:

  • Python unit tests in lib/tests
  • Vitest unit tests
  • E2E Playwright tests in e2e_playwright/

Order of Implementation

  1. Protobuf changes in proto/ then run make protobuf

    • New elements: add to proto/streamlit/proto/Element.proto

  2. Backend in lib/streamlit/

    • New elements: add to lib/streamlit/__init__.py

  3. Python unit tests in lib/tests

    • Run: uv run pytest lib/tests/streamlit/the_test_name.py
    • New elements: add to lib/tests/streamlit/element_mocks.py

  4. Frontend in frontend/

    • New elements: add to frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx

  5. Vitest tests in *.test.tsx

    • Run: cd frontend && yarn vitest lib/src/components/elements/NewElement/NewElement.test.tsx

  6. E2E Playwright tests in e2e_playwright/

    • Run: make run-e2e-test e2e_playwright/name_of_the_test.py

  7. Autofix formatting and linting: make autofix

  8. Verify the implementation: make check

Comments

Markdown supported