chore: make agent instruction for the custom vue components shorter

AdminForth/1849/issue--if-this-was-prompt-ted-

Author: yaroslav8765

adminforth/commands/createApp/templates/.agents/skills/adminforth-custom-vue/SKILL.md.hbs

@@ -15,9 +15,9 @@ user-invocable: true
 - Installing frontend packages used only by custom AdminForth Vue code.
 - Any task that produces visible UI in an AdminForth app, even when the task says nothing about how it should look.
 
-## Non-Negotiable UI Defaults
+## Adminforth UI Defaults
 
-Apply all of these to every piece of UI you write under `custom/`, including when the user gave no design
+Apply all of these to every piece of UI you write under `custom/`, especially when the user gave no design
 instructions at all. These are the defaults, not options — do not ask whether the user wants them, and do
 not wait for a follow-up prompt about styling or dark mode.
 
@@ -26,145 +26,32 @@ not wait for a follow-up prompt about styling or dark mode.
    component covers the case.
 2. **Buttons come from AFCL with an explicit intent.** Primary/confirming action is the default filled
    accent `<Button>`. Secondary, cancel, and "back" actions are stroked `<Button variant="secondary">`.
-   Destructive actions are `<Button variant="danger">`. Never hand-roll a `<button>` with your own
-   background classes.
+   Destructive actions are `<Button variant="danger">`.
 3. **Form controls come from AFCL.** `Input`, `Textarea`, `Select`, `Checkbox`, `Toggle`, `DatePicker`,
-   `Dropzone`. Never a bare `<input>`, `<select>`, or `<textarea>` styled by hand — that is the main way
+   `Dropzone`. Preferably not a bare `<input>`, `<select>`, or `<textarea>` styled by hand — that is the main way
    custom pages end up looking foreign.
 4. **Accents use `lightPrimary` / `darkPrimary`.** Anything that carries brand or "this is the important
    one" meaning — accent fills, highlighted values, active states, links, focus emphasis, the main chart
    series — should use `bg-lightPrimary dark:bg-darkPrimary`, `text-lightPrimary dark:text-darkPrimary`,
-   `text-lightPrimaryContrast dark:text-darkPrimaryContrast` on top of an accent fill, or
-   `bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity` for a subtle tint. Hardcoding an accent
-   (`bg-blue-600`, `text-indigo-500`) breaks apps whose theme sets a different brand color.
+   `text-lightPrimaryContrast dark:text-darkPrimaryContrast`.
 5. **Everything else may use Tailwind's stock palette.** `bg-white`, `bg-gray-50`, `text-gray-700`,
    `text-red-600`, `border-gray-200`, `bg-pink-500`, and friends are all fine for neutrals, surfaces,
    borders, and semantic colors. The theme tokens in the table below are still the better choice when a
    block sits directly next to built-in AdminForth chrome and should match it exactly — but they are a
    recommendation, not a restriction.
 6. **Dark theme is part of writing the class, not a later pass.** Every color utility must be written as a
-   light/dark pair: `bg-white dark:bg-gray-900`, `text-gray-700 dark:text-gray-300`,
-   `bg-lightForm dark:bg-darkForm`. This matters most with stock Tailwind colors, which have no built-in
+   light/dark pair: `bg-white dark:bg-gray-900`, `text-gray-700 dark:text-gray-300`.
+   This matters most with stock Tailwind colors, which have no built-in
    dark behavior — a `bg-gray-50` with no `dark:` counterpart is a defect, fix it before finishing.
    `light*`/`dark*` token pairs satisfy this by construction. Dark mode is class-based
    (`darkMode: 'class'`), so `dark:` variants work everywhere in `custom/`.
-7. **Non-color utilities are unrestricted.** Tailwind spacing, sizing, radius, flex/grid, and font-size
-   utilities are fine and encouraged. Match AFCL's own rhythm so custom blocks sit naturally next to
-   built-in ones: `rounded-lg`, `text-sm`, `p-4`, `gap-2`/`gap-4`.
-8. **Icons come from the prerendered Iconify packages** already present in the SPA:
+7. **Icons come from the prerendered Iconify packages** already present in the SPA:
    `@iconify-prerendered/vue-flowbite` (default), plus `-heroicons`, `-humbleicons`, and `-flag`.
    Do not add an icon dependency to `custom/package.json` for these.
