skills.rest
Dzakiamriz22
Dzakiamriz22COMMUNITY
Explore all skills by this author →
GitHub

refactor-ui

Refactor React and TailwindCSS UI components for accessibility and consistency.

1|Updated Jul 15, 2026
Search Tags:#typescript#ui#accessibility#refactoring#code-quality#tailwind
One-click install
npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill refactor-ui-dzakiamriz22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor-ui
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/refactor-ui
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill refactor-ui-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses technical debt and design inconsistencies by systematically refactoring UI components to meet high-quality standards without altering their core functionality.

Core Features & Use Cases

  • Automated Refactoring: Applies fixes for accessibility, dark mode, and performance based on audit feedback.
  • Component Optimization: Splits bloated components and extracts logic to improve maintainability.
  • Use Case: After a design audit identifies a component as having poor accessibility and inconsistent spacing, use this skill to automatically apply semantic HTML, ARIA attributes, and standardized spacing tokens.

Quick Start

Use the refactor-ui skill to improve the accessibility and code structure of the current component.

Frequently Asked Questions about refactor-ui

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

FAQPage Schema
How do I refactor React components to meet WCAG accessibility standards?▼

Refactor React components for WCAG accessibility by applying semantic HTML and ARIA attributes. This skill systematically updates UI components to fix poor accessibility without altering their core functionality.

What's the best way to split bloated React and TailwindCSS components?▼

Split bloated React and TailwindCSS components by extracting internal logic into smaller, maintainable units. This skill performs component optimization to improve code quality and enforce type safety.

Can I normalize responsive layouts and design inconsistencies in an existing TailwindCSS codebase?▼

Yes, you can normalize responsive layouts in an existing TailwindCSS codebase. This skill applies standardized spacing tokens and fixes design inconsistencies identified during a UI audit.

Does this UI refactoring process enforce TypeScript type safety?▼

Yes, UI refactoring enforces TypeScript type safety. The process applies systematic component splitting and type safety enforcement to existing React codebases requiring cleanup and performance optimization.

When do I need to refactor a frontend UI component for production quality?▼

Refactor a frontend UI component for production quality when a design audit identifies technical debt, poor accessibility, or inconsistent spacing. This skill addresses technical debt without altering core functionality.

Does refactor-ui work with existing React and TailwindCSS codebases?▼

Yes, refactor-ui works with existing React and TailwindCSS codebases. It applies cleanup, performance optimization, and responsive layout normalization to components requiring production-quality refactoring.

Related Skills

Explore More Software Engineering Skills→
ybbms777ybbms777
1

pattern-recognition-specialist

Analyze codebases for design patterns, anti-patterns, and duplication.

Community
Intermediate
jie023jie023
36

test-ui

Automate web UI testing with Playwright for layout, styles, and interactions.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

eslint-custom

Automate creation and publishing of custom ESLint rules and plugins.

Official
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate