skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

baseline-ui

Reviews and fixes UI code against spacing, typography, animation, and accessibility constraints.

3|Updated Apr 20, 2026
Search Tags:#typography#accessibility#frontend#react#ui review#tailwind css#animation
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill baseline-ui-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/baseline-ui
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill baseline-ui-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interface code often ships with inconsistent spacing, broken typography, unsafe animations, and missing accessibility attributes. This Skill applies an opinionated baseline of UI constraints so every React and Tailwind CSS interface passes a fast, consistent cleanup review. ## Core Features & Use Cases - Constraint Enforcement: Applies opinionated rules across stack, components, interaction, animation, typography, layout, performance, and design, such as using h-dvh instead of h-screen and text-balance for headings. - File Review Mode: Reviews a specific file and outputs violations with the exact quoted snippet, a one-sentence rationale, and a concrete code-level fix. - Accessibility Guardrails: Requires accessible primitives (Base UI, React Aria, Radix) for keyboard and focus behavior, AlertDialog for destructive actions, and aria-label on icon-only buttons. - Use Case: After generating a new dashboard page, run the review on the file to catch layout-property animations, arbitrary z-index values, and missing tabular-nums on data tables before committing. ## Quick Start Ask the assistant to run /baseline-ui on your component file to list violations and concrete fixes.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema
How do I review a React component file for UI issues?▼

Run /baseline-ui followed by the file path. The review outputs each violation with the exact quoted snippet, a one-sentence explanation of why it matters, and a concrete code-level fix suggestion.

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

Use motion/react (formerly framer-motion) when JavaScript animation is required, and tw-animate-css for entrance and micro-animations in Tailwind CSS. Animate only compositor properties like transform and opacity, never layout properties.

Which component primitives work for accessible keyboard and focus behavior?▼

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

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

h-screen uses the static viewport height which breaks on mobile browsers with dynamic toolbars, while h-dvh tracks the dynamic viewport height. Fixed elements must also respect safe-area-inset to avoid being clipped by device notches.

When should animations be avoided in UI code?▼

Never add animation unless explicitly requested, and never animate layout properties like width, height, or margin. Keep interaction feedback under 200ms, respect prefers-reduced-motion, and pause looping animations when off-screen.

Related Skills

Explore More Software Engineering Skills→
JoseLopezGonzalezJoseLopezGonzalez

shadcn-ui

Implement shadcn/ui, Radix UI, and Tailwind CSS components in React applications.

Community
Intermediate
rajivpantrajivpant
15

synthesis-preflight

Assess git branch readiness with six checks and a go/no-go verdict.

Community
Advanced
qte77qte77
2

auditing-website-accessibility

Audit websites and web apps for WCAG 2.1 AA accessibility compliance and actionable remediation guidance.

Community
Intermediate
pnewsampnewsam
1

compliance-accessibility

Review web interfaces against WCAG 2.2 accessibility requirements.

Community
Intermediate