Claude MarketplacesSubmit
ibelick avatar

Baseline Ui

ibelick/ui-skills

Baseline UI is a code skill that enforces design and accessibility constraints for Tailwind CSS projects to prevent common UI quality issues. It validates animation performance, typography hierarchy, component accessibility, and layout patterns across React components, either through real-time constraints during development or by reviewing files for violations with specific fixes. Teams building production interfaces with Tailwind and component libraries use it to maintain consistency and avoid AI-generated interface anti-patterns.

skills.sh installs
26K
GitHub stars
10.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add ibelick/ui-skills --skill baseline-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

Baseline UI

Enforces an opinionated UI baseline to prevent AI-generated interface slop.

How to use

  • /baseline-ui Apply these constraints to any UI work in this conversation.

  • /baseline-ui <file> Review the file against all constraints below and output:

    • violations (quote the exact line/snippet)
    • why it matters (1 short sentence)
    • a concrete fix (code-level suggestion)

Stack

  • MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
  • MUST use motion/react (formerly framer-motion) when JavaScript animation is required
  • SHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS
  • MUST use cn utility (clsx + tailwind-merge) for class logic

Components

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/ibelick/ui-skills
Categories
Frontend Development, Design & UI/UX

More from ibelick/ui-skills

All 5

Recommended

More Frontend Development
1onmax avatartresjsonmax/nuxt-skillsUse when building 3D scenes with TresJS (Vue Three.js) - provides TresCanvas, composables (useTres, useLoop), Cientos helpers (OrbitControls, useGLTF, Environme1.2Kskills.sh installs
2spences10 avatarsveltekit-structurespences10/svelte-skills-kitSvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending U1.1Kskills.sh installs
3plugin87 avatarimage-to-codeplugin87/ux-ui-agent-skillsTurn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, rad768skills.sh installs
4plugin87 avatara11y-auditplugin87/ux-ui-agent-skillsAudit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user want598skills.sh installs
5syncfusion avatarsyncfusion-blazor-rich-text-editorsyncfusion/blazor-ui-components-skillsImplements the Syncfusion Blazor Rich Text Editor (SfRichTextEditor) from Syncfusion.Blazor.RichTextEditor. Supports HTML, Markdown, and IFrame editor modes. Us385skills.sh installs
6syncfusion avatarsyncfusion-blazor-ribbonsyncfusion/blazor-ui-components-skillsImplement the Syncfusion Blazor Ribbon component. Use this skill when creating ribbon interfaces, implementing ribbon tabs/groups/items, adding file menus, hand374skills.sh installs