frontend-components

Name: frontend-components
Availability: InStock
Author: Kwon

Enforce React component structure, import order, and Props typing.

Updated Aug 27, 2026

Search Tags:#typescript #react #code-style #frontend-patterns #import-order #component-architecture

Ready to run

npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-components-kwondongkyun

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-components
Source: https://github.com/Kwondongkyun/claude-code-settings/tree/main/skills/frontend-components
Command: npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-components-kwondongkyun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces consistent React component structure and import rules across a codebase.

Core Features & Use Cases

Enforces directory/index.tsx pattern for components
Enforces proper import order and Props type definitions
Encourages reliable conditional rendering patterns
Use case: when creating or modifying components in a large React app to maintain uniform conventions.

Quick Start

Create a new component under components/ following the directory/index.tsx rule; activation will apply the enforced patterns to your project.

Frequently Asked Questions about frontend-components

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

FAQPage Schema

How do I enforce consistent React component architecture and import order?▼

To enforce consistent React component architecture, apply standardized directory/index.tsx patterns, import ordering rules, and Props typing definitions across your codebase during component creation or modification workflows.

What is the directory/index.tsx pattern for structuring React components?▼

The directory/index.tsx pattern structures each React component inside its own dedicated directory folder, using an index.tsx file as the entry point to maintain uniform component architecture and simplify import paths.

How do I standardize Props type definitions and conditional rendering in a React app?▼

Standardize Props type definitions and conditional rendering by applying enforced frontend patterns that dictate consistent TypeScript typing structures and reliable conditional rendering logic when creating or modifying React components.

Can I use this to maintain uniform React conventions in a large codebase?▼

Yes, you can maintain uniform React conventions in a large codebase by activating enforced patterns for component creation, which apply consistent directory/index.tsx structures, import ordering, and Props typing across the project.

Do I need TypeScript to enforce React component import ordering and structure rules?▼

TypeScript is used to enforce React component structure and import ordering rules, ensuring proper Props type definitions and reliable frontend patterns are applied consistently across your codebase during component modification.