skills.rest
nera0875
nera0875COMMUNITY
Explore all skills by this author →
GitHub

react-conventions

Enforce strict Tailwind CSS and ShadCN/UI conventions for React frontend development.

Updated Aug 23, 2026
Search Tags:#React#frontend#UI/UX#design system#Tailwind CSS#conventions#ShadCN/UI#Figma Make
One-click install
npx skills add https://github.com/nera0875/AGI --skill react-conventions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-conventions
Source: https://github.com/nera0875/AGI/tree/main/.claude/skills/react-conventions
Command: npx skills add https://github.com/nera0875/AGI --skill react-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI development, deviation from design systems, and misuse of component libraries can lead to fragmented user experiences and increased development overhead. This skill provides a strict guide for React frontend development.

Core Features & Use Cases

  • Strict Color Palette: Enforces a black/grey/white design system using semantic Tailwind CSS tokens, prohibiting hardcoded colors.
  • ShadCN/UI Component Usage: Mandates the use of 47 specific ShadCN/UI components and prohibits custom modifications within /components/ui/.
  • Tailwind CSS Rules: Defines strict rules for typography, spacing, and authorized utility classes.
  • Use Case: When developing a new React frontend feature, consult this comprehensive guide to ensure strict adherence to the Figma Make architecture, AGI design system, and ShadCN/UI component usage, guaranteeing visual consistency and maintainability.

Quick Start

Use the react-conventions skill to understand the strict color palette rules for Tailwind CSS.