skills.rest
lsst-sqre
lsst-sqreOFFICIAL
Explore all skills by this author →
WebsiteGitHub

file-factory

Scaffold React components, hooks, contexts, and Next.js pages with CSS Modules and tests.

2|1|Updated Jan 7, 2021
Search Tags:#React#scaffolding#CLI#monorepo#conventions#codegen#file-factory
One-click install
npx skills add https://github.com/lsst-sqre/squareone --skill file-factory
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: file-factory
Source: https://github.com/lsst-sqre/squareone/tree/main/.claude/skills/file-factory
Command: npx skills add https://github.com/lsst-sqre/squareone --skill file-factory

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams maintain consistent file structures and conventions when adding new React components, hooks, contexts, and Next.js pages in the Squareone monorepo, avoiding manual file setup and drift.

Core Features & Use Cases

  • Guaranteed structure: Generates components, hooks, contexts, and pages with standardized directories and barrel exports.
  • Consistency and conventions: Ensures CSS Modules by default and proper naming, tests, and stories where configured.
  • Guided post-creation steps: Provides instructions for any manual steps like updating root barrel files after generation.

Quick Start

From the monorepo root, run: pnpm file-factory <type> <name> --package <package-name>

Example workflow:

  • Create a new component: pnpm file-factory component Button --package squareone
  • Create a new hook: pnpm file-factory hook useDebounce --package squareone
  • Create a new page: pnpm file-factory page dashboard --package squareone

Then follow any on-screen post-creation messages to wire exports.

Frequently Asked Questions about file-factory

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

FAQPage Schema
How do I scaffold React components consistently across a monorepo?▼

Scaffold React components with file-factory to automatically generate standardized directories, CSS Modules, barrel exports, and tests. Run `pnpm file-factory component <name> --package <package-name>` from the monorepo root to enforce consistent structure across teams.

Can file-factory create hooks and context providers in a monorepo?▼

Yes. file-factory generates hooks, context providers, and Next.js pages alongside components. Use `pnpm file-factory hook <name>` or `pnpm file-factory context <name>` to create these with matching conventions, tests, and optional Storybook stories.

What does file-factory do to maintain file structure conventions?▼

file-factory automates React file creation with enforced conventions: CSS Modules, local barrel exports, test files, and optional stories. It eliminates manual setup drift and provides post-creation guidance for wiring exports in root barrels.

Does file-factory work with monorepos like Squareone?▼

Yes. file-factory is designed for monorepos including Squareone and Squared. It supports short and full package names, CLI invocation from the repository root, and guidance for integrating generated files into existing barrel export structures.

Why use file-factory instead of manually creating React component files?▼

file-factory eliminates repetitive boilerplate and enforces consistent naming, structure, and exports across teams. Manual creation leads to drift; automated scaffolding guarantees compliance with monorepo conventions and reduces onboarding friction for new components.

How do I set up barrel exports after using file-factory?▼

file-factory generates components with local barrel exports and provides on-screen instructions for manual wiring steps. Follow the post-creation messages to update root barrel files and integrate the new component into your package's export structure.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

pnpm-workspace-generator

Generate pnpm-workspace.yaml configuration files for pnpm monorepos.

Community
Basic
saddam-eng-techsaddam-eng-tech

react-scaffold

Generate a React TypeScript component folder with tests and Storybook stories.

Community
Intermediate
nrwlnrwl
1.4k

nx-plugins

Discover and install Nx plugins for monorepo frameworks.

Official
Intermediate
HechaoYannetHechaoYannet

test-helpers

Generate engine-specific test helpers and factories into tests/helpers.

Community
Intermediate