skills.rest
Mjlike123
Mjlike123COMMUNITY
Explore all skills by this author →
GitHub

baseline-ui

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

Updated Aug 13, 2026
Search Tags:#accessibility#frontend#react#ui review#tailwind css#animation#design polish
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill baseline-ui-mjlike123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/baseline-ui
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill baseline-ui-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often ship with visual slop: inconsistent spacing, weak hierarchy, arbitrary z-index values, layout-breaking animations, and inaccessible components. This Skill applies an opinionated baseline of UI constraints to clean up and polish front-end code quickly. ## Core Features & Use Cases - Constraint-Based Review: Checks code against explicit MUST/SHOULD/NEVER rules covering Tailwind usage, component primitives, interaction patterns, animation, typography, layout, performance, and design tokens. - File-Level Audit: Point it at a specific file to receive violations with quoted snippets, a one-sentence rationale, and a concrete code-level fix. - Use Case: After generating a React settings page, run the review to catch issues like h-screen instead of h-dvh, missing aria-label on icon buttons, animations on layout properties, or gradients that violate the design rules. ## Quick Start Ask the assistant to review a specific UI 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 quickly?▼

Run a constraint-based review that checks spacing, hierarchy, typography, and layout against explicit rules. The review quotes each violating snippet, explains why it matters in one sentence, and suggests a concrete code-level fix.

What animation rules should React UI code 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, respect prefers-reduced-motion, and pause looping animations when off-screen.

Should I use Base UI or Radix for React component primitives?▼

Use whichever primitive system the project already adopts, and never mix systems within the same interaction surface. For new primitives, Base UI is preferred if compatible with the stack; both provide accessible keyboard and focus behavior.

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 values.

When should this UI cleanup approach not be used?▼

Avoid it when custom design values are explicitly requested, since the baseline defaults to Tailwind scales and forbids gradients, custom easing curves, and letter-spacing changes unless the user asks for them.

Related Skills

Explore More Design & Creative Skills→
jh941213jh941213
125

frontend

Plan and build React frontend UI with Tailwind CSS and SHADCN UI.

Community
Intermediate
alunadevalunadev
3

applying-web-design-guidelines

Audit UI code against web interface guidelines for accessibility, performance, UX, and code quality.

Community
Intermediate
niallr12niallr12

review-design

Audit a component's CSS properties and resolved design tokens against its Figma source via MCP server.

Community
Advanced
eprouvezeeprouveze

workspace-cleanup

Remove temporary files and debugging artifacts after explicit user confirmation.

Community
Intermediate