Angular Idioms and Patterns
irahardianto/awesome-agv
Coding conventions for Angular 19 and later: standalone components, signals, OnPush change detection, lazy routes and where RxJS still belongs.
Explains LobeHub's split between src/routes page segments and src/features domain code, and where router config, redirects and platform adapters belong.
Install SPA Routes and Features
$ npx skills add lobehub/lobehub --skill spa-routes -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lobehub/lobehub spa-routes --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/spa-routes .claude/skills/spa-routes && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "spa-routes" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/spa-routes into .claude/skills/spa-routes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spa-routes", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/lobehub/lobehub/tree/canary/.agents/skills/spa-routesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add lobehub/lobehub --skill spa-routes -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lobehub/lobehub spa-routes --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/spa-routes .agents/skills/spa-routes && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "spa-routes" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/spa-routes into .agents/skills/spa-routes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spa-routes", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lobehub/lobehub --skill spa-routes -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lobehub/lobehub spa-routes --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/spa-routes .cursor/skills/spa-routes && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "spa-routes" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/spa-routes into .cursor/skills/spa-routes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spa-routes", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/lobehub/lobehub.git --path .agents/skills/spa-routes--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add lobehub/lobehub --skill spa-routes -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lobehub/lobehub spa-routes --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/spa-routes .gemini/skills/spa-routes && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "spa-routes" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/spa-routes into .gemini/skills/spa-routes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spa-routes", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install lobehub/lobehub spa-routesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add lobehub/lobehub --skill spa-routes -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/spa-routes .github/skills/spa-routes && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "spa-routes" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/spa-routes into .github/skills/spa-routes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spa-routes", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lobehub/lobehub --skill spa-routes -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lobehub/lobehub spa-routes --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/spa-routes .opencode/skills/spa-routes && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "spa-routes" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/spa-routes into .opencode/skills/spa-routes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spa-routes", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
spa-routes- GitHub stars
- 83k
- Token cost
- ~3.5k tokens
- SKILL.md length
- 1,334 words
- Files
- 1
- Skills in repo
- 50
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Explains LobeHub's split between src/routes page segments and src/features domain code, and where router config, redirects and platform adapters belong.
- Works in 6 steps: What Belongs in src/routes/ (roots) → What Belongs in src/features/ → How to Add a New SPA Route → …
- Adding a new SPA route or route segment
- SKILL.md covers When to Use This Skill, 1. What Belongs in src/routes/…, 2. What Belongs in src/features/ and 3. How to Add a New SPA Route, plus 5 more sections
- Calls git
What it does
The skill documents the SPA layout. The src/spa folder holds the entry points for web, mobile and desktop plus the router config, src/routes holds only page segments, and src/features holds business logic and UI by domain. Each route directory should contain only a thin layout, a page entry and dynamic-segment pages, which import and compose from features, with no new features folders or heavy components inside routes.
One constraint applies to the shared desktop router: common Web and Electron paths, nesting, metadata, lazy loaders and preload groups go in desktopRouter.shared.tsx, and the two platform config files are thin adapters, changed only for real runtime differences, with no route duplicated in both. Use it when adding a route or segment, refactoring layout and page files, moving route-specific logic into features, or deciding between a route folder and a feature folder.
When your agent uses it
- Adding a new SPA route or route segment
- Moving route-specific components into the features folder
- Deciding whether code belongs in a route folder or a feature folder
Example prompts
- “Add a new route for scheduled tasks with a thin page that renders a feature component.”
- “This route folder has business logic in it. Move it into src/features.”
- “Where should the shared route for the desktop and web apps be defined?”
Workflow steps
6 steps, taken from the step headings in SKILL.md.
- What Belongs in src/routes/ (roots)
- What Belongs in src/features/
- How to Add a New SPA Route
- How to Divide Files (route vs feature)
- Progressive Migration (existing code)
- Reference Structure (after Phase 1)
What it can do on your machine
Read from SKILL.md and the folder at commit 31b02b5. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
git
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
SPA Routes and Features loads about 3.5k tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 1,334 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,334 words (~3,460 tokens).
- name
- spa-routes
- user-invocable
- false
Files
Just SKILL.md in .agents/skills/spa-routes of lobehub/lobehub.
Open the folder on GitHubat commit 31b02b5
Compare with similar skills
SPA Routes and Features next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| SPA Routes and Features this skilllobehub/lobehub | 83k | — | ~3.5k | Automated safety check: Pass | Custom licence | |
| Angular Idioms and Patternsirahardianto/awesome-agv | 156 | — | ~3.8k | Automated safety check: Pass | MIT | |
| Walkontable Engine Developmenthandsontable/handsontable | 22k | — | ~3.1k | Automated safety check: Pass | Custom licence | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None | |
| GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills | 16k | 3 repos | ~2.6k | Automated safety check: Pass | MIT |
Similar skills
Walkontable Engine Development
handsontable/handsontable
Rules for changing Handsontable's Walkontable rendering engine: the TableView boundary, dependency injection through wire.ts and DOM geometry reads via GeometryReader.
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
GSAP in Vue, Nuxt and Svelte
greensock/gsap-skills
Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.
Svelte Core Best Practices
rilldata/rill
Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.
More from lobehub/lobehub
All 51 skills in this repoLobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Acceptance Evidence for Deliveries
lobehub/lobehub
Verifies a delivery end to end by driving the real product on a CLI, web, desktop or iOS Simulator surface, capturing evidence and publishing a round with the lh CLI.
Git Worktree Cleanup
lobehub/lobehub
Audits stale Git worktrees and branches with a bundled script, classifies each one, and deletes only after you approve the exact candidates.
LobeHub Alint Rule Set Maintenance
lobehub/lobehub
Maintains LobeHub's model-backed alint rule set: writing rules, removing false positives against real code, deciding warn versus error and tracking token cost.
LobeHub Builtin Tool Authoring
lobehub/lobehub
Guides building LobeHub builtin agent tools, from the manifest and execution runtime to executors, chat UI renders and registry wiring.
LobeHub Data Fetching Layers
lobehub/lobehub
Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.
Related
Categories
Questions about SPA Routes and Features
What does SPA Routes and Features do?
Explains LobeHub's split between src/routes page segments and src/features domain code, and where router config, redirects and platform adapters belong. The skill documents the SPA layout. The src/spa folder holds the entry points for web, mobile and desktop plus the router config, src/routes holds only page segments, and src/features holds business logic and UI by domain.
When should I use SPA Routes and Features?
SPA Routes and Features fits situations like: adding a new SPA route or route segment; moving route-specific components into the features folder; deciding whether code belongs in a route folder or a feature folder.
How do I install SPA Routes and Features in Claude Code?
Run `npx skills add lobehub/lobehub --skill spa-routes -a claude-code`. Or copy the skill folder (.agents/skills/spa-routes in lobehub/lobehub) into .claude/skills/spa-routes in your project. Claude Code loads it when a task matches its description.
How do I install SPA Routes and Features in Codex?
Run `npx skills add lobehub/lobehub --skill spa-routes -a codex`. Or copy the skill folder (.agents/skills/spa-routes in lobehub/lobehub) into .agents/skills/spa-routes in your project. Codex loads it when a task matches its description.
Can I use SPA Routes and Features in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lobehub/lobehub --skill spa-routes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/spa-routes, .gemini/skills/spa-routes, .github/skills/spa-routes and .opencode/skills/spa-routes in your project.
What does SPA Routes and Features need to run?
Going by SKILL.md and its folder, SPA Routes and Features needs the command-line tools its instructions call (git).
Does SPA Routes and Features access the network?
SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is SPA Routes and Features safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does SPA Routes and Features use?
SPA Routes and Features has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does SPA Routes and Features use?
About 3.5k tokens (SKILL.md is roughly 14k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to SPA Routes and Features?
Skills that share tags, products or a category with SPA Routes and Features: Angular Idioms and Patterns (irahardianto/awesome-agv, 156 stars), Walkontable Engine Development (handsontable/handsontable, 22k stars), React Router Development (remix-run/react-router, 57k stars) and React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains SPA Routes and Features?
lobehub (a GitHub organization) maintains it in lobehub/lobehub, which has 83,127 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 11, 2026.
Source: lobehub/lobehub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.