skills.rest
carrotwaxr
carrotwaxrCOMMUNITY
Explore all skills by this author →
GitHub

visual-style

Enforce consistent visual styling for Peek UI components with CSS custom properties and Tailwind patterns.

37|6|Updated Oct 10, 2025
Search Tags:#theming#accessibility#tailwind#ui-design#css-variables#visual-style#grid-system
One-click install
npx skills add https://github.com/carrotwaxr/peek-stash-browser --skill visual-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/carrotwaxr/peek-stash-browser/tree/main/.claude/skills/visual-style
Command: npx skills add https://github.com/carrotwaxr/peek-stash-browser --skill visual-style

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about visual-style

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

FAQPage Schema
How do I maintain consistent UI styling and theme variables across a Tailwind CSS component library?▼

Consistent UI styling uses CSS custom properties for themeable color tokens and standardized Tailwind utility patterns to eliminate visual drift. This approach enforces predictable behavior and reduces duplicated styling across responsive and keyboard-first interfaces.

What's the best way to build responsive grid layouts with density-based card scaling?▼

Responsive grid layouts use defined breakpoints and grid density rules to ensure consistent spacing, typography, and image behavior. Density-based card scaling automatically adjusts component sizing across different screen sizes and entities.

How do I implement keyboard and TV remote navigation accessibility in a UI component?▼

Accessibility for keyboard and TV remote navigation requires defined focus rules, reduced-motion handling, and loading skeleton guidance. These rules ensure predictable behavior and accessible interaction for remote-controlled interfaces.

Can I use reusable card primitives instead of ad-hoc layouts for component design?▼

Reusable card primitives like BaseCard provide composable building blocks for images, titles, indicators, and menus. Using these primitives instead of ad-hoc layouts ensures structural consistency and maintainability across your UI components.

Why does my UI theme have hardcoded color values instead of using a centralized design system?▼

Hardcoded color values cause visual drift and maintenance issues. A centralized theme system uses CSS custom properties for background, text, accent, and status colors to provide a single source of truth for visual decisions.

Does this visual styling approach work for large-screen and extended breakpoint layouts?▼

The styling approach supports extended large-screen breakpoints alongside standard Tailwind patterns. It defines specific utility class patterns for cards and buttons to maintain visual consistency across all viewport sizes.

Related Skills

Explore More Design & Creative Skills→
HubDigitalEPNHubDigitalEPN
1

tailwindcss-development

Automates Tailwind CSS v4 utility classes styling for HTML templates and layouts.

Official
Advanced
boludo00boludo00
80

shadcn-ui

Implement shadcn/ui accessible components using Radix UI primitives for React.

Community
Intermediate
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
megahomewebmegahomeweb

tailwind-patterns

Enforce Tailwind CSS patterns and theming across the MegaHome UI.

Community
Intermediate