skills.rest
ralphjohn29
ralphjohn29COMMUNITY
Explore all skills by this author →
GitHub

frontend-alignment-doctor

Diagnose CSS rules causing frontend alignment and layout issues.

1|Updated Mar 8, 2026
Search Tags:#debugging#layout#frontend#css#alignment#spacing
One-click install
npx skills add https://github.com/ralphjohn29/my-claude-skills --skill frontend-alignment-doctor
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
andronicsandronics
1

css-inspector

Analyze CSS rules to compute specificity and explain cascade decisions.

Community
Advanced
oalansilvaoalansilva

css-layout-helper

Diagnose CSS alignment and spacing issues with minimal flex or grid fixes.

Community
Basic
onsionsi
25

xpath

Construct robust XPath selectors for Biloba tests using DSL methods and predicates.

Community
Advanced
recca0120recca0120
11

extension-ui-reference

Inspect Claude Code VS Code extension DOM and CSS via MCP debugging.

Community
Intermediate