skills.rest
fulfon
fulfonCOMMUNITY
Explore all skills by this author →
GitHub

lusena-spacing

Enforce LUSENA Shopify theme spacing rules for sections and content flow.

Updated Jan 30, 2026
Search Tags:#UI/UX#css#spacing#shopify#theme development#padding
One-click install
npx skills add https://github.com/fulfon/lusena-dawn --skill lusena-spacing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lusena-spacing
Source: https://github.com/fulfon/lusena-dawn/tree/main/.claude/skills/lusena-spacing
Command: npx skills add https://github.com/fulfon/lusena-dawn --skill lusena-spacing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill ensures consistent, premium spacing across the LUSENA Shopify theme, enhancing both aesthetic appeal and conversion rates by guiding user focus.

Core Features & Use Cases

  • Section Padding: Manages vertical spacing between sections using predefined tiers (--compact, --standard, --spacious, --hero).
  • Content Flow: Controls spacing within containers (e.g., between headings and body text) using lusena-content-flow classes.
  • Element Gaps: Applies specific margins to individual elements (lusena-gap-*) when content-flow is not suitable.
  • Use Case: Reviewing the homepage of a LUSENA theme to ensure all sections have appropriate top/bottom padding and that elements within sections (like a kicker and heading) have the correct vertical rhythm, leading to a cleaner, more professional look that encourages user engagement.

Quick Start

Use the lusena-spacing skill to review the spacing on the homepage.

Frequently Asked Questions about lusena-spacing

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

FAQPage Schema
How do I manage section padding in Shopify theme development?▼

Manage section padding in Shopify theme development by applying predefined CSS variables like --compact, --standard, --spacious, and --hero to enforce consistent vertical rhythm. This system maintains a premium aesthetic and guides user focus.

What is the best way to control content flow spacing in a Shopify theme?▼

Control content flow spacing in a Shopify theme by using semantic content-flow classes to manage vertical spacing between elements like headings and body text. This prevents arbitrary margins and maintains a clean, professional UI/UX.

Can I use Tailwind utilities for spacing in the LUSENA theme?▼

You should not use hardcoded Tailwind utilities for spacing in the LUSENA theme. The system enforces a strict CSS spacing structure using semantic gap applications and predefined padding tiers to ensure consistent design and avoid layout drift.

How does CSS spacing affect UI/UX and conversion rates?▼

CSS spacing affects UI/UX and conversion rates by creating a consistent, premium aesthetic that guides user focus. Proper section padding and internal content flow optimize conversion pathways, encouraging higher user engagement and clearer visual hierarchy.

When should I apply individual element gaps instead of content-flow classes?▼

Apply individual element gaps using specific margin utilities when content-flow classes are not suitable for the layout. This targeted spacing approach handles unique UI element placements without breaking the overall vertical rhythm of the section.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced
Niccos-Shopify-WorkspaceNiccos-Shopify-Workspace
2

theme-shopify-section-structure

Organize Shopify theme sections with standardized file structure and schema requirements.

Official
Basic
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate
fusenginefusengine
22

tailwindcss-spacing

Document Tailwind CSS v4.1 spacing utilities for margin, padding, and space-between classes.

Community
Basic