fix-surface-styles

Community

Unify CSS with Surface System for consistent UI.

Authorinernoro
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Scan and fix CSS style deviations to unify with the Surface System. When page styles appear inconsistent (dim, opaque, hover not unified), perform a one-shot repair.

Core Features & Use Cases

  • Detect anti-patterns that violate Surface System conventions, including inline hover corrections, hard-coded rgba backgrounds, and inline card styling.
  • Propose and apply targeted fixes across React components to achieve consistent surfaces, insets, rows, and interactive variants.
  • Generate a repair report with step-by-step actions and recommendations for manual review if needed.

Quick Start

Instruct the tool to scan and repair Surface System style inconsistencies across the project.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: fix-surface-styles
Download link: https://github.com/inernoro/prd_agent/archive/main.zip#fix-surface-styles

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.