optical-auto-layout
CommunityVisually perfect layouts, mathematically sound.
Authorskeeper75
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves the common design challenge where mathematically precise layouts appear visually unbalanced, ensuring that elements are not only correctly positioned but also pleasing to the human eye.
Core Features & Use Cases
- Smart Layout Engine: Combines CSS Flexbox auto-layout with optical alignment principles.
- Shape Corrections: Adjusts element sizes and positions based on their visual weight (e.g., circles appear larger than squares of the same dimension).
- Use Case: Automatically arrange icons in a toolbar so they appear evenly spaced and visually balanced, or precisely lay out elements on a business card for professional appeal.
Quick Start
Use the optical-auto-layout skill to arrange the provided icons into a visually balanced row.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesexamples
💻 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: optical-auto-layout Download link: https://github.com/skeeper75/widget.creator/archive/main.zip#optical-auto-layout Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.