skills.rest
MORTAKI0
MORTAKI0COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-system

Standardize React UI development with reusable components and design tokens.

Updated Jan 1, 2026
Search Tags:#accessibility#react#components#design-principles#style-guide#design-tokens#ui-system
One-click install
npx skills add https://github.com/MORTAKI0/doittimer --skill frontend-ui-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-system
Source: https://github.com/MORTAKI0/doittimer/tree/main/.codex/skills/frontend-ui-system
Command: npx skills add https://github.com/MORTAKI0/doittimer --skill frontend-ui-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams often duplicate components across apps, leading to visual drift and inconsistent UX. This Skill provides a standardized, accessible component library and design-token driven patterns to ensure cohesive interfaces at scale.

Core Features & Use Cases

  • Reusable primitives under src/shared/ui for inputs, buttons, and forms
  • Structured guidance for page composition and responsive design
  • Design tokens and best practices ensuring accessibility and consistency across features
  • Use Case: A product page that needs a consistent header, form fields, and tables without custom styling

Quick Start

Start by importing shared UI primitives from src/shared/ui into your pages and gradually replace bespoke components with standardized ones, prioritizing accessibility and responsive layout.

Frequently Asked Questions about frontend-ui-system

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

FAQPage Schema
How do I build consistent React UI components across multiple apps?▼

You can ensure accessibility by implementing design-token driven primitives that follow prescribed component rules, ensuring responsive and accessible behaviors across all UI elements.

What are design tokens and how do they standardize UI styling?▼

To standardize UI styling, apply design tokens across reusable primitives under src/shared/ui, replacing bespoke components to enforce accessibility and responsive layout consistency.

Does this UI system work for forms and page composition in React?▼

This system supports page composition by offering structured guidance for responsive design, allowing you to build consistent headers, form fields, and tables using shared UI primitives.

What's the best way to migrate bespoke React components to a shared UI system?▼

Start by importing shared UI primitives into your pages and gradually replace bespoke components with standardized ones, prioritizing accessibility and responsive layout to ensure scalable patterns.

Why does visual drift happen in UI components and how can I prevent it?▼

You can prevent visual drift by adopting a standardized component library that applies design tokens and best practices, ensuring accessibility and consistency across all features.

Related Skills

Explore More Design & Creative Skills→
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced
wredziowredzio

using-ui-components

Compose complex UIs from predefined UI primitives in the components/ui package.

Community
Basic
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced