How do I install the Frontend Vite Create Feature skill?

Run npx skillmds@latest add xmuhameed/frontend-vite-create-feature 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 Frontend Vite Create Feature safe to use?

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

Which AI agents work with Frontend Vite Create Feature?

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 Frontend Vite Create Feature free to use?

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

Who published Frontend Vite Create Feature?

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

Frontend Vite Create Feature by xmuhameed

Name: Frontend Vite Create Feature
Author: xmuhameed

File contents

Create Admin Feature

Checklist

[ ] 1. src/features/{name}/ with pages/, api/, types/
[ ] 2. api/keys.ts, api.ts, queries.ts, mutations.ts
[ ] 3. List page + Create/Edit page (or inline dialog for simple entities)
[ ] 4. Route in router (wrapped RequireRole)
[ ] 5. Sidebar entry in config/sidebar.ts with matching roles
[ ] 6. Bilingual form fields (_en/_ar) if catalog entity

Folder Structure

features/product-tag/
├── pages/
│   ├── ProductTagListPage.tsx
│   └── CreateProductTagPage.tsx   # create + edit via useParams().id
├── components/                    # optional
├── api/
│   ├── keys.ts
│   ├── api.ts
│   ├── queries.ts
│   └── mutations.ts
└── types/index.ts

CRUD Patterns

Complexity	Pattern
Standard catalog	List page + shared Create/Edit page
Simple lookup table	Inline Dialog on list page (box-color, coupon)
Nested resource	`/parent/:id/child` + Breadcrumbs
Reusable form	Extract `FeatureForm.tsx`, parent owns mutation

Routes

{ path: '/dashboard/product-tags', element: <RequireRole roles={['ADMIN','EDITOR']}><ListPage /></RequireRole> },
{ path: '/dashboard/product-tags/create', element: <CreatePage /> },
{ path: '/dashboard/product-tags/edit/:id', element: <CreatePage /> },

Sidebar Entry

{ title: 'Product Tags', href: '/dashboard/product-tags', roles: ['ADMIN', 'EDITOR'] }

API Functions

// api/api.ts
export const getProductTags = async (filters) => {
  const params = new URLSearchParams();
  params.append('page', String(filters.page ?? 1));
  params.append('pageItemsCount', String(filters.pageItemsCount ?? 10));
  if (filters.search) params.append('search', filters.search);
  return (await api.get(`/product-tag/get-all-product-tags?${params}`)).data;
};

Backend URLs: get-all-X, create-X, update-X?id=, delete-X?id=

Mutations

export const useCreateProductTag = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: createProductTag,
    onSuccess: () => { qc.invalidateQueries({ queryKey: productTagKeys.all }); toast.success('Created'); },
    onError: (e) => toast.error(e?.response?.data?.message || 'Failed'),
  });
};

See also: @frontend-vite/list-pages, @frontend-vite/forms, @frontend-vite/file-upload

---name: frontend-vite-create-featuredescription: Create a new Vite admin CRUD feature module: pages, api layer, types, routes, sidebar entry. Use when adding categories, products, coupons, or any admin resource.---# Create Admin Feature## Checklist```[ ] 1. src/features/{name}/ with pages/, api/, types/[ ] 2. api/keys.ts, api.ts, queries.ts, mutations.ts[ ] 3. List page + Create/Edit page (or inline dialog for simple entities)[ ] 4. Route in router (wrapped RequireRole)[ ] 5. Sidebar entry in config/sidebar.ts with matching roles[ ] 6. Bilingual form fields (_en/_ar) if catalog entity```## Folder Structure```features/product-tag/├── pages/│ ├── ProductTagListPage.tsx│ └── CreateProductTagPage.tsx # create + edit via useParams().id├── components/ # optional├── api/│ ├── keys.ts│ ├── api.ts│ ├── queries.ts│ └── mutations.ts└── types/index.ts```## CRUD Patterns| Complexity | Pattern ||------------|---------|| Standard catalog | List page + shared Create/Edit page || Simple lookup table | Inline Dialog on list page (box-color, coupon) || Nested resource | `/parent/:id/child` + Breadcrumbs || Reusable form | Extract `FeatureForm.tsx`, parent owns mutation |## Routes```typescript{ path: '/dashboard/product-tags', element: <RequireRole roles={['ADMIN','EDITOR']}><ListPage /></RequireRole> },{ path: '/dashboard/product-tags/create', element: <CreatePage /> },{ path: '/dashboard/product-tags/edit/:id', element: <CreatePage /> },```## Sidebar Entry```typescript{ title: 'Product Tags', href: '/dashboard/product-tags', roles: ['ADMIN', 'EDITOR'] }```## API Functions```typescript// api/api.tsexport const getProductTags = async (filters) => { const params = new URLSearchParams(); params.append('page', String(filters.page ?? 1)); params.append('pageItemsCount', String(filters.pageItemsCount ?? 10)); if (filters.search) params.append('search', filters.search); return (await api.get(`/product-tag/get-all-product-tags?${params}`)).data;};```Backend URLs: `get-all-X`, `create-X`, `update-X?id=`, `delete-X?id=`## Mutations```typescriptexport const useCreateProductTag = () => { const qc = useQueryClient(); return useMutation({ mutationFn: createProductTag, onSuccess: () => { qc.invalidateQueries({ queryKey: productTagKeys.all }); toast.success('Created'); }, onError: (e) => toast.error(e?.response?.data?.message || 'Failed'), });};```See also: `@frontend-vite/list-pages`, `@frontend-vite/forms`, `@frontend-vite/file-upload`

Frequently asked questions

Frontend Vite Create Feature