-9. **Never build Tailwind class names dynamically.** `custom/` is copied into the SPA sources and scanned
+8. **Never build Tailwind class names dynamically.** `custom/` is copied into the SPA sources and scanned
    statically by Tailwind, so `` `text-${color}-600` `` produces no CSS. Write full class strings and pick
    between them.
 
-## AFCL Component Inventory
-
-All of these are imported from `@/afcl` and are already theme-aware and dark-mode-ready:
-
-```ts
-import { Button, LinkButton, ButtonGroup, Link, Input, Textarea, Select, Checkbox, Toggle,
-         DatePicker, Dropzone, Card, Table, Dialog, Modal, Tooltip, VerticalTabs,
-         ProgressBar, Spinner, Skeleton, JsonViewer, CountryFlag,
-         AreaChart, BarChart, PieChart, MixedChart, TreeMapChart } from '@/afcl';
-```
-
-- Actions: `Button` (`variant`: `primary` | `secondary` | `danger`; also `loader`, `disabled`, `active`,
-  `shadow`), `LinkButton` (same variants, navigates via `to`), `ButtonGroup`, `Link`.
-- Inputs: `Input` (requires `type`, supports `v-model`, `fullWidth`, `readonly`, `prefix`/`suffix` props
-  or slots), `Textarea`, `Select` (`:options="[{ label, value }]"`, `multiple`, `placeholder`),
-  `Checkbox`, `Toggle`, `DatePicker`, `Dropzone`.
-- Layout and data: `Card`, `Table` (client or server-side data, sorting, pagination), `VerticalTabs`,
-  `Modal`, `Dialog`, `Tooltip`.
-- Feedback: `Spinner`, `Skeleton`, `ProgressBar`.
-- Charts: `AreaChart`, `BarChart`, `PieChart`, `MixedChart`, `TreeMapChart` — prefer these over pulling in
-  a new charting library, they already follow theme colors.
-
-Before writing a bespoke widget, check this list. Reusing an AFCL component is always the preferred
-answer to "make a button / input / table / modal / chart".
-
-## Theme Color Tokens
-
-These light/dark pairs follow the app's configured theme automatically. The accent rows are the ones you
-should actually reach for by default (rule 4); the rest are available when you want a custom block to
-match built-in AdminForth chrome pixel-for-pixel instead of approximating it with stock grays. Every
-`light*` token has a `dark*` twin.
-
-| Need | Classes |
-| --- | --- |
-| **Accent (brand) text** | `text-lightPrimary dark:text-darkPrimary` |
-| **Accent fill** | `bg-lightPrimary dark:bg-darkPrimary` |
-| **Text on accent fill** | `text-lightPrimaryContrast dark:text-darkPrimaryContrast` |
-| **Subtle accent tint** | `bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity` |
-| Panel / form surface | `bg-lightForm dark:bg-darkForm` |
-| Panel border | `border-lightFormBorder dark:border-darkFormBorder` |
-| Section heading strip | `bg-lightFormHeading dark:bg-darkFormHeading` |
-| Card surface | `bg-lightCardBackground dark:bg-darkCardBackground` |
-| Card border | `border-lightCardBorder dark:border-darkCardBorder` |
-| Strong / title text | `text-lightCardTitle dark:text-darkCardTitle` |
-| Muted / secondary text | `text-lightCardDescription dark:text-darkCardDescription` |
-| Body and table text | `text-lightListTableText dark:text-darkListTableText` |
-| Table heading text | `text-lightListTableHeadingText dark:text-darkListTableHeadingText` |
-| Divider / separator | `border-lightListBorder dark:border-darkListBorder` |
-| Error / invalid text | `text-lightInputErrorColor dark:text-darkInputErrorColor` |
-| Required marker | `text-lightRequiredIconColor dark:text-darkRequiredIconColor` |
-| Focus ring | `focus:ring-lightFocusRing dark:focus:ring-darkFocusRing` |
-
-The complete token list lives in `node_modules/adminforth/dist/modules/styles.js`. Look a name up there
-instead of inventing one — an unknown token silently produces no CSS.
-
-## Default Panel Recipe
-
-When a task asks for "a panel", "a summary block", "a small form", or any custom page area with no visual
-spec, start from this shape. It is theme-correct and dark-ready with no extra work:
-
-```vue
-<template>
-  <div class="rounded-lg border border-lightFormBorder dark:border-darkFormBorder
-              bg-lightForm dark:bg-darkForm p-4">
-    <h3 class="text-lg font-semibold text-lightCardTitle dark:text-darkCardTitle">
-      \{{ meta?.title || 'Orders overview' }}
-    </h3>
-    <p class="mt-1 text-sm text-lightCardDescription dark:text-darkCardDescription">
-      Totals for the current filter
-    </p>
-
-    <div class="mt-4 grid gap-3 sm:grid-cols-2">
-      <Input type="text" v-model="query" full-width placeholder="Search orders" />
-      <Select v-model="period" :options="periodOptions" placeholder="Period" />
-    </div>
-
-    <div class="mt-4 flex items-center gap-2">
-      <Button :loader="loading" @click="apply">Apply</Button>
-      <Button variant="secondary" @click="reset">Reset</Button>
-    </div>
-
-    <p v-if="error" class="mt-2 text-sm text-lightInputErrorColor dark:text-darkInputErrorColor">
-      \{{ error }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Button, Input, Select } from '@/afcl';
-
-defineProps<{ meta?: { title?: string } }>();
-
-const query = ref('');
-const period = ref(null);
-const loading = ref(false);
-const error = ref('');
-const periodOptions = [
-  { label: 'Last 7 days', value: '7' },
-  { label: 'Last 30 days', value: '30' },
-];
-
-function apply() { /* ... */ }
-function reset() { query.value = ''; period.value = null; }
-</script>
-```
-
 ## Dark Theme Self-Check
 
 Run this over every file you touched before reporting the work as done:
