Skills
.Work. You
Rest

aurora-layout

Official

Master Aurora forms layout with grids.

Design & Creative#responsive-design#ui-patterns#form-design#layout-grid#aurora-layout#frontend-forms
Authoravvale
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill standardizes and enforces consistent UI form layouts across Aurora apps, addressing the fragmentation of form patterns and visual inconsistencies that slow down development and degrade user experience.

Core Features & Use Cases

  • 12-column grid with col-X classes to control field widths and alignment across detail forms, editors, and dashboards.
  • Semantic grouping of fields into logical sections (Identification, Data, Contact, etc.) with optional toolbars to improve scanning and usability.
  • Responsive layout guidance that adapts to mobile and desktop, enabling predictable behavior across devices and screen sizes.

Quick Start

Apply the grid-based layout and sectioning rules to a target form by:

  • Defining 12-column grid usage with col-*, aligning fields by data type.
  • Grouping related fields into semantic sections and inserting a toolbar separator when 6+ fields exist.
  • Applying responsive classes to ensure full-width on mobile and compact columns on larger screens.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: aurora-layout
Download link: https://github.com/avvale/aurora-front/archive/main.zip#aurora-layout

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 223,000+ vetted skills library on demand.