Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add AlirezaSoltaniJazi/Skillnir --skill frontendengineergit clone --depth 1 https://github.com/AlirezaSoltaniJazi/SkillnirWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/alirezasoltanijazi/skillnir/frontendengineer)<a href="https://agentmods.dev/skills/alirezasoltanijazi/skillnir/frontendengineer"><img src="https://agentmods.dev/badge/skills/alirezasoltanijazi/skillnir/frontendengineer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/alirezasoltanijazi/skillnir/frontendengineer"><img src="https://agentmods.dev/badge/skills/alirezasoltanijazi/skillnir/frontendengineer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00091 | $0.03373 |
| Opus 5.5 | $0.00036 | $0.01349 |
| Sonnet 5.5 | $0.00018 | $0.00675 |
| Haiku 4.5 | $0.00009 | $0.00337 |
Grade A, and why
frontendEngineer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 217 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Before You Start
Read LEARNED.md first. It holds corrections, preferences, and conventions from previous sessions. Apply every rule there — they override this skill's defaults.
Announce skill usage. Always say "Using: frontendEngineer skill" at the very start of the response before doing any work.
When to Use
- Writing or modifying any file under
src/skillnir/ui/ - Creating new UI components in
src/skillnir/ui/components/ - Adding page routes with the
@ui.page('/route')decorator - Styling with Tailwind classes, Quasar props, or custom CSS
- Working with i18n translations, dark/light theming, or browser storage
- Building async progress panels, form validation, or navigation flows
Do NOT Use
- Python backend modules (CLI, backends, tools, syncer, injector) — use backendEngineer
- Skill system meta-rules (SKILL.md structure, LEARNED.md format) — use skillnir
- CI/CD, Docker, pre-commit hooks, workflows — use devopsEngineer
Architecture
src/skillnir/ui/: __init__.py = app setup + _GLOBAL_CSS theme + static routes + run_ui(); layout.py = header(), drawer nav, NAV_GROUPS, install/sync flow builders; components/ = 13 reusable component functions (one per file); pages/ = 23 @ui.page route modules.
Data flow: user interaction → @ui.page handler → component functions → NiceGUI elements → Quasar/Vue rendering. Styling layers: _GLOBAL_CSS → Tailwind .classes() → Quasar .props() → inline .style() (dynamic only).
Full tree + per-file map: references/architecture-guide.md.
Key Patterns
| Pattern | Approach | Key Rule (and why) |
|---|---|---|
| Component functions | def name(params) -> None with context managers |
One component per file, type-hinted — keeps components discoverable and testable |
| Context manager wrap | @contextmanager + yield for wrapper cards |
Use for container components (e.g., form_card) so callers nest content |
| Color maps | Module-level _COLOR_HEX dict constants |
Map semantic names to hex — never hardcode, so the palette stays consistent |
| Page routing | @ui.page('/route') decorator |
Import the module in __init__.py or the route never registers |
| Page layout | header() + content column with max-width |
Every page MUST call header() first — else it loses the nav drawer, dark-mode toggle, and language switcher |
| State storage | app.storage.user for UI prefs |
Dark mode, sound, language persist per-browser |
| Async progress | progress_panel() + start_elapsed_timer() |
Callback-based via on_progress: Callable |
| i18n translations | t('dot.key', lang, **kwargs) |
All user-facing strings via t() or 9 languages break; fallback to English |
What ships with it
16 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- agents/component-auditor.md 1.7 KB
- agents/style-enforcer.md 1.7 KB
- agents/test-writer.md 1.7 KB
- assets/global-css-example.py 2.1 KB runs code
- INJECT.md 591 B
- LEARNED.md 2.0 KB
- references/ai-interaction-guide.md 3.0 KB
- references/architecture-guide.md 3.6 KB
- references/code-style.md 6.3 KB
- references/common-issues.md 3.3 KB
- references/component-patterns.md 5.3 KB
- references/component-template.py 1.3 KB runs code
- references/security-checklist.md 2.7 KB
- references/state-patterns.md 3.5 KB
- references/test-patterns.md 4.8 KB
- scripts/validate-frontend.sh 4.2 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago Changed · -22 lines 7ad7011fcc70
- 2mo ago First seen · 239 lines · 91 tokens per session scan A e3684bbcecd3
frontendEngineer is a skill published in the GitHub repository AlirezaSoltaniJazi/Skillnir (9 stars, last pushed 12d ago), licensed MIT. It adds 91 tokens to every session and 3,373 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
frontendEngineer compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| frontendEngineerAlirezaSoltaniJazi/Skillnir | Skill | 9 | 12d ago | MIT | A | 91 | Claude Code |
| imagegenopenai/codex | Skill | 133k | yesterday | Apache-2.0 | A | 113 | Codex |
| playwright-climicrosoft/playwright | Skill | 99k | yesterday | Apache-2.0 | A | 19 | Claude Code |
| local-ai-agentsmicrosoft/ai-agents-for-beginners | Skill | 79k | 4d ago | MIT | A | 200 | Claude Code, Codex |
| systematic-debuggingobra/superpowers | Skill | 313k | 3d ago | MIT | A | 21 | Claude Code |
| next-cache-components-adoptionvercel/next.js | Skill | 143k | yesterday | MIT | A | 95 | Claude Code |
| next-partial-prefetching-adoptionvercel/next.js | Skill | 143k | yesterday | MIT | A | 103 | Claude Code |