skills.rest
Muath2000
Muath2000COMMUNITY
Explore all skills by this author →
GitHub

ui-engineer

Develops React/Next.js/Tailwind UI components and design systems with WCAG 2.2 AA accessibility and RTL support.

Updated Feb 22, 2026
Search Tags:#ui#performance#accessibility#frontend#react#nextjs#tailwind
One-click install
npx skills add https://github.com/Muath2000/TradeStation --skill ui-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-engineer
Source: https://github.com/Muath2000/TradeStation/tree/main/.claude/skills/ui-engineer
Command: npx skills add https://github.com/Muath2000/TradeStation --skill ui-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation of high-quality, accessible, and performant user interfaces for modern web applications, ensuring consistency and developer efficiency.

Core Features & Use Cases

  • Component Development: Generates reusable UI components using React, Next.js, and Tailwind CSS.
  • Design System Implementation: Integrates and extends design systems like shadcn/ui.
  • Accessibility & Performance: Ensures WCAG compliance and optimizes for Core Web Vitals.
  • Use Case: Quickly scaffold a new feature's UI, including forms, tables, and navigation, adhering to the project's established design system and accessibility standards.

Quick Start

Create a new React component for a user profile card with avatar and name.

Frequently Asked Questions about ui-engineer

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

FAQPage Schema
How do I build production-grade React components with Next.js App Router and Tailwind CSS?▼

To build production-grade React components, this Skill generates reusable UI elements using Next.js App Router and Tailwind CSS, integrating shadcn/ui and Radix primitives to ensure design system consistency and rapid development.

Does this approach support WCAG 2.2 AA accessibility and RTL layouts?▼

Yes, this approach supports WCAG 2.2 AA accessibility and RTL layouts natively. It implements accessible UI components and responsive layouts, ensuring compliance with modern web accessibility standards and right-to-left language support.

What's the best way to scaffold a new SaaS feature UI with forms and tables?▼

The best way to scaffold a new SaaS feature UI is using this Skill to generate forms, tables, and navigation. It integrates TanStack Query and TanStack Table, adhering to your project's established design system and accessibility standards.

Can I optimize frontend performance and Core Web Vitals when using shadcn/ui?▼

Yes, you can optimize frontend performance and Core Web Vitals with shadcn/ui. This Skill implements specific frontend performance optimizations alongside the component development process to ensure fast loading and responsive user experiences.

How do I extend an existing design system without breaking accessibility compliance?▼

You extend an existing design system by generating new components that integrate shadcn/ui and Radix primitives. This Skill ensures all extensions maintain WCAG 2.2 AA compliance and responsive theming throughout the development process.

Are there limitations when implementing responsive layouts and theming for SaaS applications?▼

There are no specific limitations noted for implementing responsive layouts and theming in SaaS applications. The Skill is designed to handle these requirements natively using Tailwind CSS and established design system patterns.

Related Skills

Explore More Software Engineering Skills→
Tonybleything76Tonybleything76

senior-frontend

Scaffold React and Next.js projects with TypeScript, Tailwind CSS, and authentication.

Community
Advanced
MisonLMisonL
8

performance-profiling

Collect Core Web Vitals and Lighthouse scores to measure web performance.

Community
Intermediate
ggombeeggombee
13

jotai-tanstack

Manage React state with Jotai atoms and TanStack Query.

Community
Advanced
farmountainfarmountain
1

Frontend Expert Agent

Guide frontend framework selection and implementation for React, Vue, Angular, and Svelte.

Community
Advanced