@@ -177,8 +64,6 @@ Run this over every file you touched before reporting the work as done:
   dark mode.
 - Accents are `lightPrimary`/`darkPrimary`, not a hardcoded blue or indigo.
 - No raw `#hex` or `rgb()` in templates or `<style>` blocks.
-- Any raw `<button>`, `<input>`, `<select>`, or `<textarea>` has a justification; otherwise replace it with
-  the AFCL equivalent.
 
 ```
 ❌  <button class="bg-blue-600 text-white rounded px-4 py-2">Save</button>
@@ -187,14 +72,8 @@ Run this over every file you touched before reporting the work as done:
 ❌  <div class="bg-white border border-gray-200 text-gray-800">
 ✅  <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700
                text-gray-800 dark:text-gray-200">
-✅  <div class="bg-lightForm dark:bg-darkForm border border-lightFormBorder
-               dark:border-darkFormBorder text-lightListTableText dark:text-darkListTableText">
-
 ❌  <p class="text-red-600">\{{ error }}</p>
 ✅  <p class="text-red-600 dark:text-red-400">\{{ error }}</p>
-
-❌  <span class="font-semibold text-blue-600 dark:text-blue-400">\{{ total }}</span>
-✅  <span class="font-semibold text-lightPrimary dark:text-darkPrimary">\{{ total }}</span>
 ```
 
 ## `custom/` Directory and `@@/`
@@ -322,11 +201,11 @@ show: {
       @update:model-value="onInput"
     />
 
-    <p v-if="errorMessage" class="text-sm text-lightInputErrorColor dark:text-darkInputErrorColor">
+    <p v-if="errorMessage" class="text-sm">
       \{{ errorMessage }}
     </p>
 
-    <p v-else-if="isEmpty" class="text-sm text-lightCardDescription dark:text-darkCardDescription">
+    <p v-else-if="isEmpty" class="text-sm">
       Value is currently empty
     </p>
   </div>
@@ -414,7 +293,7 @@ function syncState() {
 
 ```vue
 <template>
-  <div class="flex items-center gap-2 text-lightListTableText dark:text-darkListTableText">
+  <div class="flex items-center gap-2">
     <span>
       \{{ meta?.filler?.repeat(record.number_of_rooms || 0) }}
     </span>
@@ -530,6 +409,4 @@ options: {
 - Reach for an AFCL component before writing markup; use `lightPrimary`/`darkPrimary` for accents; write
   the `dark:` variant in the same edit as the light one. These are defaults for every UI task, not polish
   to be added when someone asks for it.
-- Stock Tailwind colors are fine for neutrals and semantic states — just never leave one without its
-  `dark:` counterpart.
 - When you are done, re-read your diff against the Dark Theme Self-Check above before reporting completion.