Standardize Aurora UI form layouts with a 12-column grid and semantic sections.
npx skills add https://github.com/avvale/aurora-front --skill aurora-layout
Please help me install this Agent Skill. Skill: aurora-layout Source: https://github.com/avvale/aurora-front/tree/main/.claude/skills/aurora-layout Command: npx skills add https://github.com/avvale/aurora-front --skill aurora-layout
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.
Apply the grid-based layout and sectioning rules to a target form by:
High-intent search queries and answers about installing and using this skill.
Standardize responsive form layouts by applying a 12-column grid with col-* classes to control field widths and alignment, ensuring forms adapt predictably across mobile and desktop devices without external tooling.
Group form fields semantically by organizing them into logical sections like Identification, Data, or Contact, inserting a mat-toolbar separator when a section contains six or more fields to improve scanning.
Use a 12-column layout grid by assigning col-X classes to fields based on their data type, controlling widths and alignment to enforce consistent visual structure across detail forms and dashboards.
You do not need external dependencies to enforce UI form patterns. The layout framework applies responsive grid behavior and sectioning rules natively, standardizing form structure without requiring external tooling.
You can use optional mat-toolbar section dividers to separate semantic field groupings in multi-section screens, improving usability and visual scanning when dealing with complex detail forms or editors.
A 12-column grid may not suit frontend forms requiring highly custom, free-form layouts outside standard detail forms or dashboards, as it enforces strict column alignment and semantic sectioning rules.
afonsolelisDefine a standard page structure for Pokémon TCG card pages.
avvaleApply Tailwind CSS 3 utilities to style Aurora Angular components with Fuse theming.
jiaiyanValidate and manage user input in Naive UI forms.
coastdigitalgroupDesign a responsive 12-column grid system with breakpoints, gutters, and margins.
