frontend-folder-creation

Organize React Native feature folders with kebab-case files and barrel exports.

Updated Jun 14, 2024

Search Tags:#typescript #frontend #code organization #react native #barrel exports #feature folders #kebab case

Ready to run

npx skills add https://github.com/Yimura/RemoteUnlockApp --skill frontend-folder-creation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-folder-creation
Source: https://github.com/Yimura/RemoteUnlockApp/tree/main/.claude/skills/frontend-folder-creation
Command: npx skills add https://github.com/Yimura/RemoteUnlockApp --skill frontend-folder-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps maintain a consistent and predictable feature-folder structure in the RemoteUnlock app, reducing import chaos, misplaced files, and brittle barrel exports.

Core Features & Use Cases

Organizes feature-local components, hooks, types, and utils into the correct subfolders.
Enforces kebab-case file names and named re-exports so feature public surfaces stay explicit.
Prevents empty folders, cross-feature leakage, and misplaced navigator or shared code.
Use it when creating a new frontend feature, renaming files, or fixing a messy feature directory layout.

Quick Start

Ask the assistant to organize the requested RemoteUnlock frontend feature files into the correct feature folders and barrel exports.

Frequently Asked Questions about frontend-folder-creation

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

FAQPage Schema

How do I organize feature folders and barrel exports in a React Native app?▼

To organize feature folders in a React Native app, place feature-local components, hooks, types, and utils into specific subfolders. Enforce kebab-case filenames and use named re-exports in barrel files to keep the feature's public surface explicit and predictable.

Why does cross-feature code leakage happen in frontend feature folders?▼

Cross-feature code leakage in frontend feature folders happens when shared or navigator code is misplaced inside feature-scoped directories. Separating cross-feature code from feature-local files prevents import chaos and keeps dependencies strictly organized within the correct boundaries.

What is the best way to structure TypeScript barrel exports for feature folders?▼

The best way to structure TypeScript barrel exports for feature folders is to use named re-exports. This ensures the feature's public surface remains explicit, prevents empty folders, and keeps feature-scoped code separated from cross-feature utilities.

Can I use PascalCase filenames for React Native feature-local components and hooks?▼

No, you should not use PascalCase filenames for React Native feature-local components and hooks. The feature folder structure requires kebab-case filenames to maintain consistency and predictability across the entire frontend codebase.

How do I fix a messy React Native feature directory layout?▼

To fix a messy React Native feature directory layout, reorganize files by moving feature-local components, hooks, types, and utils into their correct subfolders. Remove empty folders and ensure barrel exports only contain populated, named re-exports.