Hexagone Frontend Documentation -- Navigation Skill

@his/hexa-components

What is Hexagone frontend documentation

@his/hexa-components

https://erp-pas.gitlab-pages-erp-pas.dedalus.lan/hexagone/frontend/hexagone-documentation

• The user asks about a Hexagone UI component (

  <btn>

  ,

  <multiselect>

  ,

  <data-table>

  , etc.)
• The user needs props, events, or usage examples for a Hexagone component
• The user asks about beta-scss CSS utility classes (

  flex:6/12

  ,

  p:1

  ,

  m:1

  , etc.)
• The user asks about the Vuex store modules (user, session, environment, navigation, etc.)
• The user asks about the API utility (

  Api()

  ,

  StandardApi()

  )
• The user asks about custom directives (

  v-focus

  ,

  v-uppercase

  )
• The user asks about form validation rules or form patterns in Hexagone
• The user is building or modifying a Hexagone Web frontend view/space
• Any question mentioning "Hexagone" combined with "component", "composant", "frontend", "Vue", "template", "formulaire", or "interface"

Critical conventions

IMPORTANT: Hexagone uses custom tag names. NEVER use standard HTML tags for these components.

<button>

<btn>

components/button.md

<select>

<multiselect>

components/select.md

<table>

<data-table>

components/datatable.md

<input type="checkbox">

<checkbox>

components/checkbox.md

• All components are globally registered -- no import needed in templates
• Form fields must be wrapped in

  <div class="input-field"><label for="id">Label</label><!-- component --></div>

• Use beta-scss utility classes:

  flex

  ,

  flex:wrap

  ,

  flex:6/12

  ,

  p:1

  ,

  m:1

  , etc.
• Store access via vuex-pathify:

  this.$store.get('module/path')

  and

  this.$store.set('module/path', value)

• Library:

  @his/hexa-components

  , Framework: Vue.js 2

Documentation catalog

BASE_RAW_URL = https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/

Components (36 components)

Forms and input

<input>

components/input.md

<textarea>

components/textarea.md

<number>

components/number.md

<currency>

components/currency.md

<multiselect>

components/select.md

<autocomplete>

components/autocomplete.md

<checkbox>

components/checkbox.md

<radio>

components/radio.md

<btn-switch>

components/button-switch.md

<datepicker>

components/datepicker.md

<timepicker>

components/timepicker.md

<colorpicker>

components/colorpicker.md

<file>

components/file.md

<iban>

components/iban.md

<bic>

components/bic.md

<radical>

components/radical.md

Navigation and actions

<btn>

components/button.md

<btn-group>

components/button-group.md

<floating-btn>

components/floating-button.md

<action>

components/action.md

<link>

components/link.md

<bookmark>

components/bookmark.md

<tabs>

components/tabs.md

<steps>

components/steps.md

Data display

<data-table>

components/datatable.md

<simple-table>

components/simple-table.md

<card>

components/card.md

<progress-bar>

components/progress-bar.md

User feedback

<alert>

components/alert.md

<modal>

components/modal.md

$notification()

components/notification.md

<question>

components/question.md

<tooltips>

components/tooltips.md

<post-it>

components/post-it.md

<spinner>

components/spinner.md

Layout

<collapsible>

components/collapsible.md

Patterns

patterns/api.md

Api(url, options)

StandardApi(USP)

patterns/store.md

Reference

reference/directives.md

v-uppercase

v-focus

reference/events.md

reference/form-rules.md

@is-valid

Tag-to-file quick lookup

<btn>

button

components/button.md

<btn-group>

components/button-group.md

<btn-switch>

components/button-switch.md

<floating-btn>

components/floating-button.md

<multiselect>

select

components/select.md

<data-table>

datatable

table

components/datatable.md

<simple-table>

components/simple-table.md

<datepicker>

date

components/datepicker.md

<timepicker>

time

heure

components/timepicker.md

<checkbox>

components/checkbox.md

<radio>

components/radio.md

<autocomplete>

components/autocomplete.md

<modal>

modale

components/modal.md

<alert>

alerte

components/alert.md

<notification>

$notification

components/notification.md

<question>

components/question.md

<card>

carte

components/card.md

<collapsible>

components/collapsible.md

<tabs>

onglets

components/tabs.md

<steps>

etapes

components/steps.md

<spinner>

loading

