skills.rest
oligamiq
oligamiqCOMMUNITY
Explore all skills by this author →
GitHub

baseline-ui

Reviews and fixes UI code for spacing, typography, animation, and layout violations.

Updated Apr 22, 2024
Search Tags:#typography#accessibility#react#ui review#tailwind css#animation#frontend polish
One-click install
npx skills add https://github.com/oligamiq/fast-explorer --skill baseline-ui-oligamiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/oligamiq/fast-explorer/tree/main/.agents/skills/baseline-ui
Command: npx skills add https://github.com/oligamiq/fast-explorer --skill baseline-ui-oligamiq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interface code often ships with inconsistent spacing, poor typography, unsafe animations, and accessibility gaps. This Skill applies an opinionated baseline of UI constraints to clean up that slop and enforce consistent, accessible frontend code. ## Core Features & Use Cases - Constraint Enforcement: Applies rules across stack, components, interaction, animation, typography, layout, performance, and design, covering Tailwind CSS defaults, accessible primitives, and motion safety. - File Review Mode: Audits a specific file and reports violations with the exact offending snippet, a one-sentence rationale, and a concrete code-level fix. - Use Case: After generating a React dashboard with an AI assistant, run a baseline review to catch issues like h-screen instead of h-dvh, missing aria-label on icon buttons, layout-property animations, and gradient misuse before shipping. ## Quick Start Ask the assistant to review your component file against the baseline-ui constraints and list every violation with a fix.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema
How do I clean up AI-generated UI code?▼

Run a baseline review pass that checks spacing, typography, animation, and accessibility constraints against your files. The review quotes each violating snippet, explains why it matters, and suggests a concrete code-level fix.

What animation library should I use with React and Tailwind?▼

Use motion/react (formerly framer-motion) for JavaScript animation and tw-animate-css for entrance micro-animations in Tailwind. Animate only compositor properties like transform and opacity, and keep interaction feedback under 200ms.

Which component primitives are best for accessible React UI?▼

Use accessible primitives such as Base UI, React Aria, or Radix for anything with keyboard or focus behavior, preferring your project's existing primitives first. Never mix primitive systems within the same interaction surface or rebuild focus handling by hand.

Why should I avoid h-screen in mobile web layouts?▼

h-screen uses the legacy viewport unit that includes mobile browser chrome, causing content to be cut off. Use h-dvh instead, which tracks the dynamic viewport height, and respect safe-area-inset for fixed elements.

When should I not apply these UI baseline constraints?▼

Skip rules when a project explicitly requests otherwise, such as custom easing curves, gradients, or letter-spacing changes. Several constraints are explicitly conditional on not being overridden by explicit user requests.

Related Skills

Explore More Software Engineering Skills→
dejanvasic85dejanvasic85
1

frontend-design

Generates Tailwind and CSS-based designs and layouts for a given text description, with multiple aesthetic options to choose from.

Community
Basic
I-SynergyI-Synergy

playwright-tester

Create and execute E2E and UI tests for web applications using Playwright.

Official
Advanced
olznolzn

token-craft

Define design token architecture across primitive, semantic, and component layers.

Community
Advanced
mengblommengblom

design-system-audit

Audit design system usage across projects to detect drift and coverage gaps.

Community
Intermediate