frontend-alignment-doctor

Name: frontend-alignment-doctor
Availability: InStock
Author: ralphjohn29

Diagnose CSS rules causing frontend alignment and layout issues.

1|Updated Mar 8, 2026

Search Tags:#debugging #layout #frontend #css #alignment #spacing

Ready to run

npx skills add https://github.com/ralphjohn29/my-claude-skills --skill frontend-alignment-doctor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-alignment-doctor
Source: https://github.com/ralphjohn29/my-claude-skills/tree/main/frontend-alignment-doctor
Command: npx skills add https://github.com/ralphjohn29/my-claude-skills --skill frontend-alignment-doctor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill precisely diagnoses and rectifies frontend alignment, spacing, and layout inconsistencies that disrupt user interfaces and create a poor user experience.

Core Features & Use Cases

Root Cause Analysis: Identifies the specific CSS rule causing alignment problems, prioritizing broad selectors that often hide the true issue.
Minimal Fixes: Focuses on the smallest possible change to correct the problem, avoiding over-engineering or adding unnecessary styles.
Use Case: When a button's icon is misaligned, this Skill will find the offending CSS rule (e.g., a broad margin-bottom on all SVGs within a container) and suggest a targeted fix, like changing it to a direct child selector.

Quick Start

Use the frontend-alignment-doctor skill to fix the misaligned icon on the 'Upload Files' button.

Frequently Asked Questions about frontend-alignment-doctor

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

FAQPage Schema

How do I fix CSS alignment and spacing issues caused by broad descendant selectors?▼

Fix CSS alignment and spacing issues by analyzing your HTML structure and CSS rules to pinpoint root causes, then applying minimal fixes like changing broad descendant selectors to direct child selectors to resolve margin and padding conflicts.

Why does my flexbox or grid layout have misaligned elements and how do I correct it?▼

Diagnose flexbox and grid misconfigurations by identifying the specific CSS rules disrupting your layout, then apply targeted corrections to margins and padding instead of adding unnecessary styles to resolve the misalignment.

What is the best way to debug frontend layout problems without over-engineering CSS?▼

Debug frontend layout problems by finding the specific CSS rule causing the alignment issue and implementing the smallest possible change to correct it, avoiding over-engineering and preventing unnecessary style additions.

How do I resolve a misaligned icon inside a button caused by incorrect margins?▼

Resolve misaligned button icons by locating the offending CSS rule, such as a broad margin-bottom applied to all SVGs within a container, and replacing it with a direct child selector for targeted spacing correction.

Can I diagnose frontend padding and margin inconsistencies by analyzing only HTML and CSS?▼

Yes, you can diagnose frontend padding and margin inconsistencies by analyzing your HTML structure and CSS rules to find the exact broad selectors causing the alignment problems and applying minimal targeted corrections.