How do I install the File Factory skill?

Run npx skillmds@latest add tomevault-io/file-factory in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is File Factory safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with File Factory?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is File Factory free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published File Factory?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

File Factory by tomevault-io — Agent Skill

Name: File Factory
Author: tomevault-io

File Factory

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. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

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

Related Skills

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: file-factorydescription: 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. Use when this capability is needed.---# File Factory SkillThis 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 CallingCall from the monorepo root:```bashpnpm 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 typesReference these pages for CLI command documentation:- React components: [components.md](components.md)- React hooks: [hooks.md](hooks.md)- Global context providers: [contexts.md](contexts.md)- Next.js pages: [pages.md](pages.md)## Package-Specific Conventions- For apps/squareone: [squareone.md](squareone.md)- For packages/squared: [squared.md](squared.md)## Important Notes1. **Always use the tool** - Never manually create component directories2. **Component-scoped contexts** - Use `--with-context`, not the `context` command3. **Global contexts** - Use the `context` command for app-wide state4. **Post-creation messages** - For squared package, follow the displayed instructions to add exports to root barrel files5. **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):```bashpnpm 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:```bashpnpm 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:```bashpnpm file-factory context Theme --package squareone# Creates: apps/squareone/src/contexts/ThemeContext/# Use ThemeProvider in _app.tsx, useTheme() in components```## Related SkillsAfter 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---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lsst-sqre) — claim your Tome and manage your conversions.

Frequently asked questions