How does it handle imports and path aliases?

It automatically leverages jsconfig.json path aliases like @components, @hooks, and @lib to maintain clean, professional import statements.

How does the skill handle large components?

It follows a strict convention of keeping files under 50 lines. If a component grows too large, it suggests splitting it into smaller sub-components within a feature directory.

Can it help with data fetching states?

Yes, it implements a status component pattern, generating separate Loading, Error, and Success sub-components for use with hooks like useQuery.

What file naming conventions does this skill follow?

The skill uses PascalCase for file naming with a .jsx extension, ensuring the file name matches the component name exactly for architectural clarity.

Does it support Tailwind CSS styling?

Yes, it is designed to use Tailwind CSS utility classes along with specific project theme tokens for primary, accent, and muted colors.

Next.js Component Factory

Name: Next.js Component Factory
Author: spuneiartur

byspuneiartur

0•

Design Tools

Builds production-ready React components following strict project architecture and styling conventions.

The Component Factory skill streamlines React development by automating the creation of components that adhere to professional Next.js patterns. It handles everything from simple standalone widgets and feature-based directories to complex table cell renderers and admin CRUD sections, ensuring consistent naming, efficient barrel exports, and optimized image handling. By enforcing file length limits and modular sub-component patterns, it helps developers maintain a clean, scalable, and highly performant codebase.

Key Features

01Smart barrel export management for streamlined directory imports

02Pre-configured patterns for Table Cells and Admin feature modules

030 GitHub stars

04Advanced image optimization with lazy-loading and blur-up effects

05Automated PascalCase component generation with .jsx extensions

06Tailwind CSS integration using standardized project theme tokens

Use Cases

01Building reusable UI elements like modals, cards, and widgets with consistent styling

02Scaffolding feature-specific component directories with dedicated headers and lists

03Creating custom data table cell renderers for complex admin dashboards

Key Features

01Smart barrel export management for streamlined directory imports

02Pre-configured patterns for Table Cells and Admin feature modules

030 GitHub stars

04Advanced image optimization with lazy-loading and blur-up effects

05Automated PascalCase component generation with .jsx extensions

06Tailwind CSS integration using standardized project theme tokens

Use Cases

01Building reusable UI elements like modals, cards, and widgets with consistent styling

02Scaffolding feature-specific component directories with dedicated headers and lists

03Creating custom data table cell renderers for complex admin dashboards