Skills
.Work. You
Rest

rule-frontend-components

Community

Enforce consistent React component patterns.

Software Engineering#typescript#frontend#react#code-quality#guidelines#best-practices#component-patterns
Authorbtabaska
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: rule-frontend-components
Download link: https://github.com/btabaska/simpler-grants-documentation-automation/archive/main.zip#rule-frontend-components

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.