agentskills.codes
MI

Mifos Web App Agent Skills

by openMFCodingSource

Guides and patterns for developing Angular components for MifosX.

FrontendInternationalizationUI designAngularTypeScript

Install

mkdir -p .claude/skills/mifos-web-app-agent-skills && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18039" && unzip -o skill.zip -d .claude/skills/mifos-web-app-agent-skills && rm skill.zip

Installs to .claude/skills/mifos-web-app-agent-skills

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Core capabilities and rules for AI agents contributing to the MifosX Web App (Angular).
87 charsno explicit “when” trigger
Intermediate

Key capabilities

  • →Generate new UI screens using Angular Material
  • →Build forms with Angular Reactive Forms
  • →Implement internationalization (i18n) for user-facing text
  • →Connect UI components to Apache Fineract endpoints
  • →Add Mozilla Public License 2.0 headers to new files
  • →Use the 8px grid system for layout

How it works

The skill applies specific rules for UI generation, form building, i18n, and API interaction within the Angular framework, ensuring compliance with MifosX Web App standards.

Inputs & outputs

You give it
User request for a new UI component or form, or a file requiring headers
You get back
Angular HTML template, TypeScript component, or file with MPL-2.0 headers

When to use Mifos Web App Agent Skills

  • →Create new Angular screens
  • →Build Reactive Forms
  • →Implement i18n for components
  • →Style UI components

About this skill

Mifos Web App Skills

This file defines the procedural knowledge required for AI agents to successfully contribute to the Mifos X Web App.

1. UI Component Generation Skill

When to Apply: Creating new screens or views.

Rules:

  • Prefer Angular Material components/directives for interactive UI.
  • Use Material components where they exist (<mat-table>, <mat-select>) and Material directives on native controls where required (<button mat-button>, <input matInput>).
  • Use the 8px grid system for margins and padding using either utility classes (e.g., class="m-b-16") or inline CSS (e.g., margin-bottom: 16px;). Arbitrary values like 10px or 15px are strictly prohibited.

Correct Example:

<mat-card>
  <mat-card-header>
    <mat-card-title>{{ 'Create.Client' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content class="m-b-16">
    <mat-form-field appearance="fill">
      <mat-label>{{ 'First.Name' | translate }}</mat-label>
      <input matInput formControlName="firstName" required />
    </mat-form-field>
  </mat-card-content>
</mat-card>

2. Forms & Data Binding Skill

When to Apply: Building forms to submit to the Fineract backend.

Rules:

  • Use Angular Reactive Forms (FormBuilder, FormGroup, FormControl). Do NOT use Template-driven forms ([(ngModel)]).
  • Always inject the FormBuilder in the constructor.

3. Translation & i18n Skill

When to Apply: Any time you are adding user-facing text to an HTML template or component.

Rules:

  • Hardcoded English text is strictly prohibited in HTML templates.
  • ALWAYS use the @ngx-translate/core pipe in templates.
  • Syntax: {{ 'Your.String.Here' | translate }}
  • If you add new strings, you MUST run npm run translations:extract after modifying the HTML so it generates inside src/translations/template.json.

4. API & Data Fetching Skill

When to Apply: Connecting a UI component to Apache Fineract endpoints.

Rules:

  • Data fetching should happen via Angular Resolve classes on the Route, OR via injected Services. Do not execute heavy HTTP logic directly inside the Component's ngOnInit if it blocks initial render unnecessarily.
  • The UI exclusively communicates with the backend via REST. Use standard Angular HttpClient.

5. File Headers Compliance Skill

When to Apply: Whenever you create a new file (.ts, .html, .scss).

Rules:

  • Before finalizing a PR or task, you MUST run npm run headers:add to prepend the required Mozilla Public License 2.0 (MPL-2.0) headers to your files.
  • Verify with npm run headers:check.

When not to use it

  • →When using Template-driven forms with `[(ngModel)]`
  • →When hardcoding English text in HTML templates
  • →When executing heavy HTTP logic directly inside `ngOnInit`

Limitations

  • →Strictly prohibits hardcoded English text in HTML templates
  • →Requires running `npm run translations:extract` for new i18n strings
  • →Requires running `npm run headers:add` for new files

How it compares

This skill enforces strict coding standards and architectural patterns for Angular development, promoting consistency and maintainability across the MifosX Web App.

Compared to similar skills

Mifos Web App Agent Skills side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
Mifos Web App Agent Skills (this skill)04moNo flagsIntermediate
igniteui-angular-components12moNo flagsIntermediate
angular1003moReviewAdvanced
angular-state-management83moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

igniteui-angular-components

igniteui

Provides guidance on all non-grid Ignite UI for Angular UI components including application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use when users ask about any Ignite UI Angular component that is not a data grid, such as forms, inputs, dropdowns, date pickers, dialogs, navigation, lists, trees, cards, charts, or application scaffolding and setup.

12

angular

sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.

100129

angular-state-management

sickn33

Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.

823

angular-modernization

bitwarden

Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.

422

angular-routing

analogjs

Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.

14

igniteui-angular-grids

igniteui

Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data.

14

Search skills

Search the agent skills registry