skills.rest
DanSnow
DanSnowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-skills

Enforce UI constraints for accessibility, performance, and design consistency.

2|Updated Nov 24, 2024
Search Tags:#ui#accessibility#frontend#design system#animation#ux
One-click install
npx skills add https://github.com/DanSnow/dotfiles --skill ui-skills-dansnow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/DanSnow/dotfiles/tree/main/private_dot_claude/skills/ui-skills
Command: npx skills add https://github.com/DanSnow/dotfiles --skill ui-skills-dansnow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a set of opinionated constraints and best practices to ensure consistency, accessibility, and performance when building user interfaces with AI agents.

Core Features & Use Cases

  • Enforces UI/UX Standards: Ensures adherence to modern design principles for web and application interfaces.
  • Component & Interaction Guidelines: Defines how to use animation, typography, and interactive elements.
  • Accessibility & Performance: Promotes accessible design and efficient, performant animations.
  • Use Case: When an agent is tasked with designing a new modal dialog, these constraints ensure it uses accessible primitives, appropriate animations, and follows the specified design language.

Quick Start

Apply these opinionated constraints to any UI work in this conversation.

Frequently Asked Questions about ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce UI consistency and accessibility when building interfaces with AI agents?▼

To enforce UI consistency and accessibility with AI agents, apply opinionated constraints covering design principles, component usage, and accessible primitives. This ensures generated interfaces adhere to modern standards, avoiding common pitfalls in UI development.

What's the best way to manage React animation libraries for performance and accessibility?▼

Managing React animation libraries for performance involves applying best practices for efficient animations and accessible interaction patterns. Enforcing specific constraints ensures animations remain performant and do not hinder the user experience.

Can I use Tailwind CSS with AI agents to maintain a design system?▼

Yes, you can use Tailwind CSS with AI agents to maintain a design system. The constraints enforce specific stack choices like Tailwind CSS, ensuring component usage and typography adhere to the defined design language and principles.

Why does my AI generated modal dialog lack accessible interaction patterns?▼

AI generated modal dialogs lack accessible interaction patterns without enforced constraints. Applying specific UI/UX standards ensures the agent uses accessible primitives and appropriate animations, following the specified design language.

Does this approach work for optimizing frontend typography and layout performance?▼

Yes, this approach works for optimizing frontend typography and layout performance. The enforced constraints cover typography, layout, and performance optimizations, ensuring efficient and consistent user interfaces across web applications.

Related Skills

Explore More Design & Creative Skills→
powxenvpowxenv

baseline-ui

Enforce UI constraints for Tailwind CSS, animations, and accessibility.

Community
Intermediate
andrescardonas7andrescardonas7

ui-skills

Enforce Tailwind CSS, framer-motion, and accessible component constraints for UI code.

Community
Intermediate
NolanPicNolanPic

Frontend Accessibility

Enforce WCAG compliance in frontend UI code with semantic HTML and ARIA.

Community
Basic
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate