When should I use file-factory?

file-factory is useful in the following scenarios: • Standardized Component Creation: Rapidly scaffold new React components with integrated CSS Modules and Storybook stories to maintain UI library consistency. • Automated Hook & Context Generation: Create custom React hooks and state management providers (local or global) with pre-configured boilerplate and naming patterns. • Next.js Page Scaffolding: Generate Next.js pages within a monorepo structure, ensuring correct directory placement and automated barrel file exports. • Monorepo Architecture Enforcement: Use CLI-driven generation to prevent manual file structure errors and maintain a clean, scalable codebase in projects like Squareone.

file-factory

from majiayu000

How to use the file-factory CLI to create new React components, hooks, context providers, Next.js pages along with associated tests and storybook stories. ALWAYS use this tool instead of manually creating new components/hooks/contexts/pages to ensure consistent file structure and conventions.

⭐5stars🔀1forks📁View on GitHub🕐Updated Jan 11, 2026

When & Why to Use This Skill

The file-factory skill is a developer productivity tool designed to automate the scaffolding of React ecosystems. It leverages a specialized CLI to generate React components, hooks, context providers, and Next.js pages with built-in support for tests and Storybook stories. By enforcing standardized file structures and naming conventions, it eliminates manual boilerplate setup and ensures architectural consistency across complex monorepo environments.

Use Cases

Standardized Component Creation: Rapidly scaffold new React components with integrated CSS Modules and Storybook stories to maintain UI library consistency.
Automated Hook & Context Generation: Create custom React hooks and state management providers (local or global) with pre-configured boilerplate and naming patterns.
Next.js Page Scaffolding: Generate Next.js pages within a monorepo structure, ensuring correct directory placement and automated barrel file exports.
Monorepo Architecture Enforcement: Use CLI-driven generation to prevent manual file structure errors and maintain a clean, scalable codebase in projects like Squareone.

name	file-factory
description	How to use the file-factory CLI to create new React components, hooks, context providers, Next.js pages along with associated tests and storybook stories. ALWAYS use this tool instead of manually creating new components/hooks/contexts/pages to ensure consistent file structure and conventions.

name

file-factory

description

File Factory Skill

This skill describes how to create new React components, hooks, context providers, and Next.js pages in the Squareone monorepo using the @lsst-sqre/file-factory CLI tool. ALWAYS use this tool instead of manually creating new components/hooks/context providers/pages. It ensures consistent file structure, local barrel files, and CSS modules. After creation, the tool displays instructions for any manual steps needed (like updating root barrel files).

Tool Calling

Call from the monorepo root:

pnpm file-factory <type> <name> --package <package-name>

Package resolution supports multiple formats:

Short names: squared, squareone (recommended)
Full names: @lsst-sqre/squared
Directory paths: apps/squareone, packages/squared

If there's a conflict between an app and package with the same short name, apps take priority.

Documentation for specific project types

Reference these pages for CLI command documentation:

React components: components.md
React hooks: hooks.md
Global context providers: contexts.md
Next.js pages: pages.md

Package-Specific Conventions

For apps/squareone: squareone.md
For packages/squared: squared.md

Important Notes

Always use the tool - Never manually create component directories
Component-scoped contexts - Use --with-context, not the context command
Global contexts - Use the context command for app-wide state
Post-creation messages - For squared package, follow the displayed instructions to add exports to root barrel files
Naming conventions:
- Components: PascalCase (Button, DataTable)
- Hooks: camelCase with use prefix (useDebounce)
- Contexts: Input "Theme" → generates ThemeContext, ThemeProvider, useTheme

Example Workflows

Adding a component to squared (component library):

pnpm file-factory component Alert --package squared --with-story
# Creates: packages/squared/src/components/Alert/
# Displays instructions to add exports to src/components/index.ts and src/index.ts

Adding a complex component with state to squareone:

pnpm file-factory component Wizard --with-context --package squareone
# Creates: apps/squareone/src/components/Wizard/
# Includes: Wizard.tsx, WizardContext.tsx (with WizardProvider + useWizard)

Adding a global theme context to squareone:

pnpm file-factory context Theme --package squareone
# Creates: apps/squareone/src/contexts/ThemeContext/
# Use ThemeProvider in _app.tsx, useTheme() in components

After scaffolding files with file-factory, use these skills for implementation guidance:

component-creation - TypeScript patterns, CSS Modules conventions, and implementation details for components
squared-package - Architecture constraints for squared components (NO BUILD STEP, CSS Modules only)
design-system - Complete CSS variable and design token reference for styling
testing-infrastructure - Testing patterns for generated test files