skills.rest
GORKHAI
GORKHAICOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui

Standardize React components and UI states with Tailwind styling and design tokens.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#frontend#react#tailwind#design-tokens
One-click install
npx skills add https://github.com/GORKHAI/GORKH --skill frontend-ui-gorkhai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui
Source: https://github.com/GORKHAI/GORKH/tree/main/.kimi/skills/frontend-ui
Command: npx skills add https://github.com/GORKHAI/GORKH --skill frontend-ui-gorkhai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes and standardizes frontend UI work for GORKH across desktop and web, reducing visual drift and wiring effort in components, pages, and UI states.

Core Features & Use Cases

  • Unified UI patterns for React components, pages, and hooks across apps/desktop/src/ and apps/web/.
  • Consistent design language via tokens, Tailwind-based styling, and accessibility-friendly patterns.
  • Real-world scenarios include chat UIs, approval dialogs, provider settings, sign-in flows, billing pages, and download screens.

Quick Start

Implement a new React component in apps/desktop/src/ or apps/web/ that aligns with the shared UI conventions and design tokens.

Frequently Asked Questions about frontend-ui

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

FAQPage Schema
How do I standardize React components and visual language across desktop and web apps?▼

To standardize React components and visual language, apply shared UI conventions, Tailwind-based styling, and design tokens across your desktop and web source directories to reduce visual drift.

What is the best way to implement dark mode and accessibility in React UI components?▼

Implementing dark mode and accessibility in React UI components requires applying accessibility-friendly patterns, consistent design tokens, and Tailwind-based styling across your application's pages and shared components.

How do I unify UI patterns for chat, billing, and sign-in flows in a React application?▼

Unify UI patterns for chat, billing, and sign-in flows by standardizing React components, pages, and hooks with a consistent design language and reusable shared conventions.

Can I use Tailwind and design tokens to prevent visual drift across multiple React applications?▼

Yes, you can use Tailwind and design tokens to prevent visual drift by centralizing frontend UI work and enforcing consistent styling rules across your desktop and web applications.

Do I need shared UI conventions to build new React components in apps/desktop/src/ or apps/web/?▼

You need shared UI conventions to build new React components in these directories, ensuring they align with the established design tokens, Tailwind styling, and accessibility patterns.

Why does frontend UI quality drift across chat and settings pages without standardization?▼

Frontend UI quality drifts across chat and settings pages without standardization because separate components lack shared design tokens, unified styling, and consistent accessibility patterns, leading to fragmented visual language.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate
HeatMarieHeatMarie

design-guide

Document Paperclip UI components, design principles, and tokens for React projects.

Community
Intermediate
involvexinvolvex
1

react-patterns

Provide reusable React patterns for component composition, hooks, and state management.

Community
Advanced
benshapyrobenshapyro
9

react-patterns

Generate TypeScript React components and hooks with standardized patterns for state management and composition.

Community
Advanced