メニュー
Patron estandar para paginas CRUD con busqueda client-side. Trigger: Al crear/modificar paginas de listado CRUD, nuevo modulo, o agregar busqueda.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/cosechasistema/insforge-base --skill crud-searchコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Mantiene el CHANGELOG.md actualizado con cada cambio significativo. Trigger: Despues de cada commit, feature completada, o cuando el usuario pide registrar cambios.
Patron estandar para reportes con filtros, preview y exportacion PDF/Excel. Trigger: Al crear reportes, exportar datos, agregar boton de reportes a un modulo CRUD.
| name | crud-search |
| description | Patron estandar para paginas CRUD con busqueda client-side. Trigger: Al crear/modificar paginas de listado CRUD, nuevo modulo, o agregar busqueda. |
| license | Apache-2.0 |
| metadata | {"author":"gentleman-programming","version":"1.0"} |
Toda pagina de listado CRUD DEBE incluir busqueda client-side con las siguientes piezas:
const searchQuery = ref('')
const itemsFiltered = computed(() => {
const query = searchQuery.value.toLowerCase().trim()
if (!query) return items.value
return items.value.filter((item) => {
return item.nombre.toLowerCase().includes(query)
// agregar campos adicionales segun la entidad
})
})
searchQuery: ref de string vacioitemsFiltered: computed que filtra por nombre como MINIMO.toLowerCase() para busqueda case-insensitive<div class="d-flex align-center justify-space-between mb-6 ga-4">
<div class="d-flex align-center ga-3 flex-shrink-0">
<v-icon icon="mdi-ICONO" size="40" color="primary" />
<h1 class="text-h4">
Titulo
</h1>
</div>
<v-text-field
v-model="searchQuery"
prepend-inner-icon="mdi-magnify"
placeholder="Buscar por nombre..."
clearable
hide-details
density="compact"
class="flex-grow-1"
style="max-width: 500px;"
/>
<v-btn
color="secondary"
prepend-icon="mdi-plus"
class="text-uppercase font-weight-bold flex-shrink-0"
@click="abrirCrear"
>
Nuevo X
</v-btn>
</div>
Reglas del header:
d-flex align-center justify-space-between mb-6 ga-4flex-shrink-0flex-grow-1 con max-width: 500pxflex-shrink-0<EntidadList
:items="itemsFiltered"
@editar="abrirEditar"
@eliminar="confirmarEliminar"
/>
SIEMPRE pasar itemsFiltered en vez de la lista original.
| Entidad | Campos |
|---|---|
| Items | nombre, descripcion |
Para nuevas entidades: MINIMO filtrar por nombre.
Ver implementacion completa en app/pages/items/index.vue.