visual-style

What problem does it solve?

Provides a single source of truth for visual decisions so UI components, themes, and layouts remain consistent, accessible, and maintainable across the Peek Stash Browser codebase. It eliminates visual drift, reduces duplicated styling, and enforces predictable behavior for responsive and keyboard/TV navigation.

Core Features & Use Cases

• Color system: CSS custom properties for themeable color tokens (background, text, accents, status colors) to avoid hardcoded values.
• Tailwind patterns & breakpoints: Standardized breakpoint and utility patterns including extended large-screen breakpoints and recommended class patterns for cards and buttons.
• Grid & density system: Responsive grid densities and density-based card scaling to ensure consistent spacing, typography, and image behavior across entities.
• Card primitives & components: Reusable BaseCard and composable primitives for images, titles, indicators, and menus that should be used instead of ad-hoc layouts.
• Accessibility & motion: Keyboard focus rules, reduced-motion handling, and marquee/loading skeleton guidance for TV/remote and keyboard-first navigation.
• Use Case Example: When creating a new SceneCard or theme, follow the CSS variable interface, Tailwind utility conventions, and card primitives to produce a consistent, accessible component.

Quick Start

Use the visual-style skill to apply the CSS variable conventions, Tailwind breakpoint and grid patterns, and card component primitives when creating or updating a UI card or theme.