skills.rest
themadorg
themadorgOFFICIAL
Explore all skills by this author →
WebsiteGitHub

bedrud-fe-ui-foundation

Standardize React frontend UI with a reusable design system and shadcn/ui primitives.

6|1|Updated May 4, 2026
Search Tags:#consistency#frontend#react#tailwind#design-system#shadcn#ui-primitives
One-click install
npx skills add https://github.com/themadorg/bedrud --skill bedrud-fe-ui-foundation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bedrud-fe-ui-foundation
Source: https://github.com/themadorg/bedrud/tree/main/.agents/skills/bedrud-fe-ui-foundation
Command: npx skills add https://github.com/themadorg/bedrud --skill bedrud-fe-ui-foundation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Bedrud frontend lacks a cohesive, reusable design system. This skill provides a shared set of UI primitives and design tokens to ensure consistency, accessibility, and rapid development.

Core Features & Use Cases

  • Design system foundation with TailwindCSS v4 and shadcn/ui compliance.
  • Centralized UI primitives across the app, including buttons, inputs, cards, and more, to accelerate UI assembly.
  • Theme tokens for light/dark modes and semantic styling to maintain visual consistency across pages and apps/web.

Quick Start

Execute the integration by running the shadcn add command in the apps/web directory to install bedrud-fe-ui-foundation and wire the design system.

Frequently Asked Questions about bedrud-fe-ui-foundation

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

FAQPage Schema
How do I standardize React UI components with a shared design system?▼

You standardize React UI components by applying a shared design system that provides reusable UI primitives and theme tokens. This foundation ensures visual consistency, accessibility, and rapid development across your applications.

What is the best way to bootstrap shadcn/ui primitives in a React app?▼

The best way to bootstrap shadcn/ui primitives is by running an explicit add command in your apps/web directory. This installs the foundation, wiring up 25 curated UI primitives and theme tokens for immediate use.

Does this design system foundation work with TailwindCSS v4?▼

Yes, this design system foundation is fully compliant with TailwindCSS v4 and shadcn/ui. It provides centralized theme tokens that support light and dark modes for semantic styling across your React SPA.

How do I maintain visual consistency across multiple React SPAs?▼

You maintain visual consistency across multiple React SPAs by applying centralized theme tokens and a curated library of 25 UI primitives. This shared foundation accelerates UI assembly while standardizing styling.

Can I use this UI foundation to support light and dark mode themes?▼

Yes, you can use this UI foundation to support light and dark mode themes. It includes centralized theme tokens designed for semantic styling, ensuring visual consistency across different modes.

Related Skills

Explore More Design & Creative Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate
mostafasudomostafasudo
3

shadcn-ui

Automate discovery, installation, and customization of shadcn/ui components in React applications.

Community
Intermediate