components/spinner.md

<currency>

montant

components/currency.md

<iban>

components/iban.md

<bic>

components/bic.md

<number>

nombre

components/number.md

<input>

champ texte

components/input.md

<textarea>

components/textarea.md

<file>

upload

components/file.md

<radical>

components/radical.md

<colorpicker>

couleur

components/colorpicker.md

<action>

components/action.md

<link>

lien

components/link.md

<bookmark>

signet

components/bookmark.md

<post-it>

components/post-it.md

<progress-bar>

components/progress-bar.md

<tooltips>

infobulle

components/tooltips.md

CSS utility classes (beta-scss)

flex

flex:wrap

flex:col

flex:X/12

flex:6/12

p:1

m:1

pt:1

pr:1

pb:1

pl:1

mt:1

mr:1

mb:1

ml:1

text:bold

text:center

bg:grey-light

border

rounded:1/2

w:full

Icons

<icon>

<icon>checked</icon>
<icon>close</icon>
<icon>search</icon>
<icon>edit</icon>

@his/fonts-icons

How to answer questions

Step 1: Identify the relevant file

• Specific component tag (e.g.,

  <btn>

  ,

  <multiselect>

  ) --> use the tag-to-file lookup
• Component name (e.g., "datatable", "datepicker") --> match to the component catalog
• Store / state management --> fetch

  patterns/store.md

• API / web service calls --> fetch

  patterns/api.md

• Directives (

  v-focus

  ,

  v-uppercase

  ) --> fetch

  reference/directives.md

• Form validation / required fields --> fetch

  reference/form-rules.md

• Events (click, keyboard) --> fetch

  reference/events.md

• CSS classes --> use the CSS utility table above (no fetch needed)
• Icons --> use the icons section above (no fetch needed)
• General "list all components" --> use the catalog above (no fetch needed)

Step 2: Fetch the file

WebFetch: url="${BASE_RAW_URL}<file-path>" prompt="Return the full content of this markdown file"

• Button component:

  WebFetch: url="https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/components/button.md" prompt="Return the full content"

• Store pattern:

  WebFetch: url="https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/patterns/store.md" prompt="Return the full content"

1. Access the documentation site directly:

   https://erp-pas.gitlab-pages-erp-pas.dedalus.lan/hexagone/frontend/hexagone-documentation

2. Browse the source repo:

   https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/tree/master/docs/llm

Step 3: Extract and present the answer

1. For a specific component: present the props table, events table, and usage examples
2. For a pattern: present the API/function signature, options, and examples
3. For a reference topic: present the relevant rules, tables, or directives

Step 4: Cross-reference if needed

Response guidelines

## <ComponentName> (`<tag-name>`)

**Library:** @his/hexa-components
**Source:** [file URL]

### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|

### Events
| Event | Description |
|-------|-------------|

### Example
[Code example from the documentation]

Important rules

1. Always fetch from the GitLab repository -- never answer from memory or general knowledge about Vue.js components. Hexagone has specific conventions (custom tags, beta-scss, vuex-pathify) that differ from standard Vue.js patterns.
2. Quote the source file when presenting information: always mention which documentation file the information comes from.
3. Do not invent props, events, or component behavior -- if the information is not found in the fetched file, say so explicitly. Do not guess or extrapolate.
4. Respect Hexagone conventions:
   • Use

     <btn>

     not

     <button>

     ,

     <multiselect>

     not

     <select>

     ,

     <data-table>

     not

     <table>

   • Wrap form fields in

     <div class="input-field">

   • Use beta-scss utility classes, not custom CSS
   • Use

     this.$store.get()

     /

     this.$store.set()

     for store access
5. Handle missing documentation gracefully -- if a component is not documented, inform the user and suggest they check the hexagone-documentation site or open an issue in the repository at

   https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation

   .
6. Cross-reference with hexagone-swdoc -- if the question involves calling Hexagone backend web services from a frontend view, suggest using the

   hexagone-swdoc

   skill for the API contract details and the

   Api()

   /

   StandardApi()

   utility from this skill for the frontend call pattern.
7. Form field pattern to always follow:
   html

   <div class="input-field">
     <label for="myField">My Label</label>
     <!-- component here -->
   </div>

8. Use

   <btn-group>

   instead of

   <multiselect>

   when options are fewer than 6 -- this avoids an extra click and shows all options directly.