rule-frontend-components

Enforce React component conventions for frontend/src/components files.

1|1|Updated Mar 31, 2026

Search Tags:#typescript #frontend #react #code-quality #guidelines #best-practices #component-patterns

Ready to run

npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill rule-frontend-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: rule-frontend-components
Source: https://github.com/btabaska/simpler-grants-documentation-automation/tree/main/.claude/skills/rule-frontend-components
Command: npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill rule-frontend-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This rule codifies frontend component guidelines to reduce architectural drift and ensure consistent React component quality across the codebase.

Core Features & Use Cases

Enforces domain-specific directory structure for components: root-level general components, feature-specific subdirectories.
Prevents barrel/index.ts files to improve explicit imports.
Encourages destructured props with proper TypeScript annotations and avoids React.FC usage.
Promotes server components by default with client usage only when needed, and uses promise props for non-blocking data.
Provides guard rails via custom hooks, wrappers, and i18n integration.

Quick Start

Review and apply the frontend component rules when editing files under frontend/src/components.

Frequently Asked Questions about rule-frontend-components

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

FAQPage Schema

How do I enforce consistent React component patterns in a TypeScript codebase?▼

You can enforce consistent React component patterns by applying codified frontend guidelines that govern directory structure, TypeScript prop destructuring, and server component defaults to prevent architectural drift across your codebase.

Why should I avoid barrel index.ts files when structuring React components?▼

Avoiding barrel index.ts files enforces explicit imports without re-exports, which clarifies dependency graphs and prevents circular dependencies within React component directories and feature subdirectories.

What is the best way to structure React components for domain-specific features?▼

The best way to structure React components is placing general components at the root directory and feature-specific components in dedicated subdirectories, ensuring clear separation of concerns and consistent component organization.

Should I use React.FC for typing component props in TypeScript?▼

No, you should avoid React.FC usage in TypeScript. Instead, define explicit TypeScript type annotations and use prop destructuring to ensure clear, predictable component prop typing and enforce code quality.

When do I need client-side wrappers for React server components?▼

You need client-side wrappers for React server components only when client-side interactivity is required, keeping server components as the default and using promise props for non-blocking data integration.

Can I integrate i18n and USWDS within standard React component guidelines?▼

Yes, you can integrate i18n and USWDS by following established component conventions that provide guard rails through custom hooks and wrappers, ensuring consistent internationalization and design system usage.