sage-design-review

Enforce Sage design-system discipline on SCSS, tokens, and classnames.

26|3|Updated Sep 23, 2020
One-click install
npx skills add https://github.com/Kajabi/sage-lib --skill sage-design-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sage-design-review
Source: https://github.com/Kajabi/sage-lib/tree/main/.claude/skills/sage-design-review
Command: npx skills add https://github.com/Kajabi/sage-lib --skill sage-design-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures Sage design-system discipline is consistently applied to SCSS, tokens, and BEM-style classnames during code changes to prevent drift and API instability.

Core Features & Use Cases

  • Design-context provides a clear framework for evaluating SCSS, token usage, and naming conventions.
  • Stability & consistency aligns new work with Pine tokens for dark-mode shims and preserves existing helper conventions.
  • Use Case apply during reviews after SCSS/token/classname changes or when new components/variants are added to sage-assets.

Quick Start

Review and apply the design-review criteria to the latest Sage code changes in your PR, ensuring token usage, BEM naming, and story coverage meet the established guidelines.

Frequently Asked Questions about sage-design-review

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

FAQPage Schema
How do I enforce BEM naming conventions and SCSS token usage during code reviews?▼

Enforce BEM naming conventions and SCSS token usage by applying design-review criteria to code changes, checking classname structures, verifying Pine token alignment, and ensuring new components meet BLOCKER and SHOULD FIX severity guidelines.

What is a Sage design-system review and when do I need to run it?▼

A Sage design-system review is a quality-assurance process for SCSS, token JSON, and classname changes. You need to run it during gauntlet reviews or when adding new components and variants to sage-assets to prevent API instability and design drift.

How do I check Storybook story coverage for new component variants?▼

Check Storybook story coverage by reviewing the latest Sage code changes in your PR and verifying that all new components and variants include corresponding stories that meet the established design-system guidelines.

Does the design review process verify dark-mode token alignment for SCSS changes?▼

Yes, the design review process verifies dark-mode token alignment by checking that new SCSS work aligns with Pine tokens for dark-mode shims, preserving existing helper conventions and ensuring stability across theme changes.

What are the limitations of automated SCSS design-token checks during gauntlet reviews?▼

Automated SCSS design-token checks focus on BLOCKER and SHOULD FIX severity levels, covering token JSON, BEM naming, and Storybook coverage, but may not capture every nuanced design-context decision beyond the established framework.