@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"

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

• 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)

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

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

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.