skills.rest
micserr
micserrCOMMUNITY
Explore all skills by this author →
GitHub

sprout-ui-patterns

Enforce Sprout UI layout patterns for cards, forms, and container grids.

Updated Mar 2, 2026
Search Tags:#typography#layout#forms#design-patterns#ui-patterns#cards#sprout
One-click install
npx skills add https://github.com/micserr/toge-design-system --skill sprout-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprout-ui-patterns
Source: https://github.com/micserr/toge-design-system/tree/main/skill/sprout-ui-patterns
Command: npx skills add https://github.com/micserr/toge-design-system --skill sprout-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Sprout UI patterns establish and communicate the design conventions used across Sprout products, ensuring consistent card borders, separators, padding, and typography across pages and components.

Core Features & Use Cases

  • Card and card-section border conventions using spr-border-color-weak
  • Form section separators with full-width borders and section padding
  • Consistent spacing and typography for Sprout product pages
  • Use Case: apply these patterns when building Sprout product pages (cards, sections, forms)

Quick Start

Apply the Sprout UI patterns to your page layouts by following the card, separator, and padding guidelines.

Frequently Asked Questions about sprout-ui-patterns

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

FAQPage Schema
What are the standard UI layout patterns for Sprout product pages?▼

Standard Sprout UI layout patterns enforce consistent card borders, separators, padding, and typography across pages. They use canonical design tokens like spr-border-color-weak for borders, p-4 for padding, and spr-subheading-sm for headings.

How do I create consistent card-based layouts for Sprout products?▼

To create consistent card-based layouts, apply spr-border-color-weak for card and card-section borders, use p-4 for padding, and apply spr-rounded-border-radius-lg for container radius to enforce uniform design conventions.

What border and padding tokens should I use for Sprout form sections?▼

For Sprout form sections, use full-width borders with spr-border-color-weak for separators and apply p-4 for section padding to maintain consistent spacing and visual hierarchy across product pages.

When do I need to apply Sprout UI design patterns?▼

You need to apply Sprout UI design patterns when building Sprout product pages that include cards, sections, or forms, ensuring border, padding, and typography conventions remain consistent across all components.

What heading styles are specified for Sprout UI container grids?▼

Sprout UI container grids specify spr-subheading-sm as the canonical heading style token, ensuring typography remains uniform and consistent across different Sprout product pages and layout components.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

frontend-css-patterns

Provide framework-agnostic CSS patterns for typography, color, motion, and layout.

Community
Intermediate
jiaiyanjiaiyan
8

naive-ui-design-layout

Design responsive Naive UI layouts using Grid, Flex, Space, and Layout components.

Community
Intermediate
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
heidsoftheidsoft
57

component-standardization

Refactor bespoke UI components into Ant Design and Tailwind standards.

Community
Advanced