UI Skills

Design engineering skills and UI playbook catalog

Open Open

Type: Website
Stars: 7.3K
Pricing: Free
Category: Build
Tags: ToolDesign EngineeringUI DesignAgent SkillsFrontend

A design engineering guide and interaction asset catalog that helps designers and AI agents work together to design high-quality user interfaces and improve their craft.

**Design quality and aesthetics assurance (frontend-design, impeccable)**: Helps move beyond generic AI aesthetics and turn distinctive, carefully planned concepts into production-level UI code.
**Micro-interactions and motion detail (better-ui,

improve-animations

)**: Systematically guides visual polish and natural motion details such as hover states, shadows, borders, parallax animation, and staggered effects.

**Design systems and component architecture (interface-design, frontend-ui-engineering)**: Covers component structure and responsive layout rules needed for dashboards, SaaS apps, and consistent UI systems.

**UX/UI guideline diagnostics (web-design-guidelines, rams)**: Reviews whether a design meets standards for design principles, accessibility, typography, spacing, and color contrast, then provides feedback.

**Practical design playbook (Playbook)**: Provides short, immediately applicable UX tips such as preventing layout shifts with `aspect-ratio`, balancing headings with `text-balance`, and keeping touch targets at least 44px.