skills.rest
silvio-l
silvio-lCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

premium-ui-ux

Enforce mobile-first, token-based design systems and accessibility across web, mobile, and desktop code.

Updated Aug 23, 2026
Search Tags:#accessibility#mobile-first#review#ui-ux#design-system#anti-slop#post-generation-review
One-click install
npx skills add https://github.com/silvio-l/copilot-skills --skill premium-ui-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: premium-ui-ux
Source: https://github.com/silvio-l/copilot-skills/tree/main/premium-ui-ux
Command: npx skills add https://github.com/silvio-l/copilot-skills --skill premium-ui-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents low-quality, generic, or inconsistent UI/UX by enforcing a mobile-first, product-specific design process, mandatory post-generation reviews, and token-based design systems across web, mobile, and desktop codebases. It eliminates unnoticed visual regressions by auto-triggering reviews on any UI-relevant change and ensures accessibility, dual-input support, and platform-appropriate patterns are applied consistently.

Core Features & Use Cases

  • Automatic Review Enforcement: Auto-triggers a mandatory review pass after any creation, refactor, or change to UI-relevant files (CSS, HTML, TSX/JSX, Dart, component templates, icons, animations).
  • Design-System Init & Enforcement: Detects or generates a minimum viable design system, prevents hardcoded colors/spacing, and ensures tokens are used project-wide.
  • Modes: CREATE / REVIEW / REFACTOR / DESIGN-SYSTEM: Produce production-grade UI, audit code with file:line findings, refactor to premium standards, and block UI generation until a design system exists.
  • Anti-Slop Protocol: Requires product-DNA discovery, anti-goals, component questioning, and a self-critique gate to avoid interchangeable, trend-driven designs.
  • Post-Generation Quality Check: Mandatory checks for mobile-first behavior, dual-input support, accessibility, spacing/tokens, platform guidelines, and premium-feel polish; fixes must be applied before presenting results.
  • Use Case: After a CI job emits updated component code, run the skill to auto-audit changes, fix token violations and accessibility issues, and produce a concise Quality Check report.

Quick Start

Invoke the premium-ui-ux skill to review and fix recent frontend changes, enforce the design system, and produce a mandatory quality-check summary.

Frequently Asked Questions about premium-ui-ux

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

FAQPage Schema
How do I enforce mobile-first UI/UX and prevent visual regressions in frontend code?▼

To enforce mobile-first UI/UX and prevent visual regressions, use an automated review process that triggers on changes to UI-relevant files like CSS, HTML, TSX, and Dart, applying mandatory post-generation checks for accessibility and platform-appropriate patterns.

How do I stop hardcoded colors and spacing in my design system?▼

To stop hardcoded colors and spacing in your design system, implement an enforcement protocol that detects or generates a minimum viable token-based design system, blocking UI generation until tokens are used project-wide.

What is an anti-slop protocol for UI design?▼

An anti-slop protocol for UI design requires product-DNA discovery, anti-goals, component questioning, and a self-critique gate to avoid interchangeable, trend-driven designs and ensure premium, product-specific user interfaces.

Can I auto-audit frontend changes for accessibility and dual-input support?▼

Yes, you can auto-audit frontend changes for accessibility and dual-input support by running a post-generation quality check that reviews modified component code, fixes token violations, and outputs a concise Quality Check report.

Does this UI review process work with both web and mobile frameworks?▼

Yes, this UI review process works with web, mobile, and desktop projects, enforcing high-quality UI and UX across generated or modified code in frameworks using CSS, HTML, TSX, JSX, and Dart.

When should I run a post-generation quality check on my UI code?▼

You should run a post-generation quality check on your UI code immediately after any creation, refactor, or change to UI-relevant files such as CSS, HTML, TSX, or Dart to ensure mobile-first behavior and premium-feel polish before presenting results.

Related Skills

Explore More Design & Creative Skills→
leonanpereirapintoleonanpereirapinto
1

tailwindcss

Consolidate Tailwind CSS v4 patterns for token-based theming and responsive layouts.

Community
Intermediate
dsteven12dsteven12
1

deliverable-qa

Validate HTML deliverables for accessibility, print readiness, and semantic structure.

Community
Advanced
hossain-khanhossain-khan

normalize

Normalize UI components to match design tokens and system standards.

Community
Intermediate
rbaumierrbaumier
4

ui-ux

Audit UI/UX designs and produce WCAG findings and prioritized fixes.

Community
Advanced