skills.rest
Aias
AiasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

rcr-frontend

Standardize React component development with Tailwind tokens and Radix primitives.

9|1|Updated Oct 31, 2024
Search Tags:#frontend#react#components#tailwind#shadcn#radix#ui-guidelines
One-click install
npx skills add https://github.com/Aias/red-cliff-record --skill rcr-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rcr-frontend
Source: https://github.com/Aias/red-cliff-record/tree/main/.agents/skills/rcr-frontend
Command: npx skills add https://github.com/Aias/red-cliff-record --skill rcr-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Component development within Red Cliff Record lacks standardized patterns for component structure, styling, and tooling, leading to inconsistency and maintenance overhead.

Core Features & Use Cases

  • Recommends component organization under src/app/components/ with kebab-case naming.
  • Provides styling guidance using Tailwind CSS v4 and design tokens from src/app/styles/theme.css, while avoiding legacy tokens.
  • Outlines usage patterns for Radix and Shadcn primitives, icon conventions (Lucide icons), and form handling with TanStack Forms.
  • Helps new contributors steadily align with project conventions for faster onboarding and fewer UI regressions.

Quick Start

Follow these frontend guidelines whenever creating or updating React components in the Red Cliff Record project.

Frequently Asked Questions about rcr-frontend

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

FAQPage Schema
How do I standardize React component structure and naming conventions?▼

Standardize React component structure by organizing components under src/app/components/ using kebab-case naming conventions. This approach enforces predictable file organization, proper imports, and maintainable frontend code patterns across your project.

What's the best way to apply Tailwind CSS styling tokens and avoid legacy patterns?▼

Apply Tailwind CSS v4 styling using design tokens from src/app/styles/theme.css while avoiding legacy tokens. This ensures consistent styling, predictable theming, and prevents deprecated CSS patterns in your React components.

How do I use Radix and Shadcn UI primitives for component development?▼

Use Radix and Shadcn UI primitives by following established usage patterns for accessible, customizable component development. This enforces consistent UI behaviors, proper primitive integration, and avoids deprecated styling approaches.

Does this frontend tooling work with TanStack Forms and Lucide icons?▼

Yes, this frontend tooling supports TanStack Forms for form handling and Lucide icons for iconography. It outlines specific usage conventions for both tools to ensure consistent UX and predictable component behavior.

Why does my frontend component development lack consistency and maintainability?▼

Frontend component development lacks consistency without standardized patterns for component structure, styling, and tooling. Enforcing design tokens, proper imports, and avoiding deprecated patterns resolves maintenance overhead and UI regressions.

When do I need standardized frontend rules for React component development?▼

You need standardized frontend rules when creating or updating React components to ensure consistent UX. Following these guidelines enforces design token usage, proper organization, and predictable, maintainable frontend code across your project.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
vidzzavidzza

frontend-testing

Guide frontend test development with Vitest and Playwright for unit, E2E, visual, and accessibility testing.

Community
Intermediate
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic