UI Skills

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.

Similar tools

solo-skills

A collection of agent skills for solo-operation automation

Similar tools

solo-skills

GitHub

Builder.io Figma to Code

Builder.io

Refactoring UI Skills

Get the week's signal by email, every Saturday.

Related insights

Investing the Time AI Saves in Your Team’s Judgment

Design Rules Need to Reach the Product to Be Useful

Similar tools

solo-skills

GitHub

Builder.io Figma to Code

Builder.io

Refactoring UI Skills

Get the week's signal by email, every Saturday.