How does the review command work?

By using the 'review ' command, Claude analyzes specific component files for layout inconsistencies, hardcoded values, and style violations.

Does it support responsive design?

Yes, the skill provides specific grid patterns and media query breakpoints (e.g., 900px and 600px) to ensure layouts are mobile-friendly.

What frameworks does this skill support?

This skill is specifically optimized for Angular applications using Material UI and the FormOXA component library.

Can I use this for non-Angular projects?

While general layout principles apply, the utility classes and component patterns are specifically designed for the mxsecurity shared styles architecture.

UI Layout Optimizer for Angular

Name: UI Layout Optimizer for Angular
Author: Michael0520

byMichael0520

0•

Design Tools

Optimizes Angular UI components and page layouts using standardized design patterns and shared style utilities.

This skill serves as a comprehensive design system assistant for Angular applications, specifically tailored for the mxsecurity shared library. It streamlines UI development by providing instant access to margin and padding utilities, standardized card patterns, and consistent text styling. Whether you are reviewing existing components for layout compliance or building complex dashboard grids from scratch, this tool ensures adherence to best practices like Material Design tokens, responsive grid layouts, and FormOXA integration, helping developers maintain a clean and consistent user interface across large codebases.

Key Features

01Standardized dashboard card and grid patterns

02Theme-aware color token implementation

03Automated layout review for Angular components

040 GitHub stars

05Material Design and FormOXA integration guidance

06Comprehensive margin and padding utility reference

Use Cases

01Migrating hardcoded styles to shared CSS utility classes and theme variables

02Reviewing an existing Angular component for layout consistency and style compliance

03Scaffolding a responsive dashboard grid with standardized card structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add michael0520/milo-claudekit ui-layout-guide

For use in Claude.ai and ChatGPT

Download Skill