skills.rest
gagandeepgill
gagandeepgillCOMMUNITY
Explore all skills by this author →
GitHub

baseline-ui

Reviews and fixes UI code against opinionated Tailwind CSS and accessibility constraints.

1|Updated Aug 31, 2026
Search Tags:#typography#accessibility#react#ui review#tailwind css#animation#code cleanup
One-click install
npx skills add https://github.com/gagandeepgill/puzzle-game --skill baseline-ui-gagandeepgill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/gagandeepgill/puzzle-game/tree/main/.claude/skills/baseline-ui
Command: npx skills add https://github.com/gagandeepgill/puzzle-game --skill baseline-ui-gagandeepgill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interface code often ships with inconsistent spacing, weak typography, inaccessible components, and gratuitous animations. This Skill applies a fixed set of UI constraints to clean up that slop and enforce a consistent baseline across any frontend work. ## Core Features & Use Cases - Constraint Enforcement: Applies opinionated rules for Tailwind CSS usage, typography, layout, animation, and design tokens during any UI work in the conversation. - 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. - Accessibility Guardrails: Requires accessible primitives (Base UI, React Aria, Radix), aria-labels on icon-only buttons, and AlertDialog for destructive actions. - Use Case: After generating a React dashboard, run a review pass to catch h-screen usage, missing tabular-nums on data, 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 the code against fixed constraints for spacing, typography, animation, and accessibility. The review quotes each violating snippet, explains why it matters, and suggests a concrete code-level fix.

What animation rules should React interfaces follow?▼

Animate only compositor properties like transform and opacity, never layout properties such as width, height, or margin. Keep interaction feedback under 200ms, use ease-out on entrances, and respect prefers-reduced-motion.

Which component primitives work with Tailwind CSS for accessibility?▼

Base UI, React Aria, and Radix all provide accessible primitives with keyboard and focus behavior built in. Pick one system per interaction surface and never rebuild focus handling by hand.

Why should I use h-dvh instead of h-screen in mobile layouts?▼

h-screen uses the static viewport height, which causes layout issues when mobile browser chrome appears or hides. h-dvh tracks the dynamic viewport height, and fixed elements should also respect safe-area-inset.

When should I not add animation to an interface?▼

Do not add animation unless it is explicitly requested. Avoid animating large images, full-screen surfaces, or large blur and backdrop-filter areas, and pause looping animations when they move off-screen.

Related Skills

Explore More Software Engineering Skills→
Yjj0333Yjj0333

baseline-ui

Reviews and fixes UI code against Tailwind CSS, accessibility, and animation constraints.

Community
Intermediate
samymitysamymity
1

browser-qa

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

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
aashahinaashahin

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Community
Intermediate