Advanced Create Platform

A project scaffolding and resource creation skill for generating boilerplate code, project structures, and component templates across multiple frameworks and languages.

When to Use

Choose Advanced Create Platform when:

• Bootstrapping new projects with consistent structure and configuration
• Generating component templates, API endpoints, or module boilerplate
• Setting up monorepo structures with shared configurations
• Creating reusable project templates for team standardization

Consider alternatives when:

• Using a specific framework's CLI — use create-react-app, nest new, or rails new directly
• Creating a single file — use your editor or a simple template
• Cloning an existing project structure — use git clone with template repos

Quick Start

Copy
# Create a new Next.js project with TypeScript
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir

# Generate a component with tests and styles
mkdir -p src/components/Button && cat > src/components/Button/index.tsx << 'EOF'
export { Button } from './Button';
export type { ButtonProps } from './Button';
EOF

Copy
const fs = require('fs');
const path = require('path');

class ProjectCreator {
  constructor(projectName, options = {}) {
    this.name = projectName;
    this.root = path.resolve(projectName);
    this.template = options.template || 'default';
    this.features = options.features || [];
  }

  createStructure() {
    const structure = {
      'src/': {
        'components/': {},
        'pages/': {},
        'utils/': {},
        'hooks/': {},
        'types/': { 'index.ts': 'export {};' },
        'styles/': { 'globals.css': '@tailwind base;\n@tailwind components;\n@tailwind utilities;' }
      },
      'tests/': {
        'setup.ts': "import '@testing-library/jest-dom';",
        'utils/': {}
      },
      'public/': {},
      '.github/': {
        'workflows/': {
          'ci.yml': this.generateCIConfig()
        }
      }
    };

    this.createDir(this.root);
    this.buildTree(this.root, structure);
    this.generateConfigs();
  }

  buildTree(basePath, tree) {
    for (const [name, content] of Object.entries(tree)) {
      const fullPath = path.join(basePath, name);
      if (name.endsWith('/')) {
        this.createDir(fullPath);
        if (typeof content === 'object') {
          this.buildTree(fullPath, content);
        }
      } else {
        fs.writeFileSync(fullPath, content);
      }
    }
  }

  createDir(dirPath) {
    fs.mkdirSync(dirPath, { recursive: true });
  }

  generateConfigs() {
    const configs = {
      'tsconfig.json': {
        compilerOptions: {
          target: 'ES2022',
          module: 'ESNext',
          moduleResolution: 'bundler',
          strict: true,
          jsx: 'react-jsx',
          paths: { '@/*': ['./src/*'] }
        },
        include: ['src/**/*', 'tests/**/*']
      },
      '.eslintrc.json': {
        extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended'],
        rules: { '@typescript-eslint/no-unused-vars': 'error' }
      },
      '.prettierrc': {
        semi: true,
        singleQuote: true,
        tabWidth: 2,
        trailingComma: 'es5'
      }
    };

    for (const [file, content] of Object.entries(configs)) {
      fs.writeFileSync(
        path.join(this.root, file),
        JSON.stringify(content, null, 2)
      );
    }
  }

  generateCIConfig() {
    return `name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npm run typecheck
      - run: npm test -- --coverage`;
  }
}

Core Concepts

Project Template Types

Template	Use Case	Key Files	Package Manager
Next.js App	Full-stack React	app/, next.config.js	npm/pnpm
Express API	REST/GraphQL backend	routes/, middleware/	npm
CLI Tool	Command-line applications	bin/, commands/	npm
Library	Reusable npm packages	src/, dist/, rollup.config	npm
Monorepo	Multi-package workspace	packages/, turbo.json	pnpm
Chrome Extension	Browser extensions	manifest.json, background/	npm

Component Generator

Copy
#!/bin/bash
# generate-component.sh - Create a new React component with all supporting files

COMPONENT_NAME=$1
COMPONENT_DIR="src/components/${COMPONENT_NAME}"

mkdir -p "$COMPONENT_DIR"

# Component file
cat > "${COMPONENT_DIR}/${COMPONENT_NAME}.tsx" << EOF
import { type FC } from 'react';

export interface ${COMPONENT_NAME}Props {
  className?: string;
}

export const ${COMPONENT_NAME}: FC<${COMPONENT_NAME}Props> = ({ className }) => {
  return (
    <div className={className}>
      <h2>${COMPONENT_NAME}</h2>
    </div>
  );
};
EOF

# Test file
cat > "${COMPONENT_DIR}/${COMPONENT_NAME}.test.tsx" << EOF
import { render, screen } from '@testing-library/react';
import { ${COMPONENT_NAME} } from './${COMPONENT_NAME}';

describe('${COMPONENT_NAME}', () => {
  it('renders without crashing', () => {
    render(<${COMPONENT_NAME} />);
    expect(screen.getByText('${COMPONENT_NAME}')).toBeInTheDocument();
  });
});
EOF

# Index barrel export
cat > "${COMPONENT_DIR}/index.ts" << EOF
export { ${COMPONENT_NAME} } from './${COMPONENT_NAME}';
export type { ${COMPONENT_NAME}Props } from './${COMPONENT_NAME}';
EOF

echo "Created component: ${COMPONENT_DIR}"

Configuration

Option	Description	Default
template	Project template to use	"default"
package_manager	npm, yarn, pnpm, or bun	"npm"
typescript	Enable TypeScript support	true
linting	Include ESLint configuration	true
testing	Testing framework: jest, vitest	"vitest"
ci	CI/CD configuration: github, gitlab	"github"
styling	CSS approach: tailwind, css-modules, styled	"tailwind"
git_init	Initialize git repository	true

Best Practices

1. Include CI/CD configuration from project creation so that automated testing and deployment are available from the first commit, not retrofitted weeks later when the codebase has grown
2. Set up path aliases early (like @/ mapping to src/) to avoid deeply nested relative imports that are hard to refactor when moving files between directories
3. Generate both component and test files together to establish the pattern that every component ships with tests; it is much easier to maintain a testing habit when the structure supports it from the start
4. Use workspace configurations for monorepos with shared TypeScript, ESLint, and Prettier configs in the root to avoid configuration drift between packages
5. Include a minimal but functional README with setup instructions, available scripts, and project structure overview so new team members can get started without verbal instructions

Common Issues

Template conflicts with existing configurations: When scaffolding into an existing directory, generated configs can overwrite custom settings. Always check for existing files before writing, merge configurations where possible, and prompt for confirmation when a conflict is detected.

Dependency version mismatches: Generated package.json files may reference outdated package versions. Pin dependencies to specific versions during generation, but include update commands in the project README so teams can update to latest compatible versions immediately after creation.

Framework-specific conventions not followed: Each framework has conventions for file naming, directory structure, and exports. Study the official create tools (create-next-app, create-vite) to align generated structures with what the framework expects, and test that generated projects build and run correctly.