Borrowing it
Nothing to install: this file belongs to AlexisBalayre/claude-code-power-config. 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/AlexisBalayre/claude-code-power-config/main/.claude/skills/new-frontend-route/SKILL.mdgit clone --depth 1 https://github.com/AlexisBalayre/claude-code-power-configWrote 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/alexisbalayre/claude-code-power-config/new-frontend-route)<a href="https://agentmods.dev/skills/alexisbalayre/claude-code-power-config/new-frontend-route"><img src="https://agentmods.dev/badge/skills/alexisbalayre/claude-code-power-config/new-frontend-route/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/alexisbalayre/claude-code-power-config/new-frontend-route"><img src="https://agentmods.dev/badge/skills/alexisbalayre/claude-code-power-config/new-frontend-route.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.00058 | $0.00438 |
| Opus 5.5 | $0.00023 | $0.00175 |
| Sonnet 5.5 | $0.00012 | $0.00088 |
| Haiku 4.5 | $0.00006 | $0.00044 |
Grade A, and why
new-frontend-route 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.
What it actually says
Scaffold a new frontend route. The routing, guard, styling, and API-client obligations live in docs/conventions/frontend.md (component rules in docs/conventions/core.md) - read them first and follow them exactly. This skill fixes only the file set and order of operations.
Execution Steps
- Determine Placement & Context:
- All routes live in the single route table in
apps/acme-web/src/app.tsx(createBrowserRouter); there is no file-based routing. Pick the layout group (AuthLayout/PublicLayout/AppShell) per frontend.md §Routing. - Read 2-3 existing routes in
app.tsxand their feature components before writing code.
- All routes live in the single route table in
- Page Component -
src/features/<domain>/<name>-page.component.tsx:- Pages are plain React components with the
componentrole - no routing exemptions. - Register in
app.tsx:lazy(() => import("./features/<domain>/<name>-page.component").then((m) => ({ default: m.<Name>Page }))), then add{ path: "...", element: <...Page /> }to the right layout group'schildren. - Guards, admin-sidebar pairing, and param-redirect gotchas: frontend.md §Routing and §Role guards.
- Pages are plain React components with the
- Feature Components -
src/features/<domain>/, per frontend.md §Components and §Styling. - Query Hooks -
src/hooks/use-<name>.hook.ts: TanStack Query withgetApiClient()per frontend.md §API client. - Verify: Run
pnpm typecheckto confirm types resolve, then load the route on the dev port (frontend.md §Routing).
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 · 21 lines · 58 tokens per session scan A bd7e9a5c7a64
new-frontend-route is a skill published in the GitHub repository AlexisBalayre/claude-code-power-config (2 stars, last pushed 1mo ago), licensed MIT. It adds 58 tokens to every session and 438 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.
Other skills, from other repositories
remotion
Render a short (10s) video on any topic with Remotion - the agent writes a storyboard JSON, a bundled React/Remotion project renders it to an MP4, and the clip is committed to the repo and delivered by URL. No editor, no external generative API.
generic-react-feature-developer
Guide feature development for React applications with architecture focus. Covers Zustand/Redux patterns, IndexedDB usage, component systems, lazy loading strategies, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.
generic-react-ux-designer
Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design…
generic-react-design-system
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
generic-react-code-reviewer
Review React/TypeScript code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Enforces TypeScript strict mode, GPU-accelerated animations, WCAG AA accessibility, bundle size limits, and surgical simplicity. Use when completing features, before commits, or…
frontend-code-review
Trigger when the user requests a review of frontend files (e.g., .tsx, .ts, .js). Support both pending-change reviews and focused file reviews while applying the checklist rules.