skills.rest
josemartinrodriguezmortaloni
josemartinrodriguezmortaloniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-skills

Enforce opinionated UI constraints for frontend development with AI agents.

Updated Feb 21, 2026
Search Tags:#ui#accessibility#frontend#design system#animation#tailwind#ux
One-click install
npx skills add https://github.com/josemartinrodriguezmortaloni/opencode-config --skill ui-skills-josemartinrodriguezmortaloni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills
Source: https://github.com/josemartinrodriguezmortaloni/opencode-config/tree/main/skill/ui-skills
Command: npx skills add https://github.com/josemartinrodriguezmortaloni/opencode-config --skill ui-skills-josemartinrodriguezmortaloni

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 assistance.

Core Features & Use Cases

  • Enforces UI best practices: Ensures adherence to accessibility standards, animation guidelines, and performance optimizations.
  • Promotes consistent design: Guides the use of design tokens, component primitives, and layout systems.
  • Use Case: When requesting UI components, the AI will automatically apply these rules, ensuring that buttons have aria-labels, animations are performant, and accessible primitives are used.

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 accessibility and consistency when generating frontend components with AI?▼

You can enforce UI accessibility and consistency by applying opinionated constraints to your frontend tasks, ensuring AI agents automatically add aria-labels, use accessible primitives, and follow strict design system guidelines.

What are the best practices for building performant UI animations with AI coding assistants?▼

Best practices for performant UI animations involve applying predefined interaction and animation guidelines to your prompts, ensuring the AI generates optimized motion code that adheres to strict performance constraints.

How do I maintain a consistent design system using Tailwind when prompting AI for UI components?▼

To maintain a consistent design system with Tailwind, apply constraint rules that guide the AI to use design tokens, component primitives, and layout systems automatically whenever you request new UI elements.

Do I need specific UI frameworks to apply these accessibility and performance constraints?▼

No specific framework is required, as the constraints apply broadly to frontend development tasks involving UI frameworks and styling libraries, focusing on adherence to stack, component, and performance guidelines.

Why does my AI-generated UI lack consistent typography and layout structure?▼

AI-generated UI lacks consistent typography and layout when opinionated constraints are missing, but applying strict stack and layout guidelines ensures the AI adheres to standardized design tokens and layout systems.

Can I use these UI constraints for existing frontend projects or only new ones?▼

You can use these UI constraints for any frontend work in your conversation, applying the opinionated rules to both new component generation and existing UI modifications to ensure accessibility and performance.

Related Skills

Explore More Design & Creative Skills→
mrp4stenmrp4sten
3

tailwind-4

Standardize Tailwind styling by replacing inline var() and hex colors with cn() classes.

Community
Intermediate
allenlin90allenlin90
1

frontend-ui-components

Render and compose UI primitives from the @eridu/ui library.

Community
Intermediate
T1nker-1220T1nker-1220

mobile-ui-standards

Enforce mobile-first UI standards with compact spacing and touch-friendly targets.

Community
Basic
racciolyraccioly

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design consistency.

Community
Intermediate