adding-a-new-app-route
Fully wires up a new route with required boilerplate, following this repo's conventions for subapps. Use when user wants to add a new route or app or subapp or page or screen.
Best use case
adding-a-new-app-route is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Fully wires up a new route with required boilerplate, following this repo's conventions for subapps. Use when user wants to add a new route or app or subapp or page or screen.
Teams using adding-a-new-app-route should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/adding-a-new-app-route/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How adding-a-new-app-route Compares
| Feature / Agent | adding-a-new-app-route | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Fully wires up a new route with required boilerplate, following this repo's conventions for subapps. Use when user wants to add a new route or app or subapp or page or screen.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Adding a new route
Use this checklist to track your work:
- [ ] Determine name & route for the new app
- [ ] Determine the kind of app to create
- [ ] Create a folder for the new app
- [ ] Mount the new app in the global routes listing
- [ ] Consider next steps
## Determine name & route for the new app
If the name of the new app and the desired route have not already been specified, `AskUserQuestion` to determine that information, e.g. `MyApp` at `/my-app`.
## Determine the kind of app to create
- **Static**: The simplest possible app with static-only content
- **Dynamic**: A typical app that fetches data based on route params
Use the answer in the next step.
## Create a folder for the new app
- Choose the correct template directory based on the previous step:
- **Static**: `./templates/static/Replace/`
- **Dynamic**: `./templates/dynamic/Replace/`
- Use that directory as the template for the new subapp
- Recreate that folder structure under `/src/Apps/<NewApp>`
- Replace all instances of `replace` and `Replace` with appropriate naming (case-sensitive)
## Mount the new app in the global routes listing
Add the new route to the main route list at `src/routes.tsx`. Follow existing conventions re: alphabetization.
## Consider next steps
Additional dev advice:
- You may need to restart the server for the new route to take effect
- Then visit http://localhost:4000/{replace} to see your new app
- Examine the generated code for additional follow-ups
## Celebrate
Indicate you are done with a /beepRelated Skills
adding-stacks
Use when adding a new framework/stack to create-faster CLI tool - addresses copy-first mentality, incomplete implementations, and missing dependencies
adding-phases
Use this skill to add planned work discovered during execution to the end of the current milestone in the roadmap. This skill appends sequential phases to the current milestone's phase list, automatically calculating the next phase number. Triggers include "add phase", "append phase", "new phase", and "create phase". This skill updates ROADMAP.md and STATE.md accordingly.
adding-persistent-event
Adds a new type of event that gets persisted to the event log. Use this when adding new kinds of write operations to the system or when adding new events to existing code.
adding-localizable-strings
Adds new human-readable strings that are translated into users' languages.
1k-adding-socket-events
Adds new WebSocket event subscriptions to OneKey. Use when implementing new socket events, handling server push messages, or adding real-time data subscriptions. Socket, WebSocket, event, subscription, push, real-time.
makepad-router
CRITICAL: Use for ALL Makepad/Robius questions including widgets, layout, events, and shaders. Triggers on: makepad, robius, live_design, app_main, Widget, View, Button, Label, Image, TextInput, ScrollView, RoundedView, SolidView, PortalList, Markdown, Html, TextFlow, layout, Flow, Walk, padding, margin, width, height, Fit, Fill, align, spacing, event, action, Hit, FingerDown, FingerUp, KeyDown, handle_event, click, tap, animator, animation, state, transition, hover, pressed, ease, shader, draw_bg, draw_text, Sdf2d, pixel, gradient, glow, shadow, font, text_style, font_size, glyph, typography, tokio, async, spawn, submit_async, SignalToUI, post_action, apply_over, TextOrImage, modal, collapsible, drag drop, AppState, persistence, theme, Scope, deploy, package, APK, IPA, WASM, cargo makepad, makepad widget, makepad 组件, makepad 按钮, makepad 布局, makepad 事件, makepad 动画, makepad 着色器, 创建组件, 自定义组件, 开发应用, 居中, 对齐, 点击事件, 悬停效果, 渐变, 阴影, 字体大小
adding-animations
Add micro-interactions and animations using Framer Motion. Use when user asks about animations, transitions, hover effects, or motion design. MANDATORY for every component.
openrouter-research
Research OpenRouter API docs, available Grok model IDs, vision capability for the judge service, and integration patterns. Use when implementing openrouter_tool.py, when checking which Grok model supports vision/image input for judge_service.py, when OpenRouter returns unexpected errors, or when verifying model availability and context limits.
adding-todos
Use this skill to capture an idea, task, or issue that surfaces during a Kata session as a structured todo for later work. This skill creates markdown todo files in the .planning/todos/pending directory with relevant metadata and content extracted from the conversation. Triggers include "add todo", "capture todo", "new todo", and "create todo".
adding-markdown-highlighted-comments
Use when adding responses to markdown documents with user-highlighted comments, encountering markup errors, or unsure about mark tag placement - ensures proper model-highlight formatting with required attributes and correct placement within markdown elements
add-route-context
为Flutter页面添加路由上下文记录功能，支持日期等参数的AI上下文识别。当需要让AI助手通过"询问当前上下文"功能获取页面状态（如日期、ID等参数）时使用。适用场景：(1) 日期驱动的页面（日记、活动、日历等），(2) ID驱动的页面（用户详情、订单详情等），(3) 任何需要AI理解当前页面参数的场景
1k-adding-chains
Guide for adding new blockchain chains to OneKey. Use when implementing new chain support, adding blockchain protocols, or understanding chain architecture. Triggers on chain, blockchain, protocol, network, coin, token, add chain, new chain.