skills.rest
Saisagar7779
Saisagar7779COMMUNITY
Explore all skills by this author →
GitHub

ui-review

Review UI changes against the Swiss International Style design system.

4|Updated Apr 4, 2026
Search Tags:#code quality#design system#ui review#frontend development#swiss international style
One-click install
npx skills add https://github.com/Saisagar7779/Resume-Matcher --skill ui-review-saisagar7779
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-review
Source: https://github.com/Saisagar7779/Resume-Matcher/tree/main/.github/skills/ui-review
Command: npx skills add https://github.com/Saisagar7779/Resume-Matcher --skill ui-review-saisagar7779

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps developers maintain UI consistency by reviewing changes against the Swiss International Style design system, ensuring compliance before any frontend UI changes are committed.

Core Features & Use Cases

  • Automated Checks: Run predefined checks for rounded corners, gradients, shadows, and other design elements.
  • Manual Review Guide: Provides a checklist for manual review of colors, typography, borders, shadows, spacing, and anti-patterns.
  • Anti-Pattern Quick Scan: Flags immediate issues like sharp corners, gradients, and soft shadows.
  • Reporting: Generates a report with [FAIL], [WARN], and [PASS] statuses for each check.

Quick Start

Run the automated checks by executing the following commands in the terminal:

# Forbidden rounded corners
rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden gradients
rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden soft shadows
rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden blur
rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

Frequently Asked Questions about ui-review

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

FAQPage Schema
How do I check frontend UI changes for Swiss International Style compliance?▼

Check frontend UI changes for Swiss International Style compliance by running automated terminal commands using ripgrep. This scans your tsx, jsx, and css files to flag forbidden rounded corners, gradients, soft shadows, and blur effects before committing.

What UI anti-patterns violate the Swiss International Style design system?▼

UI anti-patterns that violate the Swiss International Style design system include rounded corners, gradients, soft shadows, and blur effects. An automated quick scan flags these specific design elements alongside a manual checklist for colors, typography, borders, and spacing.

Can I automatically scan css and tsx files for forbidden design elements?▼

You can automatically scan css and tsx files for forbidden design elements by executing predefined ripgrep commands in the terminal. The Skill targets specific file extensions to detect anti-patterns like gradients and backdrop blur.

How do I generate a UI consistency report before committing frontend changes?▼

Generate a UI consistency report by running the predefined design checks. The process outputs a report featuring PASS, WARN, and FAIL statuses for each validated design element, ensuring frontend developers verify UI consistency before committing changes.

Do I need ripgrep installed to review UI code for design system consistency?▼

You need ripgrep installed to run the automated checks for UI code consistency. The Skill's quick start commands explicitly use the rg command line tool to search through frontend files and identify forbidden styling patterns.

Related Skills

Explore More Software Engineering Skills→
gaganpasupuletigaganpasupuleti

ui-review

Validate frontend UI code and CSS files for Swiss International Style design-system compliance using ripgrep.

Community
Intermediate
Fantasia1999Fantasia1999

skill-security-auditor

Audit AI agent skills for security vulnerabilities and malicious code.

Community
Advanced
Shresth-shShresth-sh

ui-review

Review frontend UI changes against Swiss International Style before committing.

Community
Intermediate
Camilo8902Camilo8902

storybook-setup

Automate Storybook setup and configuration for React, Next.js, and Vue3 projects.

Community
Intermediate