skills.rest
flaming-codes
flaming-codesCOMMUNITY
Explore all skills by this author →
Website𝕏@CodesFlamingGitHub

web-frontend

Guide TypeScript React Router v7 frontend components with CVA patterns.

18|Updated Aug 27, 2022
Search Tags:#typescript#frontend#react#components#tailwind#design-system#cva
One-click install
npx skills add https://github.com/flaming-codes/crane-app --skill web-frontend-flaming-codes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-frontend
Source: https://github.com/flaming-codes/crane-app/tree/main/.github/skills/web-frontend
Command: npx skills add https://github.com/flaming-codes/crane-app --skill web-frontend-flaming-codes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle with inconsistent component quality and architecture in the /web project, leading to UI drift and maintenance pain. This skill provides a concise, opinionated guideline to align TypeScript, React Router v7, Tailwind CSS, and the CVA pattern across components.

Core Features & Use Cases

  • Guidance for Layout Components, Interactive Components, and Utility Components that enforce consistent design systems and accessibility.
  • Examples include Header, PageContent, PageContentSection, InfoPill, InfoCard, Tag, Separator, Prose, Anchors, and route-based patterns to accelerate frontend development.

Quick Start

Create a minimal, well-typed frontend component in the /web project following the CVA pattern.

Frequently Asked Questions about web-frontend

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

FAQPage Schema
How do I build type-safe React components with Tailwind CSS and CVA variants?▼

Type-safe React components with CVA variants are built by defining TypeScript props and applying the CVA pattern to manage variant styles, ensuring consistent design-system integration and scalable component architecture across your web app.

What is the best way to structure a Remix frontend design system?▼

A Remix frontend design system is best structured using opinionated guidelines for layout, interactive, and utility components, enforcing consistent architecture, dark-mode support, and accessible patterns across headers, pages, and reusable widgets.

How do I add dark mode support to React Router v7 components?▼

Dark mode support for React Router v7 components is added by utilizing the CVA pattern to define variant styles, allowing you to systematically toggle visual states and maintain accessibility across your design system.

Does this frontend component pattern work with TypeScript and Tailwind CSS?▼

Yes, this frontend component pattern explicitly works with TypeScript and Tailwind CSS, combining them with the CVA pattern to deliver minimal, professional UI components with type-safe props and scalable architecture.

How do I prevent UI drift when building layout components in React?▼

To prevent UI drift when building layout components in React, apply opinionated architecture guidelines and the CVA pattern to standardize type-safe props, ensuring consistent design-system quality and maintainability.

Related Skills

Explore More Software Engineering Skills→
mokbhaimokbhai
1

astro-developer

Initialize and deploy Astro projects with Tailwind and islands architecture.

Community
Advanced
HokageZHokageZ
2

shadcn-ui-expert

Develop accessible React components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
ArieGoldkinArieGoldkin

design-to-production

Convert HTML prototypes into React components with shadcn/ui and validation.

Community
Intermediate