skills.rest
10knamesmore
10knamesmoreCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/10knamesmore/dotfiles --skill frontend-react-10knamesmore
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
daithang-organizationdaithang-organization

React + Ant Design Frontend Development

Builds a React frontend with TypeScript, Vite, and Ant Design.

Official
Intermediate
tomsoulage-dedalustomsoulage-dedalus

code-lint

Format and lint TypeScript, HTML, and SCSS files with Prettier and ESLint.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate
vecearvecear

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced