Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
with pytest to e2e test Streamlit library. E2E tests verify the complete Streamlit system (frontend, backend, communication, state, visual appearance) from a user's perspective (black-box). They complement Python/JS
Steady4 mentions in 2 weeks
No other project uses it yet
46k12d agoReviewMountCreate a free account to mount
alwaysApply: false
---
# Protobuf
Protobuf messages are used for communication between the Streamlit backend and frontend via WebSocket connections.
## Compile Protobuf
Changes requiring compilation:
- Adding, modifying, or removing fields
Changes
Steady4 mentions in 2 weeks
No other project uses it yet
46k12d agoReviewMountCreate a free account to mount
error_id`.
## Theming and Layout
- **Theming and layout calculations must be done in the frontend, not the Python backend.**
- Do not use `get_option("theme.primaryColor")` or similar theme options
Steady4 mentions in 2 weeks
No other project uses it yet
46k12d agoReviewMountCreate a free account to mount
specific tasks in the Streamlit codebase.
These skills are for **Streamlit library development** (backend, frontend, protobufs), not for building Streamlit applications. User-facing skills that ship with the library live
Steady4 mentions in 2 weeks
No other project uses it yet
46k12d agoReviewMountCreate a free account to mount
address` returns `None` on SiS—that's a valid design choice.
## 37. Consider the Frontend-Backend Split
Some data lives in the browser (theme type, viewport size) and some
Steady4 mentions in 2 weeks
No other project uses it yet
46k12d agoReviewMountCreate a free account to mount
fine — the rule applies only to files whose sole purpose is re-exporting.
## Key Frontend Principles
- Leverage all of best practices of React 18.
- Follow the [Rules of React
Steady4 mentions in 2 weeks
No other project uses it yet
46k12d agoReviewMountCreate a free account to mount
unit tests, linting, type checking across all supported Python versions |
| `js-tests.yml` | Push/PR to `develop` | Frontend TypeScript linting, type checking, Knip unused-export and unused-dependency analysis (PR-blocking), and Vitest
Steady4 mentions in 2 weeks
No other project uses it yet
46k12d agoReviewMountCreate a free account to mount
components/auth-wizard`)
- Named exports for all components
- TypeScript: `interface` on the backend, `type` on the frontend — this is the project convention and overrides any general "prefer interfaces" guidance
- Blank line before
No other project uses it yet
40k7d agoReviewMountCreate a free account to mount
Simple agents that handle specific tasks:
- File structure: `agent/main.py` or `agent/index.js`
- Direct communication with frontend
- Good for focused use cases
### Multi-Agent (Coagents) Pattern
Complex systems with multiple cooperating agents
Steady3 mentions in 2 weeks
No other project uses it yet
39k17d agoReviewMountCreate a free account to mount
examples/) and typically follow this pattern:
- `agent/` or `agent-py/` - Backend agent implementation
- `ui/` - Frontend Next.js application
- `README.md` - Setup and usage instructions
## Development Workflow
- Examples use the local packages
Steady3 mentions in 2 weeks
No other project uses it yet
39k17d agoReviewMountCreate a free account to mount
Code workspace settings
- **[examples/shared/](mdc:examples/shared)** - Shared utilities and templates
## Common Patterns
1. **Frontend**: Next.js app with CopilotProvider and CopilotChat
2. **Backend**: Python or Node.js agent with actions and state
Steady3 mentions in 2 weeks
No other project uses it yet
39k17d agoReviewMountCreate a free account to mount
globs: ["**/*.ts", "**/*.tsx"]
alwaysApply: false
---
Never write strings in the frontend directly, always write to and reference the relevant translations file
No other project uses it yet
37k13mo agoReviewMountCreate a free account to mount
vantionlabsCursor rule
