Top 5 UI Skills for Design Engineers Using AI Agents

X postKiyotakaResource

Kiyotaka (@SubhanHQ) highlights five curated skill rulebooks designed to enhance how AI coding agents handle UI craft, animation, accessibility, and visual polish.

Key points

  1. "emil-design-eng" codifies Emil Kowalski's frontend philosophy, enforcing Before/After review tables and strict animation rules.
  2. "make-interfaces-feel-better" by Jakub Krehel targets micro-interactions, concentric border radii, optical alignment, hit areas, and font settings.
  3. "12-principles-of-animation" by Raphael Salaja adapts classic Disney principles for UI motion (sub-300ms timings, custom easing, and staging constraints).
  4. "fixing-accessibility" by ibelick reviews and patches accessible names, keyboard navigation, focus traps, and WCAG criteria using targeted fixes.
  5. The fifth recommended skill references shadcn UI workflows.
  6. Skills can be installed into agent workflows via the CLI command "npx skills add".

Why it matters

AI coding assistants frequently generate functional code that lacks visual nuance and polish. Feeding them curated design-engineering heuristics ensures consistent, high-standard frontend output.

Analysis

As agentic coding tools become standard in software development, steering models through machine-readable guidelines becomes essential. The ui-skills.com repositories show how community experts turn frontend best practices—such as avoiding "transition: all", tuning cubic-bezier curves, and ensuring touch targets—into enforceable guardrails that agents follow during code generation and code review.

Original post

Kiyotaka

@SubhanHQ · 11 September 2026

These are top 5 ui skills for design engineers using agents : 1. emil-design-eng t.co/50EqICOW5V 2. make-interfaces-feel-better t.co/2srfmWS8Nv 3. 12-principles-of-animation t.co/4xuBfnR25M 4. fixing-accessibility t.co/MgLkbjxAAC 5. shadcn t.co/uRd9Ursq7S

583 likes5 replies986 bookmarks39.5k views

View on X
More posts in the thread (2)
  1. U'll also like this similar ui's t.co/GFURQu36eP
  2. Made this nft ui too t.co/IPLZ1h7HVG
Selected replies (3)
  • @moelkholy95 @SubhanHQ You haven’t tried this yet ? Level up your agent’s front-end game with the Niblet MCP: → Sign up at t.co/B87eQm80qP → Create your token → Grab your pre-configured MCP prompt → Drop it into your agent Instant UI magic. ⚡ Pro tip: Ask your agent to use Niblet on any
  • @abd_mukadam @SubhanHQ Bro how your post got this much reach with almost 0 comments?
  • @I_am_SamY01 @SubhanHQ i love my fyp 😭

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • X post:Kailash

    UI Skills: Curated Guidelines and Prompts for Higher-Quality Interfaces

    Kailash highlights five specialised skills from ui-skills.com designed to help developers and AI coding agents build better frontend interfaces, fluid physics-based animations, refined shadows, and accessible components.

    7.3kbookmarks248.3kviews

    Web development· Resource

  • X post:Adham Dannaway

    Agent Design Skills: UI Polish and Accessibility for AI Agents

    Designer Adham Dannaway highlights a curated set of agent design skills created by Jakub Krehel. The collection equips AI agents with specific domain knowledge covering UI polish, typography, OKLCH colours, accessibility, layout, and UX copy.

    492bookmarks28.6kviews

    AI & LLMs· Resource

  • Link:Emil Kowalski

    Emil Kowalski's Design Engineering Skill for AI Agents

    Emil Kowalski has published an installable agent skill based on his design engineering philosophy. It aims to guide AI coding assistants in building polished, detail-oriented user interfaces.

    AI & LLMs· Resource

  • Link:Jakub Krehel

    Skills: Agent-Based UI and UX Optimisation Toolkit

    Jakub Krehel introduces a collection of agent skills designed to help developers refine user interfaces across typography, OKLCH colours, accessibility, layout, and UX writing.

    AI & LLMs· Tool

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent Skills for UI and Design Engineering

    jakubkrehel/skills is a curated collection of agent skills designed to equip AI assistants such as Claude Code with best practices for interface design, typography, accessibility, and UI engineering.

    5.8kstarsMarkdown

    AI & LLMs· Tool

  • X post:Adham Dannaway

    Design Skills for AI Agents: Equipping Coding Agents with UX and UI Knowledge

    Adham Dannaway highlights 'Design Skills for AI Agents', an open collection developed by Carlos Cuéllar. The repository provides structured design heuristics, WCAG 2.2 accessibility rules, and design system frameworks for tools such as Claude Code, Cursor, and Codex.

    100bookmarks5.2kviews

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.