skills.rest
MiguelAguiarDEV
MiguelAguiarDEVCOMMUNITY
Explore all skills by this author →
Website𝕏@MiguelAguiarDevGitHub

fe-baseline-ui

Enforce UI baseline constraints for AI-generated frontend interfaces.

Updated Aug 27, 2026
Search Tags:#ui#consistency#accessibility#frontend#design system#animation
One-click install
npx skills add https://github.com/MiguelAguiarDEV/baymax --skill fe-baseline-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fe-baseline-ui
Source: https://github.com/MiguelAguiarDEV/baymax/tree/main/skills/fe-baseline-ui
Command: npx skills add https://github.com/MiguelAguiarDEV/baymax --skill fe-baseline-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents AI-generated interfaces from becoming inconsistent or visually unappealing by enforcing a set of opinionated UI guidelines.

Core Features & Use Cases

  • UI Constraint Enforcement: Applies specific rules for styling, animation, and layout to ensure a cohesive user experience.
  • Code Review: Can review specific files against these constraints, identifying violations and suggesting fixes.
  • Use Case: When building a new feature, use this Skill to ensure all UI elements adhere to the project's established design system and accessibility standards.

Quick Start

Use the fe-baseline-ui skill to apply the UI baseline constraints to the current conversation.

Frequently Asked Questions about fe-baseline-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce UI consistency in AI-generated frontend interfaces?▼

To enforce UI consistency in AI-generated frontend interfaces, apply an opinionated baseline of design constraints. This prevents visual inconsistencies by ensuring generated components adhere to established styling, animation, and accessibility standards.

What is a UI baseline and how does it prevent inconsistent styling?▼

A UI baseline is a set of opinionated design guidelines that prevents inconsistent styling by enforcing specific rules for layout, animation, and component usage. It ensures AI-generated code adheres to established design system standards.

Does this UI consistency baseline work with Tailwind CSS and motion/react?▼

Yes, enforcing this UI consistency baseline requires adherence to specific libraries including Tailwind CSS, motion/react, and accessible component primitives. It applies constraints directly to frontend workflows using these technologies.

How do I review frontend code for design system and accessibility violations?▼

To review frontend code for design system and accessibility violations, apply UI baseline constraints to your files. This process identifies specific layout and styling deviations and suggests targeted fixes to ensure a cohesive user experience.

Can I use this approach to fix visual inconsistencies in existing frontend components?▼

Yes, you can use UI baseline constraints to fix visual inconsistencies in existing frontend components. The mechanism reviews specific files against design standards, identifies violations, and suggests fixes to restore visual cohesion.

Related Skills

Explore More Design & Creative Skills→
kmshihab7878kmshihab7878
6

baseline-ui

Validate Tailwind CSS UI components for motion, typography, accessibility, and layout rules.

Community
Advanced
1lastphoenix1lastphoenix
7

web-design-guidelines

Compare UI components against Web Interface Guidelines and report violations.

Community
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
vercel-labsvercel-labs
5.8k

baseline-ui

Validate animation durations, typography scale, and accessibility in Tailwind CSS projects.

Official
Intermediate