implementing-new-features
Implementation guide for new Streamlit features. Use when adding new elements, widgets, or features that span backend, frontend, and protobufs.
Works with
Agent Skills format with YAML frontmatter. Claude Code reads it as-is.
--- 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." license: "Apache-2.0" --- # 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`
More Frontend Frameworks skills
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
design-taste-frontend
leonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
