frontend-ui-system

Name: frontend-ui-system
Availability: InStock
Author: mortaki0

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

Ready to run

npx skills add https://github.com/MORTAKI0/doittimer --skill frontend-ui-system

💬 Prompt for ChatGPT / Claude Chat▼

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.