Logoskills for everything
Agent Skill
2/7/2026

ui-skills

UI quality enforcement skills from ibelick/ui-skills. Prevents AI-generated interface slop.

0
0xhoneyjar
1GitHub Stars
1Views
npx skills add 0xHoneyJar/rune

SKILL.md

Nameui-skills
DescriptionUI quality enforcement skills from ibelick/ui-skills. Prevents AI-generated interface slop.

name: ui-skills description: UI quality enforcement skills from ibelick/ui-skills. Prevents AI-generated interface slop. source: https://github.com/ibelick/ui-skills version: 2026-01 construct: glyph

UI Skills Reference

Collection of UI quality enforcement skills. Prevents AI-generated interface slop.

Skills

SkillPurposeWhen to Use
baseline-uiOpinionated UI constraintsAny UI work
fixing-accessibilityA11y issue fixesAccessibility review
fixing-motion-performanceAnimation performanceMotion/animation work
fixing-metadataSEO/metadata fixesPages, metadata

Key Constraints (from baseline-ui)

Stack

  • Use Tailwind CSS defaults
  • Use motion/react for JS animations
  • Use cn utility (clsx + tailwind-merge)

Components

  • Use accessible primitives (Base UI, React Aria, Radix)
  • Never rebuild keyboard/focus behavior by hand
  • Add aria-label to icon-only buttons

Animation

  • Never add animation unless explicitly requested
  • Only animate compositor props (transform, opacity)
  • Never animate layout properties

Interaction

  • Use AlertDialog for destructive actions
  • Use structural skeletons for loading
  • Never use h-screen, use h-dvh
  • Respect safe-area-inset for fixed elements

Integration with Glyph

These skills complement Glyph rules:

  • baseline-ui.md → rules/glyph/07-glyph-practices.md
  • fixing-accessibility.md → rules/glyph/03-glyph-protected.md
  • fixing-motion-performance.md → rules/glyph/05-glyph-animation.md
Skills Info
Original Name:ui-skillsAuthor:0xhoneyjar
Download
View on GitHub