skills.rest
AdelysAlberto
AdelysAlbertoCOMMUNITY
Explore all skills by this author →
Website𝕏@adelysalbertoGitHub

ui-library

Enforces React component library standards with CSS variables and folder structure rules.

1|Updated Jul 18, 2025
Search Tags:#typescript#react#design system#component library#css variables#dry#frontend standards
One-click install
npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill ui-library-adelysalberto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-library
Source: https://github.com/AdelysAlberto/md-configs-and-agents/tree/main/agents-hermes/skills/ui-library
Command: npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill ui-library-adelysalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend teams often duplicate buttons, inputs, and modals across pages, causing inconsistent styling and painful maintenance. This Skill enforces a single source of truth for reusable React components so design changes propagate everywhere from one place. ## Core Features & Use Cases - DRY Component Enforcement: Prohibits inline interactive elements in pages and requires all reusable UI to live in src/components/. - Mandatory Folder Structure: Each component must include a .tsx file, a .types.ts file, and a barrel index.ts export. - CSS Variable Tokens: Bans hardcoded colors and requires global tokens like --color-primary and --color-bg-card defined in index.css. - Base Component Catalog: Defines required variants and features for Button, Input, Dropdown, Modal, Toast, Image, Badge, and Card. - Use Case: When building a new React page, the Skill ensures you compose it from the centralized library instead of hand-coding a one-off button with hardcoded hex colors. ## Quick Start Apply the ui-library rules to review my new React page in src/pages and refactor any inline buttons or hardcoded colors into shared components using CSS variables.

Frequently Asked Questions about ui-library

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

FAQPage Schema
How do I structure a reusable React component folder?▼

Each component lives in its own folder under src/components/<ComponentName>/ containing a .tsx file for the functional component, a .types.ts file for TypeScript props, and an index.ts barrel export that re-exports both.

How to enforce CSS variables instead of hardcoded colors in React?▼

Define global tokens like --color-primary, --color-danger, and --color-bg-card in index.css, then reference them with var(--color-...) in components. Brand color changes then require editing only the variable definition.

What base components should a React design system include?▼

The required catalog covers Button with six variants and loading state, Input with label and error support, Dropdown/Select, Information and Confirmation Modals, Toast notifications via a useToast hook, lazy-loading Image, Badge, and Card.

Can I use class components with this React component standard?▼

No, class components and object-oriented patterns are explicitly prohibited. All components must be pure functional components kept simple and minimal without over-engineering.

When should I not create a new shared component?▼

The standard targets reusable interactive elements like buttons, inputs, modals, and toasts. One-off layout wrappers unique to a single view do not need to enter the shared library, but any repeated interactive element must.

Related Skills

Explore More Software Engineering Skills→
BangjjackBangjjack

figma-to-component

Convert Figma frames into React and TypeScript components using CVA and Radix patterns.

Official
Intermediate
bovinphangbovinphang
21

fec-react-project-standard

Define React and TypeScript project structure with module boundaries.

Community
Advanced
anyprotoanyproto
8.6k

dark-mode-check

Audit SCSS and TSX files for hardcoded colors and missing dark-mode variants.

Official
Intermediate
ToqsickToqsick

ui-factory

Orchestrate the full UI-Factory chain from color system to dashboard.

Community
Advanced