streamlit / implementing-new-features

Install for your project team

Run this command in your project directory to install the skill for your entire team:

mkdir -p .claude/skills/implementing-new-features && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/1441" && unzip -o skill.zip -d .claude/skills/implementing-new-features && rm skill.zip

New-Item -Path ".claude/skills/implementing-new-features" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/1441" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".claude/skills/implementing-new-features" -Force; Remove-Item "skill.zip"

Project Skills

This skill will be saved in .claude/skills/implementing-new-features/ and checked into git. All team members will have access to it automatically.

Important: Please verify the skill by reviewing its instructions before using it.

Install skill for Codex

Run one of these commands to install the skill depending on your needs:

Project Local ($CWD/.codex/skills)

mkdir -p .codex/skills/implementing-new-features && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/1441" && unzip -o skill.zip -d .codex/skills/implementing-new-features && rm skill.zip

New-Item -Path ".codex/skills/implementing-new-features" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/1441" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".codex/skills/implementing-new-features" -Force; Remove-Item "skill.zip"

User Global (~/.codex/skills)

mkdir -p ~/.codex/skills/implementing-new-features && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/1441" && unzip -o skill.zip -d ~/.codex/skills/implementing-new-features && rm skill.zip

New-Item -Path "$HOME/.codex/skills/implementing-new-features" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/1441" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath "$HOME/.codex/skills/implementing-new-features" -Force; Remove-Item "skill.zip"

Scope	Location	Suggested Use
REPO	`$CWD/.codex/skills`	Project directory. Teams can check in skills most relevant to a working folder here.
REPO	`$CWD/../.codex/skills`	A folder above CWD. Organizations can check in skills relevant to a shared area.
REPO	`$REPO_ROOT/.codex/skills`	Top-most root folder. Relevant to everyone using the repository.
USER	`$CODEX_HOME/skills`	Personal folder (`~/.codex/skills`). Curate skills that apply to any repository.

Install skill for GitHub Copilot

Run one of these commands to install the skill depending on your needs:

Project (.github/skills)

mkdir -p .github/skills/implementing-new-features && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/1441" && unzip -o skill.zip -d .github/skills/implementing-new-features && rm skill.zip

New-Item -Path ".github/skills/implementing-new-features" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/1441" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".github/skills/implementing-new-features" -Force; Remove-Item "skill.zip"

Personal (~/.copilot/skills)

mkdir -p ~/.copilot/skills/implementing-new-features && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/1441" && unzip -o skill.zip -d ~/.copilot/skills/implementing-new-features && rm skill.zip

New-Item -Path "$HOME/.copilot/skills/implementing-new-features" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/1441" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath "$HOME/.copilot/skills/implementing-new-features" -Force; Remove-Item "skill.zip"

Scope	Location	Suggested Use
Project	`.github/skills/`	Repository-specific skills. Checked into git for the whole team.
Personal	`~/.copilot/skills/`	Personal skills available across all your projects.

Install skill for Google Antigravity

Run one of these commands to install the skill depending on your needs:

Workspace (.agent/skills)

mkdir -p .agent/skills/implementing-new-features && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/1441" && unzip -o skill.zip -d .agent/skills/implementing-new-features && rm skill.zip

New-Item -Path ".agent/skills/implementing-new-features" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/1441" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".agent/skills/implementing-new-features" -Force; Remove-Item "skill.zip"

Global (~/.gemini/antigravity/skills)

mkdir -p ~/.gemini/antigravity/skills/implementing-new-features && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/1441" && unzip -o skill.zip -d ~/.gemini/antigravity/skills/implementing-new-features && rm skill.zip

New-Item -Path "$HOME/.gemini/antigravity/skills/implementing-new-features" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/1441" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath "$HOME/.gemini/antigravity/skills/implementing-new-features" -Force; Remove-Item "skill.zip"

Scope	Location	Suggested Use
Workspace	`.agent/skills/`	Workspace-specific skills for project workflows and conventions.
Global	`~/.gemini/antigravity/skills/`	Personal skills available across all workspaces.

Implementation guide for new Streamlit features. Use when adding new elements, widgets, or features that span backend, frontend, and protobufs.

Coding Design

0 views

0 installs

Source: https://github.com/streamlit/streamlit/tree/develop/.claude/skills/implementing-new-features

Skill Content

---
name: implementing-new-features
description: Implementation guide for new Streamlit features. Use when adding new elements, widgets, or features that span backend, frontend, and protobufs.
---

# New Feature Implementation Guide

For understanding the underlying architecture (backend runtime, frontend rendering, WebSocket communication, element tree), see the [understanding-streamlit-architecture](../understanding-streamlit-architecture/SKILL.md) 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`

streamlit / implementing-new-features

Install for your project team

Download skill

Enable skills in Claude

Upload to Claude

Install skill for Codex

Install skill for GitHub Copilot

Install skill for Google Antigravity

Skill Content