skills.rest
LinusConradM
LinusConradMCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Apply editorial design tokens to Streamlit UI components and Plotly charts.

1|Updated Dec 10, 2025
Search Tags:#typography#design tokens#ui design#streamlit#interaction states#plotly styling#dashboard polish
One-click install
npx skills add https://github.com/LinusConradM/feeding_america --skill ui-designer-linusconradm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/LinusConradM/feeding_america/tree/main/.claude/skills/ui-designer
Command: npx skills add https://github.com/LinusConradM/feeding_america --skill ui-designer-linusconradm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It fixes inconsistent dashboard visuals by applying the editorial design system so components, charts, spacing, and color feel cohesive and trustworthy.

Core Features & Use Cases

  • Component-level restyling: polish cards, banners, headers, chips, and button/metric visuals using the shared tokens for spacing, radius, borders, shadows, and typography.
  • Chart harmonization: update Plotly styling to use the repository’s curated PLOTLY_LAYOUT and correct color sequences, axis label styling, and map styling so figures match the editorial look.
  • Interaction states refinement: tighten hover/active/focus behavior (motion, outlines, transitions) without breaking the Streamlit styling constraints.

Use Case: When a Streamlit page looks “off-brand” (wrong fonts, off-grid spacing, mismatched chart colors, weak hierarchy), apply this skill to restyle the affected components and ensure consistent interactive states across the page.

Quick Start

Ask the AI: Polish the Streamlit UI for the provided page by applying the editorial design tokens, fixing spacing/typography, harmonizing charts with PLOTLY_LAYOUT, and ensuring hover/active/focus states match the design system.

Frequently Asked Questions about ui-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply consistent design tokens to Streamlit dashboard components?▼

To apply consistent design tokens to Streamlit dashboard components, use a shared token source like utils/theme.py to standardize spacing, radius, borders, and typography. This ensures all UI elements snap to a 4px grid and avoid arbitrary hex values.

Why does my Plotly chart styling look different from the rest of my Streamlit app?▼

Plotly chart styling looks inconsistent when figures bypass the repository's curated PLOTLY_LAYOUT. Harmonize charts by applying this configuration sequence to standardize axis labels, map styling, and color palettes to match the editorial look.

How do I define hover and active interaction states in Streamlit without breaking styling constraints?▼

To define hover and active interaction states in Streamlit without breaking styling constraints, apply shared editorial design tokens to tighten motion, outlines, and transitions. This refines default, hover, active, and focus states while respecting Streamlit's native UI limitations.

What is the best way to fix off-brand spacing and typography in Streamlit apps?▼

The best way to fix off-brand spacing and typography in Streamlit apps is to restyle affected components using an editorial design system. Snapping elements to a 4px spacing grid and standardizing fonts removes visual inconsistency and builds trustworthy dashboards.

Does Streamlit support custom design tokens for policy and research dashboard interfaces?▼

Streamlit supports custom design tokens for policy and research dashboard interfaces through shared theme configurations. By centralizing tokens for color, borders, and shadows, you can polish cards, banners, and metric visuals to achieve a cohesive editorial design system.

When should I not use arbitrary hex values for Streamlit UI restyling?▼

You should not use arbitrary hex values for Streamlit UI restyling when a shared token source is available. Leaking raw hex values breaks the editorial design system, causing inconsistent color spacing and weak visual hierarchy across dashboard pages.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
pinion05pinion05
3

frontend-design

Generate production-ready HTML/CSS/JS or framework-specific frontend components with cohesive typography, color, and motion.

Community
Advanced
HouseGarofaloHouseGarofalo
3

streamlit-dashboards

Create interactive Python dashboards with Streamlit, Pandas, and Plotly.

Official
Intermediate
Celia-12Celia-12

streamlit

Build interactive Streamlit web applications with default styling and server settings.

Community
Basic