playbooks

home / skills / sickn33 / antigravity-awesome-skills / ui-skills

ui-skills skill

/skills/ui-skills

This skill provides opinionated, evolving interface constraints to guide agents in building robust UI patterns and consistent frontends.

This is most likely a fork of the ui-skills skill from xfstudio
npx playbooks add skill sickn33/antigravity-awesome-skills --skill ui-skills

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
650 B
---
name: ui-skills
description: "Opinionated, evolving constraints to guide agents when building interfaces"
source: "https://github.com/ibelick/ui-skills"
risk: safe
---

# Ui Skills

## Overview

Opinionated, evolving constraints to guide agents when building interfaces

## When to Use This Skill

Use this skill when you need to work with opinionated, evolving constraints to guide agents when building interfaces.

## Instructions

This skill provides guidance and patterns for opinionated, evolving constraints to guide agents when building interfaces.

For more information, see the [source repository](https://github.com/ibelick/ui-skills).

Overview

This skill provides a set of opinionated, evolving constraints to guide agents when designing and implementing user interfaces. It encodes interface patterns, consistency rules, accessibility guardrails, and interaction conventions so agents produce cohesive UI code and designs. The goal is to reduce iteration, prevent common anti-patterns, and speed safe, production-ready UI delivery.

How this skill works

The skill supplies a living set of constraints and patterns that agents consult during interface planning, component selection, and code generation. Constraints cover layout, accessibility, responsive behavior, state management, and security considerations, and can be adapted as requirements change. Agents apply these rules to propose component structures, generate code snippets, and flag violations for review.

When to use it

  • Generating component code for React, Vue, or similar frameworks with consistent conventions
  • Enforcing accessibility and responsive behavior in automated UI proposals
  • Evaluating third-party components or design tokens against project constraints
  • Automating UI audits and pointing out security or usability risks
  • Iterating on interface designs while keeping a stable design language

Best practices

  • Publish constraints as discrete, versioned rules so agents can target a specific rule set
  • Keep constraints opinionated but minimal—favor rules that prevent major defects
  • Combine automated rule checks with human review for ambiguous UX decisions
  • Include measurable acceptance criteria (aria roles, breakpoints, contrast ratios)
  • Test generated components in real scenarios and update constraints based on failures

Example use cases

  • Ask an agent to scaffold a responsive form component that meets accessibility thresholds
  • Run an automated audit that flags inconsistent spacing, color contrast, or missing labels
  • Generate a set of standardized buttons and export design tokens for a component library
  • Have an agent refactor legacy UI snippets to conform to a modern interaction pattern
  • Create guardrails that prevent insecure inline event handlers or unsafe DOM usage

FAQ

Can I customize the constraints for my project?

Yes. Constraints are designed to be adapted—version them and adjust rules to match your design language and technical stack.

How does this skill handle accessibility requirements?

It includes concrete accessibility checks (labels, roles, keyboard focus, contrast) and recommends fixes when violations are detected.