scss-compliance

name	scss-compliance
description	Validate and enforce zero-CSS compliance in subdomain page-specific SCSS files. Ensure all styling uses only Genesis Ontological mixins with no raw CSS properties, unit values, color values, or imports. Use when auditing or creating subdomain page-specific SCSS in _sass/main.scss.
license	MIT
metadata	{"author":"ASISaga","version":"2.0","category":"design-system","role":"compliance-specialist"}
allowed-tools	Bash Read Edit

SCSS Compliance

Role: Zero-CSS Compliance Enforcer
Scope: Subdomain page-specific SCSS (_sass/main.scss)
Version: 2.0

Purpose

Ensure subdomain page-specific SCSS files use only Genesis Ontological mixins with zero raw CSS properties. Subdomains rarely need custom SCSS — the theme provides complete styling. When page-specific SCSS is needed, it must use ontological mixins exclusively in _sass/main.scss.

When to Use This Skill

Activate when:

• Creating _sass/main.scss for page-specific styling
• Auditing existing subdomain SCSS for compliance
• Reviewing PRs that add or modify SCSS files
• Checking for raw CSS violations
• Migrating from old assets/css/custom.scss pattern

Don't use for:

• Theme SCSS refactoring (use theme's scss-refactor-agent)
• Modifying theme's _sass/ directory (theme responsibility)
• Creating assets/css/custom.scss (deprecated, use _sass/main.scss)

Zero-CSS Rules

Forbidden in subdomain SCSS:

• ❌ Raw properties: margin, padding, color, font-size, background, border
• ❌ Unit values: px, rem, em, %, vh, vw
• ❌ Color values: #hex, rgb(), hsl(), oklch()
• ❌ @extend (Jekyll build errors)
• ❌ @import statements (ontology already available from theme)
• ❌ Jekyll front matter (---)

Required:

• ✅ File location: _sass/main.scss (NOT assets/css/custom.scss)
• ✅ NO front matter (it's a partial, not a standalone file)
• ✅ NO imports (ontology mixins already available)
• ✅ Only ontological mixins
• ✅ Max 3 nesting levels

Audit Workflow

1. Find SCSS Files

find _sass -name "*.scss" 2>/dev/null
# Should only find _sass/main.scss if present

2. Check for Raw CSS

# Raw properties
grep -nE "(margin|padding|color|font-size|background|border|display|position):" _sass/main.scss

# Raw values
grep -nE "[0-9]+(px|rem|em|%)" _sass/main.scss

# Color values
grep -nE "(#[0-9a-fA-F]{3,8}|rgb|hsl|oklch)\(" _sass/main.scss

3. Verify NO Imports or Front Matter

# Should have NO imports (ontology already available)
grep -n "@import" _sass/main.scss

# Should have NO front matter
head -5 _sass/main.scss | grep "^---$"

Ontology Quick Reference

Category	Mixin	Common Variants
Environment	genesis-environment($logic)	distributed, focused, manifest
Entity	genesis-entity($nature)	primary, secondary, imperative
Cognition	genesis-cognition($intent)	axiom, discourse, protocol
Synapse	genesis-synapse($vector)	navigate, execute, inquiry
State	genesis-state($condition)	stable, evolving, deprecated
Atmosphere	genesis-atmosphere($vibe)	neutral, ethereal, void

Visual Design Element Ownership

Each CSS concern maps from a semantic purpose to its owning category. Verify no property is set by the wrong mixin:

Semantic Purpose	Owner	Visual Design Element	Forbidden Elsewhere
Responsive spatial rhythm — gaps signal section vs group boundaries	environment	White space / gap	Entity must not set gap
Component breathing room — variant-scaled density	entity	Internal padding	Environment must not set padding
Page mood and emotional tone — OKLCH: void=black, ethereal=translucent, sacred=gradient	atmosphere	Colors / backgrounds	Cognition must not set background
Information voice and reading intent — axiom=bold headlines, discourse=serif body, protocol=monospace	cognition	Typography	Entity must not set font-*
Component edge treatment — 1px subtle, 2px neon accent, 999px pill via --radius-bento	entity	Borders / shape	Atmosphere must not set border
Lifecycle transitions and temporal signaling — evolving=sweep gradient, scroll-triggered=fade-in-up, deprecated=dimmed	state	Animations	Entity must not set animation
Action-specific interaction feedback — navigate=hover underline, execute=neon glow, 44px WCAG touch targets	synapse	Hover / focus	Cognition must not set :hover

Hierarchy-Level Rules

Subdomain content is typically Level 3–4:

Level	Element type	Required	Forbidden
3 — Component	Cards, widgets	entity	—
4 — Leaf	<h1>, <p>, <a>, <button>	cognition or synapse	environment, atmosphere, entity

→ Full specification: theme's docs/specifications/ontology-html-mapping.md

Compliance Checklist

• File is _sass/main.scss (NOT assets/css/custom.scss)
• NO Jekyll front matter (---)
• NO @import statements
• Zero raw CSS properties
• No unit values (px, rem, %)
• No color values (#hex, rgb(), oklch())
• No @extend usage
• Max 3 nesting levels
• SCSS nesting mirrors HTML structure
• Hierarchy compliance: components use entity, leaf elements use cognition/synapse
• Property ownership: borders only by entity, fonts only by cognition, backgrounds only by atmosphere

Resources

• instructions/scss.instructions.md — Complete SCSS standards with hierarchy rules and visual element ownership
• copilot-instructions.md — Ontology quick reference table with hierarchy rules
• Theme's docs/specifications/ontology-html-mapping.md — Formal hierarchy rules

Related Skills: content-author, subdomain-evolution