Skills
.Work. You
Rest

frontend-bug-fix

Official

Quickly diagnose and resolve frontend UI bugs.

Design & Creative#frontend#commit analysis#design comparison#UI bug#test strengthening
Authorsoofi-xyz
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps frontend teams identify, analyze, and fix UI bugs by comparing current implementation to source designs and reviewing commit history.

Core Features & Use Cases

  • Design Comparison: Assess mismatches between the current UI and source designs in Figma.
  • Commit Analysis: Trace recent code changes to find potential overrides causing the bug.
  • Test Evaluation: Determine if existing tests caught the issue or need strengthening for regression prevention.
  • Use Case: When a UI element displays incorrectly after a merge, use this Skill to identify the override commit and update relevant tests for future prevention.

Quick Start

Use the frontend-bug-fix skill to analyze the UI discrepancy reported for the homepage header.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: frontend-bug-fix
Download link: https://github.com/soofi-xyz/soofi-xyz-team-kit/archive/main.zip#frontend-bug-fix

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.