Toolverse
All skills
Frontend

implementing-new-features

by streamlit

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

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
streamlit
Category
Frontend
Views
23
GitHub repo

About this skill

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

How to use

  1. Zapoznaj się z architekturą Streamlit, zwłaszcza runtime'em backendu, renderowaniem frontendu i komunikacją WebSocket, aby zrozumieć, jak nowa funkcja będzie się integrować z systemem.

  2. Rozpocznij od zmian w plikach protobuf w katalogu proto/. Jeśli dodajesz nowy element, dodaj go do proto/streamlit/proto/Element.proto, a następnie uruchom make protobuf aby wygenerować niezbędne pliki.

  3. Przejdź do implementacji backendu w lib/streamlit/. Dodaj nowy element do lib/streamlit/__init__.py i utwórz testy jednostkowe w lib/tests. Uruchom testy za pomocą uv run pytest lib/tests/streamlit/nazwa_testu.py.

  4. Zaimplementuj frontend w katalogu frontend/. Dla nowych elementów dodaj je do frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx. Napisz testy Vitest w plikach *.test.tsx i uruchom je poleceniem cd frontend && yarn vitest.

  5. Dodaj testy end-to-end w e2e_playwright/ używając Playwright. Uruchom je za pomocą make run-e2e-test e2e_playwright/nazwa_testu.py.

  6. Uruchom make autofix aby automatycznie naprawić formatowanie i błędy lintingu, a następnie make verify aby potwierdzić, że cała implementacja działa poprawnie.

Related skills

landing-page-guide-v2

by bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements

Frontend
3486

keyword-research

by openclaw

Discovers high-value keywords with search intent analysis, difficulty assessment, and content opportunity mapping. Essential for starting any SEO or GEO content strategy.

Frontend
24138

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Frontend
2335

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656