How do I install the Create TS Entry Point skill?

Run npx skillmds@latest add gabrielmoreira/create-ts-entry-point 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 Create TS Entry Point safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Create TS Entry Point?

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 Create TS Entry Point free to use?

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

Who published Create TS Entry Point?

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

Create TS Entry Point by gabrielmoreira

Name: Create TS Entry Point
Rating: 4.5 (4 reviews)
Author: gabrielmoreira

Create TS Entry Point

Create the TypeScript entry point files for a new admin page. Covers the directory structure, listing and form entry points, and webpack registration. References init-js-components and init-grid-extensions for component/extension details. Trigger: "create JS entry point for {Domain}".

gabrielmoreira Updated Sep 9, 2026 17 repo stars

File contents

create-ts-entry-point

Read @.ai/Component/Javascript/CONTEXT.md for the page structure and webpack config.

1. Directory structure

Create admin-dev/themes/new-theme/js/pages/{domain}/:

{domain}/
├── index.ts              # Listing page entry point
├── form.ts               # Form page entry point (simple)
│   OR form/index.ts      # Form page entry point (complex, with sub-files)
└── {domain}-map.ts       # DOM selector mappings (optional, for pages with many selectors)

For simple pages, index.ts and form.ts are enough. Only create subdirectories and manager classes for genuinely complex pages.

2. Listing entry point (`index.ts`)

Initializes the Grid instance and adds extensions. See init-grid-extensions skill for the full extension list and patterns.

Reference: admin-dev/themes/new-theme/js/pages/tax/index.ts (simple), admin-dev/themes/new-theme/js/pages/manufacturer/index.ts (multiple grids)

3. Form entry point (`form.ts` or `form/index.ts`)

Initializes the global components the form needs. See init-js-components skill for the full component list and usage.

For simple forms, a few initComponents calls are all you need. For complex forms with Vue sections, see the create-vue-integration skill.

Reference: admin-dev/themes/new-theme/js/pages/attribute/form/index.ts (simple form)

4. Webpack registration

Add the entry point in admin-dev/themes/new-theme/.webpack/common.js:

entry: {
  // ...existing entries...
  {domain}: './js/pages/{domain}',              // listing
  {domain}_form: './js/pages/{domain}/form',    // form (if separate)
}

Output: admin-dev/themes/new-theme/public/{domain}.bundle.js

The Twig template must include this bundle via a <script> tag (see create-twig-index-template / create-twig-form-template).

Rules

Entry points must be registered in webpack — unregistered files are not compiled
Grid ID in new Grid('{domain}') must match the GRID_ID from the PHP grid definition
For simple pages, the entry point IS the logic. Manager classes are for complex pages only

---name: create-ts-entry-pointdescription: Create the TypeScript entry point files for a new admin page. Covers the directory structure, listing and form entry points, and webpack registration. References init-js-components and init-grid-extensions for component/extension details. Trigger: "create JS entry point for {Domain}".--- # create-ts-entry-point Read `@.ai/Component/Javascript/CONTEXT.md` for the page structure and webpack config. ## 1. Directory structure Create `admin-dev/themes/new-theme/js/pages/{domain}/`: ``` {domain}/ ├── index.ts # Listing page entry point ├── form.ts # Form page entry point (simple) │ OR form/index.ts # Form page entry point (complex, with sub-files) └── {domain}-map.ts # DOM selector mappings (optional, for pages with many selectors) ``` For simple pages, `index.ts` and `form.ts` are enough. Only create subdirectories and manager classes for genuinely complex pages. ## 2. Listing entry point (`index.ts`) Initializes the Grid instance and adds extensions. See `init-grid-extensions` skill for the full extension list and patterns. **Reference:** `admin-dev/themes/new-theme/js/pages/tax/index.ts` (simple), `admin-dev/themes/new-theme/js/pages/manufacturer/index.ts` (multiple grids) ## 3. Form entry point (`form.ts` or `form/index.ts`) Initializes the global components the form needs. See `init-js-components` skill for the full component list and usage. For simple forms, a few `initComponents` calls are all you need. For complex forms with Vue sections, see the `create-vue-integration` skill. **Reference:** `admin-dev/themes/new-theme/js/pages/attribute/form/index.ts` (simple form) ## 4. Webpack registration Add the entry point in `admin-dev/themes/new-theme/.webpack/common.js`: ```javascript entry: { // ...existing entries... {domain}: './js/pages/{domain}', // listing {domain}_form: './js/pages/{domain}/form', // form (if separate) } ``` Output: `admin-dev/themes/new-theme/public/{domain}.bundle.js` The Twig template must include this bundle via a `<script>` tag (see `create-twig-index-template` / `create-twig-form-template`). ## Rules - Entry points must be registered in webpack — unregistered files are not compiled - Grid ID in `new Grid('{domain}')` must match the `GRID_ID` from the PHP grid definition - For simple pages, the entry point IS the logic. Manager classes are for complex pages only

Frequently asked questions