skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

baseline-ui

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

Updated May 5, 2026
Search Tags:#typography#accessibility#react#ui review#tailwind css#animation#design polish
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill baseline-ui-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/baseline-ui
Command: npx skills add https://github.com/josippapez/ai-setup --skill baseline-ui-josippapez

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 frontend quality. ## Core Features & Use Cases - Constraint Enforcement: Applies opinionated rules across stack, components, interaction, animation, typography, layout, performance, and design when doing any UI work. - File Review Mode: Audits a specific file against all constraints and reports violations with the exact snippet, why it matters, and a concrete code-level fix. - Use Case: After generating a React dashboard with Tailwind CSS, run a review pass to catch issues like h-screen instead of h-dvh, missing aria-label on icon buttons, layout-property animations, or gradient misuse, and get concrete fixes for each. ## Quick Start Ask the assistant to review your component file against the baseline-ui constraints and list every violation with a concrete 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-ui review pass on the file. It checks spacing, typography, animation, layout, and accessibility constraints, then reports each violation with the exact snippet and a concrete code-level fix.

What animation properties are safe to animate in CSS?▼

Only compositor properties like transform and opacity should be animated. Animating layout properties such as width, height, top, left, margin, or padding triggers reflow and hurts performance, so the baseline forbids them.

Should I use h-screen or h-dvh for full-height layouts?▼

Use h-dvh instead of h-screen. The dynamic viewport height unit accounts for mobile browser chrome like address bars, preventing content from being cut off or overflowing on mobile devices.

Which component primitives work with this UI baseline?▼

The baseline requires accessible primitives such as Base UI, React Aria, or Radix for anything with keyboard or focus behavior. It prefers Base UI for new primitives and forbids mixing primitive systems within the same interaction surface.

When should animation be added to a UI?▼

Only when explicitly requested. The baseline defaults to no animation, caps interaction feedback at 200ms, prefers ease-out on entrances, and requires respecting prefers-reduced-motion and pausing off-screen loops.

Related Skills

Explore More Design & Creative Skills→
nthplusionthplusio

shadcn-dev

Configures and scaffolds shadcn/ui in React projects with Tailwind CSS v4.

Official
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
tonamsontonamson

ck:ui-styling

Combine shadcn/ui components, Radix primitives, and Tailwind utilities to style React UIs.

Community
Intermediate
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

general-video

Author custom video compositions in HyperFrames with various formats and lengths.

Official
Advanced