skills.rest
btabaska
btabaskaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

rule-frontend-styles

Validate frontend SCSS changes for USWDS token usage and style conventions.

1|1|Updated Mar 31, 2026
Search Tags:#frontend#validation#styling#tokens#breakpoints#scss#uswds
One-click install
npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill rule-frontend-styles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rule-frontend-styles
Source: https://github.com/btabaska/simpler-grants-documentation-automation/tree/main/.claude/skills/rule-frontend-styles
Command: npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill rule-frontend-styles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Codifies and enforces frontend styling conventions to ensure SCSS files, token usage, and USWDS overrides stay consistent across the project, reducing manual review overhead and style drift.

Core Features & Use Cases

  • Centralizes SCSS organization and the forward dependency chain in styles.scss.
  • Enforces USWDS theme overrides, tokens, breakpoints, and print styles.
  • Provides guidance for accessibility-friendly patterns and anti-pattern avoidance.
  • Use Case: When adding a new frontend component, follow the rule to align with project styling tokens and avoid hard-coded colors.

Quick Start

Audit a frontend SCSS change to verify USWDS token usage, correct breakpoints, and proper file organization.

Frequently Asked Questions about rule-frontend-styles

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

FAQPage Schema
How do I validate SCSS changes against USWDS styling tokens?▼

You can validate SCSS changes by enforcing frontend styling conventions that check USWDS token usage, breakpoints, and print styles under frontend/src/styles to ensure consistency and prevent style drift.

What is the best way to organize SCSS partials and forward dependencies in a USWDS project?▼

The best way to organize SCSS partials is to centralize the forward dependency chain in styles.scss, ensuring clear naming and proper file organization while avoiding legacy @import usage.

Can I use hard-coded hex colors in frontend SCSS components?▼

No, you cannot use hard-coded hex colors in frontend SCSS components. The styling validation enforces using project tokens and USWDS theme overrides instead of hard-coded values to maintain consistency.

How do I enforce print styles and correct breakpoints in frontend SCSS assets?▼

To enforce print styles and correct breakpoints in frontend SCSS assets, apply styling rules that validate USWDS breakpoint usage and print style declarations within the frontend/src/styles directory.

Why does my SCSS file fail validation when using legacy @import statements?▼

SCSS files fail validation when using legacy @import statements because the frontend styling rules enforce no legacy @import usage, requiring proper forward usage and clear partials instead.

Does the frontend styling validation work with USWDS theme overrides?▼

Yes, the frontend styling validation works with USWDS theme overrides by checking that SCSS changes conform to project styling conventions, including token usage, breakpoints, and proper file organization.

Related Skills

Explore More Software Engineering Skills→
juice-shopjuice-shop
13.6k

create-m3-theme

Create and integrate Angular Material M3 themes in Juice Shop SCSS and configuration.

Official
Intermediate
eleva-labseleva-labs

ci-pipeline

Design repeatable CI pipelines for automated testing, linting, and build verification.

Official
Basic
jac007xjac007x

design-system-validator

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

Community
Advanced
Postpartum-genushyacinthus29Postpartum-genushyacinthus29
8

dotnet-stylelint

Run Stylelint against CSS/SCSS assets using repo-local configs.

Community
Intermediate