Borrowing it
Nothing to install: this file belongs to systemowiec/ai-agents-workspace-starter. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/systemowiec/ai-agents-workspace-starter/main/.agents/skills/add-frontend-page/SKILL.mdgit clone --depth 1 https://github.com/systemowiec/ai-agents-workspace-starterWrote 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/systemowiec/ai-agents-workspace-starter/add-frontend-page)<a href="https://agentmods.dev/skills/systemowiec/ai-agents-workspace-starter/add-frontend-page"><img src="https://agentmods.dev/badge/skills/systemowiec/ai-agents-workspace-starter/add-frontend-page/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/systemowiec/ai-agents-workspace-starter/add-frontend-page"><img src="https://agentmods.dev/badge/skills/systemowiec/ai-agents-workspace-starter/add-frontend-page.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.00042 | $0.00617 |
| Opus 5.5 | $0.00017 | $0.00247 |
| Sonnet 5.5 | $0.00008 | $0.00123 |
| Haiku 4.5 | $0.00004 | $0.00062 |
Grade A, and why
add-frontend-page 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 2mo 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 — 68 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skill: Add Frontend Page
Full procedure for adding a new page in the React SPA with UI template.
0. Check UI Framework Template FIRST
NEVER create UI from scratch. Check
frontend/src/components/ (existing)- whether a ready-made counterpart exists.
- Search
frontend/src/components/ (existing)for a ready-made component/page - Propose a mapping: "I'll use card from X, table from Y"
- After approval - implement
1. Create Page Component (frontend/src/features/)
- File:
features/{module}/components/{Module}Page.tsx - Use
<Container>wrapper +card/card-header/card-bodystructure - Import from
@/components/for reusable elements
2. Add Route (frontend/src/routing/)
- Add
{ path: '{slug}', element: <Component /> }to the route config
3. Add Menu Item (frontend/src/config/)
- Add
{ title: '{Label}', icon: '{icon-name}', path: '/{slug}' }to sidebar config
4. UI Framework Components - Quick Reference
| Use Case | Component / Class |
|---|---|
| Page wrapper | <Container> |
| Card | card, card-header, card-body |
| Data table | table table-border + DataGrid |
| Button | btn btn-primary, btn btn-sm btn-light |
| Badge | badge badge-success, badge badge-warning |
| Icons | <KeenIcon icon="..." /> |
| Modal | UI framework modal component |
5. Dark Mode - MANDATORY
Every element MUST support both themes using bg-white dark:bg-coal-600 text-gray-800 dark:text-gray-200 pattern.
6. Data Fetching Pattern
- Use
useQueryfrom@tanstack/react-query - Query key: descriptive constant array
['entity-name'] - Query fn:
() => apiClient.get('/endpoint') staleTime: 5 * 60 * 1000for slow-moving resources
7. Internationalization (i18n)
- Use
useTranslation()hook fromreact-i18next - All user-facing strings via
t('module.key')
See also (MANDATORY)
- Before implementation - read
workflows/spec-development.md - Frontend patterns - read
skills/frontend-patterns.md - Frontend role - read
roles/frontend-engineer.md - After implementation - run
workflows/post-impl-verify.md
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.
- 2mo ago First seen · 68 lines · 42 tokens per session scan A 47bdd92a44d1
add-frontend-page is a skill published in the GitHub repository systemowiec/ai-agents-workspace-starter (2 stars, last pushed 7mo ago), licensed MIT. It adds 42 tokens to every session and 617 once invoked, about $0.0002 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.
add-frontend-page compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| add-frontend-pagesystemowiec/ai-agents-workspace-starter | Skill | 2 | 7mo ago | MIT | A | 42 | Claude Code, Codex |
| build-ghost-appTryGhost/Ghost | Skill | 56k | today | MIT | A | 44 | Claude Code, Codex |
| chakra-ui-builderchakra-ui/chakra-ui | Skill | 41k | 2d ago | MIT | A | 214 | Claude Code, Codex |
| material-ui-tailwindmui/material-ui | Skill | 99k | today | MIT | A | 67 | Claude Code, Codex |
| fuzzy-rankingTanStack/table | Skill | 29k | 5d ago | MIT | A | 62 | Claude Code, Codex |
| r3f-best-practiceszebbern/claude-code-guide | Skill | 4.7k | today | MIT | A | 74 | Claude Code, Codex |
| git-safetytamagui/tamagui | Skill | 14k | yesterday | MIT | A | 0 | Claude Code |