frontend-react

Enforce React component patterns and styling conventions for Vite and TypeScript projects.

Updated Nov 8, 2025

Search Tags:#typescript #frontend #react #pnpm #vite #scss #antd

Ready to run

npx skills add https://github.com/10knamesmore/dotfiles --skill frontend-react-10knamesmore

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-react
Source: https://github.com/10knamesmore/dotfiles/tree/main/general/skills/frontend-react
Command: npx skills add https://github.com/10knamesmore/dotfiles --skill frontend-react-10knamesmore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps software teams enforce a consistent style and architecture for React components in a unified stack (React + Vite + TypeScript + Ant Design + Sass), reducing stylistic drift and onboarding time.

Core Features & Use Cases

Enforces TS-style annotations and explicit Props typing for components.
Prohibits using React.FC / React.FunctionComponent; promotes arrow function components.
Standardizes import patterns for SCSS modules and ensures consistent naming and styling across the codebase.
Use Case: A new UI team member can scaffold a new component and automatically adhere to the project’s conventions, improving readability and maintainability.

Quick Start

Create a new component following the conventions: define Props with a TypeScript type, implement as an arrow function component, and import SCSS styles as modules.

Frequently Asked Questions about frontend-react

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

FAQPage Schema

How do I enforce consistent React component patterns and styling conventions in a Vite project?▼

To enforce consistent React component patterns, this skill automates checking for TypeScript type definitions, arrow function components, and SCSS module imports across a Vite codebase. It prohibits React.FC and standardizes Ant Design styling conventions for your UI team.

Why should I use arrow function components instead of React.FC in TypeScript?▼

Arrow function components are promoted over React.FC because they provide clearer explicit Props typing and avoid the implicit children typing issues associated with React.FunctionComponent. This standardization improves component readability and maintainability across your React project.

Can I use this skill to standardize SCSS module imports and Ant Design styling?▼

Yes, this skill standardizes SCSS module imports and ensures consistent naming alongside Ant Design components. It automates enforcing unified styling conventions across your React and Sass codebase, reducing stylistic drift.

Does this skill work with a React, Vite, TypeScript, and pnpm stack?▼

Yes, this skill explicitly supports projects using React, Vite, TypeScript, pnpm, and Ant Design. It enforces tooling consistency with pnpm and validates TypeScript type definitions for your components.

What is the best way to scaffold a new React component following project conventions?▼

The best way to scaffold components is to define Props with a TypeScript type, implement the component as an arrow function, and import SCSS styles as modules. This ensures new UI components automatically adhere to your project's architectural conventions.