skills.rest
ajelinek
ajelinekCOMMUNITY
Explore all skills by this author →
GitHub

react

Align React TypeScript components with repository conventions for CSS Modules and typed props.

Updated Apr 17, 2026
Search Tags:#typescript#accessibility#react#conventions#state-management#css-modules#component-design
One-click install
npx skills add https://github.com/ajelinek/skills-stash --skill react-ajelinek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/ajelinek/skills-stash/tree/main/react
Command: npx skills add https://github.com/ajelinek/skills-stash --skill react-ajelinek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Align React TypeScript code with this repository's conventions to ensure consistent component design and adherence to shared patterns.

Core Features & Use Cases

  • Enforces TypeScript-first React patterns: typed props, forwardRef, CSS Modules, and small, composable components.
  • Guides the use of shared foundations: service-backed state, route and auth composition, and accessible HTML semantics.
  • Useful for refactoring tasks to align new or legacy code with this project's UI patterns across components, hooks, and forms.

Quick Start

Create or refactor a React component to conform to this repo's conventions.

Frequently Asked Questions about react

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

FAQPage Schema
How do I standardize React component conventions in a TypeScript project?▼

To standardize React component conventions, enforce typed props, forwardRef usage, CSS Modules, and small composable shapes. This ensures consistent component design across TypeScript-first React codebases.

What is the best way to refactor legacy React code to use CSS Modules and TypeScript?▼

Refactoring legacy React code to use CSS Modules and TypeScript requires aligning component shape, typed props, and accessible HTML semantics. This approach enforces shared UI patterns during the transition.

How do I manage state in a React component using a service-backed approach?▼

Managing state with a service-backed approach in React involves routing state logic through service layers. This governs state architecture and ensures composition adheres to repository conventions.

Does this React convention guide require specific accessibility semantics for UI primitives?▼

Yes, this React convention guide requires accessible HTML semantics for UI primitives. It enforces governance rules for accessibility alongside component design and state management.

When should I use forwardRef in React TypeScript components?▼

Use forwardRef in React TypeScript components when building or refactoring UI primitives that need ref forwarding. This repository convention ensures components remain composable and typed correctly.

Related Skills

Explore More Software Engineering Skills→
brandonjjonbrandonjjon

tailwind-css-patterns

Apply Tailwind CSS patterns to React, Vue, Svelte, and HTML interfaces.

Community
Advanced
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced
mmianimmiani
63

kotlin-data-kmp-data-layer

Design Kotlin Multiplatform data layers with repositories, sources, suspend, and Flow APIs.

Community
Advanced
mindcockpit-aimindcockpit-ai
11

react-patterns

Enforce modern React and TypeScript coding standards via static analysis.

Official
Intermediate