Add New Page Scss

Instructions

Use this skill whenever implementing CSS/SCSS for a new page view, a new landing section, or a significant new UI component that doesn't already have a stylesheet.

Step 1 — Identify the Scope

Before writing any SCSS, determine:

• Is this page-level (only used by one controller action)? → File goes in app/assets/stylesheets/pages/_<page-name>.scss.
• Is this a shared component (used across multiple pages)? → File goes in app/assets/stylesheets/components/_<component-name>.scss.

Step 2 — Create the SCSS File (7-1 Pattern)

Create the file at the appropriate path. NEVER define local variables or mixins. Instead, import from abstracts/:

// ============================================================
// [PAGE NAME] — Pure SCSS, Strict BEM
// Part of the 7-1 Architectural Pattern
// ============================================================

// ── Shared Tokens (Already available globally via application.scss) ──
// Use variables like $primary, $accent, $bg, $surface, $text-dark, $text-muted
// Use mixins like @include flex-center, @include flex-between, @include line-clamp(2)

// ── Page-Level Styles ─────────────────────────────────────────

.my-page-block {
  background: $bg;
  @include section-padding;
  
  &__inner {
    @include inner-container;
  }
}