skills.rest
zxj719
zxj719COMMUNITY
Explore all skills by this author →
GitHub

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Updated Jan 8, 2026
Search Tags:#ui#react#style#component#icons#tailwind
One-click install
npx skills add https://github.com/zxj719/ai_wolf_game --skill ui-change
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-change
Source: https://github.com/zxj719/ai_wolf_game/tree/main/.agents/skills/ui-change
Command: npx skills add https://github.com/zxj719/ai_wolf_game --skill ui-change

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps in modifying and standardizing the user interface components, including page entry points, style guidelines, and icon conventions.

Core Features & Use Cases

  • Component Mapping: Provides a clear overview of which UI components are located in which directories.
  • Style Guide Enforcement: Defines and enforces consistent styling using Tailwind CSS, including dark mode and border conventions.
  • Iconography Standards: Specifies the use of lucide-react for icons and provides an example of their implementation.
  • Use Case: A developer needs to update the styling of the login page and ensure all icons used throughout the application adhere to the project's standards.

Quick Start

Update the login page component styles to use the dark theme color palette.

Frequently Asked Questions about ui-change

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

FAQPage Schema
How do I standardize React UI components and styles using Tailwind CSS?▼

To standardize React UI components and styles, enforce a consistent styling system based on Tailwind CSS. This includes defining specific file locations for components and applying conventions for dark mode and borders across the application.

What is the best way to manage icon conventions in a React application?▼

Managing icon conventions in a React application is best achieved by standardizing visual elements with the lucide-react icon library. This enforces consistent iconography standards and provides clear implementation examples for all UI components.

How do I update a React page entry point to use a dark theme color palette?▼

Updating a React page entry point to use a dark theme color palette involves modifying the component styles according to your Tailwind CSS style guidelines. This ensures the visual elements adhere to the project's standardized dark mode conventions.

Can I use this approach to map UI components to specific directories?▼

Yes, you can map UI components to specific directories. This approach provides a clear overview of component locations, ensuring that page entry points and style guidelines are standardized and easily accessible within your React project.

Does standardizing UI components require predefined style guidelines for borders and dark mode?▼

Standardizing UI components does require predefined style guidelines for borders and dark mode. Enforcing these Tailwind CSS conventions ensures that all visual modifications across page entry points and components remain visually consistent.

Related Skills

Explore More Design & Creative Skills→
professor-moodyprofessor-moody
1

prowler-ui

Enforce Prowler UI conventions for Next.js, React, and Tailwind CSS projects.

Community
Intermediate
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic
mklozmkloz

frontend-product-ui-engineer

Build React UI components with Tailwind CSS and state management.

Community
Advanced
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced