file-structure

Enforces directory placement rules for new files in a React TypeScript order-ui project.

Updated Aug 19, 2026
One-click install
npx skills add https://github.com/homeslands/trend-ui --skill file-structure-homeslands
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: file-structure
Source: https://github.com/homeslands/trend-ui/tree/main/app/order-ui/.claude/skills/file-structure
Command: npx skills add https://github.com/homeslands/trend-ui --skill file-structure-homeslands

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When adding features to the order-ui codebase, developers often place files in inconsistent locations, breaking the established architecture. This Skill ensures every new API endpoint, page, component, hook, store, schema, or type lands in the correct directory following the project's conventions. ## Core Features & Use Cases - Directory Convention Reference: Documents the full src/ layout covering api/, app/, components/, hooks/, stores/, schemas/, types/, and utils/. - Step-by-Step File Creation Rules: Provides ordered checklists for adding API endpoints, system pages, shared components, Zod schemas, Zustand stores, and TypeScript types, including required barrel exports and route registration. - Printing Subsystem Guidance: Distinguishes the browser print flow (EJS invoice template via window.print) from network printer flows (TSPL/ZPL or ESC/POS print jobs with failure handling). - Use Case: When asked to add a new printer configuration page, the Skill directs creating src/app/system/config files, registering the lazy import in router/loadable.tsx, adding the route constant, and wiring hooks and query keys. ## Quick Start Use the file-structure skill to decide where to place a new chef-area feature component and its hook in the order-ui project.

Frequently Asked Questions about file-structure

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

FAQPage Schema
How do I add a new page to a React app with lazy-loaded routes?

Create the page component under src/app/system/[feature]/index.tsx, register a React.lazy wrapper in src/router/loadable.tsx, add the route in src/router/index.tsx, and define the path constant in src/constants/route.ts.

How do I add a new API endpoint with TanStack Query hooks?

Add the function to src/api/[domain].ts and export it from src/api/index.ts. Then add a query key in src/constants/query.ts, create a hook in src/hooks/use-[domain].ts, and export it from src/hooks/index.ts.

Where should Zustand stores and their state types live in a React project?

Create the store in src/stores/[domain].store.ts and export it from src/stores/index.ts. Define the state interface first in src/types/[domain].type.ts so types stay centralized and reusable.

What is the difference between browser printing and network printer printing?

Browser printing uses src/utils/printer.ts to render an EJS invoice template and call window.print(). Network printing sends jobs over IP/Port to TSPL/ZPL or ESC/POS printers with pending, printing, printed, or failed states and re-print handling.

Why should a legacy HTTP client be avoided in a React codebase?

The project designates src/utils/http.unified.ts as the single HTTP client, while src/utils/http.ts is legacy and must not be used. Using one client keeps request handling, interceptors, and error behavior consistent.