file-factory

lsst-sqre's avatarfrom lsst-sqre

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.

⭐2stars🔀1forks📁View on GitHub🕐Updated Dec 29, 2025
[Code Generation]

When & Why to Use This Skill

The file-factory skill is a specialized developer tool designed to automate the scaffolding of React components, hooks, context providers, and Next.js pages. By utilizing a dedicated CLI, it ensures strict adherence to project-specific architectural conventions, including the automatic generation of associated tests, Storybook stories, and CSS modules, thereby eliminating manual setup errors and maintaining codebase consistency in complex monorepos.

Use Cases

  • Standardized Component Scaffolding: Automatically generate React component directories complete with TypeScript files, CSS modules, and Storybook stories to maintain UI consistency.
  • Boilerplate-Free State Management: Create global or component-scoped context providers and custom hooks with pre-configured naming conventions and directory structures.
  • Monorepo Page Orchestration: Rapidly deploy new Next.js pages within specific packages or apps, ensuring correct path resolution and barrel file updates.
  • Automated Testing Setup: Ensure every new feature starts with a testing foundation by automatically creating associated test files during the scaffolding process.
namefile-factory
descriptionHow 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.

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:

Package-Specific Conventions

Important Notes

  1. Always use the tool - Never manually create component directories
  2. Component-scoped contexts - Use --with-context, not the context command
  3. Global contexts - Use the context command for app-wide state
  4. Post-creation messages - For squared package, follow the displayed instructions to add exports to root barrel files
  5. 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