skills.rest
BrunoSantanaDeveloper
BrunoSantanaDeveloperCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-validation

Detect UI anti-patterns in TSX, JSX, Vue, and Svelte files.

Updated Jan 27, 2026
Search Tags:#anti-patterns#frontend#css#quality#tailwind#ui-validation
One-click install
npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill ui-validation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-validation
Source: https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit/tree/main/skills/ui-validation
Command: npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill ui-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Automated detection of UI anti-patterns that degrade interface quality.

Core Features & Use Cases

  • Detects emojis used as icons, preventing inconsistent visuals.
  • Flags missing cursor-pointer on clickable elements to improve discoverability.
  • Flags hardcoded colors and non-conformant Tailwind usage to enforce design-system compliance.
  • Provides guidance and remediation steps for each violation.

Quick Start

Run the UI validation script against your project to validate anti-patterns.

Frequently Asked Questions about ui-validation

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

FAQPage Schema
How do I detect UI anti-patterns in my frontend project?▼

UI anti-patterns are detected by scanning frontend code files like TSX, JSX, Vue, and Svelte to identify issues such as emojis used as icons or missing cursor pointers on clickable elements.

Can I check my Tailwind CSS for hardcoded colors and improper theme usage?▼

Yes, Tailwind CSS validation flags hardcoded colors and non-conformant theme usage during UI validation, enforcing design-system compliance and providing remediation steps for each violation.

What is the best way to automate frontend UI quality checks?▼

Automating frontend UI quality checks involves running a validation script against your project that reports violations with severity levels and actionable guidance to polish the overall user experience.

Does the UI validation script work with Svelte and Vue files?▼

Yes, the UI validation script works with Svelte and Vue files, scanning these frontend frameworks to detect interface anti-patterns and report actionable remediation steps.

Why should I flag missing cursor-pointer on clickable elements?▼

Flagging missing cursor-pointer on clickable elements improves discoverability and UX by ensuring interactive elements provide clear visual feedback to users navigating the interface.

How do I fix emojis used as icons in my React components?▼

Fixing emojis used as icons requires identifying them through UI validation scans, which reports the violations and provides actionable guidance to replace them with consistent visual elements.

Related Skills

Explore More Design & Creative Skills→
camilooscargbaptistacamilooscargbaptista
7

frontend-review

Analyzes frontend code quality and generates prioritized reports for common defects and inefficiencies.

Community
Advanced
no-problem-devno-problem-dev
5

design-audit

Audit SwiftUI Views for Design System token compliance and accessibility.

Official
Intermediate
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
Chang-Shih-YungChang-Shih-Yung

health

Aggregate type checker, linter, and test results into a 0-10 composite score.

Community
Advanced