Skills
.Work. You
Rest

react-conventions

Community

Build React UIs with strict Figma Make & ShadCN/UI rules.

Design & Creative#React#frontend#UI/UX#design system#Tailwind CSS#conventions#ShadCN/UI#Figma Make
Authornera0875
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-conventions
Download link: https://github.com/nera0875/AGI/archive/main.zip#react-conventions

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository