New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Architecture

by exceptionless in exceptionless/Exceptionless

Apply Exceptionless Svelte conventions when adding or restructuring frontend features.

Apache-2.0Auto-check passedFrontend & Design

Install Frontend Architecture

skills CLI
$ npx skills add exceptionless/Exceptionless --skill frontend-architecture -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install exceptionless/Exceptionless frontend-architecture --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/exceptionless/Exceptionless.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-architecture .claude/skills/frontend-architecture && rm -rf skills-src

Use ~/.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/

Facts

Skill name
frontend-architecture
GitHub stars
2.5k
Token cost
~964 tokens
SKILL.md length
461 words
Files
1
Skills in repo
11
Repo updated
First seen
Licence
Apache-2.0

At a glance

Apply Exceptionless Svelte conventions when adding or restructuring frontend features.

  • Frontend & Design work in your project
  • SKILL.md covers Feature structure, Local UI conventions, Svelte and TypeScript details and Accessibility and interaction, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Architecture is an agent skill from exceptionless/Exceptionless. Apply Exceptionless Svelte conventions when adding or restructuring frontend features.

Its SKILL.md is about 960 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Svelte and TanStack. The repository describes itself as: Exceptionless application. The licence is Apache-2.0.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/frontend-architecture”

What it can do on your machine

Read from SKILL.md and the folder at commit 300e8ca. 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

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    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

Frontend Architecture loads about 964 tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 461 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~27
When it runs · the whole SKILL.md, loaded when a task matches
~964

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

The full file from exceptionless/Exceptionless at commit 300e8ca, republished under its Apache-2.0 licence (© exceptionless). 461 words, ~964 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-architecture/SKILL.md (or your agent's skills folder).
name
frontend-architecture
description
Apply Exceptionless Svelte conventions when adding or restructuring frontend features.

Frontend Architecture

Work in src/Exceptionless.Web/ClientApp, the sole application frontend at /, and follow its AGENTS.md. Generate root routes with $app/paths; preserve primary historical hash links through the incoming-link compatibility layer.

Feature structure

Keep feature behavior in src/lib/features/<feature>/: API operations in api.svelte.ts, local types in models.ts, validation in schemas.ts or validators.ts, and UI in components/. Reuse generated API types through feature aliases. Match the nearest current feature instead of copying a static scaffold.

Local UI conventions

  • Reuse $comp, $shared, and $lib helpers. In particular, use createQueryParameters for route query binding.
  • Use shared formatter components in src/lib/features/shared/components/formatters/ for dates, relative time, duration, bytes, numbers, currency, percentages, booleans, and date math.
  • Match the existing dense, restrained operational UI and its theme tokens.
  • Use href for ordinary navigation; use action handlers when work must finish before navigating.
  • Prefer derived state for computed values; reserve effects for side effects. Use current Svelte event attributes and snippets.
  • Preserve accessible labels, focus behavior, dialog titles, and field-error associations.

Svelte and TypeScript details

  • Use options.ts for shared option sets within a feature. Use $features for feature imports and $generated for generated contracts; extend generated types in feature-owned files.
  • Prefer named imports; use namespace imports for composite components such as Dialog, DropdownMenu, Field, and Card.
  • Keep files and directories kebab-case. Follow the app's ESLint rules for braces and statement formatting.
  • Avoid any; use generated types, explicit interfaces, unknown, and type guards. Spell out identifiers such as organization and filter.
  • Await asynchronous work and handle failures at the appropriate local boundary. Do not let rejected promises bypass error UI or mark an operation complete before its required work finishes.
  • Use $derived for computed values and $effect for side effects. Use untrack() selectively when an incidental read should not become an effect dependency; do not hide dependencies needed for correctness.
  • Use Svelte event attributes (onclick, oninput) and snippets. Use array class syntax or cn() for conditional classes.
Show full SKILL.md (127 more words)Show less

Accessibility and interaction

  • Preserve native semantic elements, landmarks, and a clear heading hierarchy. Shared UI components complement document semantics rather than replacing them with styled divs.
  • Associate each control with a label. Give icon-only buttons an accessible name and hide decorative icons from assistive technology.
  • Give dialogs a title, even when visually hidden. Preserve keyboard navigation and visible focus states.
  • Set aria-invalid on invalid controls and connect help/error messages with aria-describedby.
  • For motion work, consult the frontend's installed emil-design-eng skill. Apply its interaction principles through existing Svelte components, preserving reduced-motion behavior and the operational UI's restraint.

Verification

Use colocated Vitest/Testing Library tests and local Playwright flows as appropriate. Prefer role and label queries. Follow the app's validation command policy; inspect the rendered flow when UI behavior changes.

© exceptionless, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/frontend-architecture of exceptionless/Exceptionless.

Open the folder on GitHubat commit 300e8ca

Compare with similar skills

Frontend Architecture 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.

Frontend Architecture compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Architecture this skillexceptionless/Exceptionless2.5k—~964Automated safety check: PassApache-2.0
Frontend Guidelightly-ai/lightly-studio896—~2.9kAutomated safety check: PassApache-2.0
Query LayerEpicenterHQ/epicenter4.8k—~2.5kAutomated safety check: PassCustom licence
Tanstack Querybskimball/tanstack-hono1191 repos~5.4kAutomated safety check: PassMIT
Tanstack Virtualudecode/plate17k—~2.8kAutomated safety check: PassCustom licence
Tanstack TableEpicenterHQ/epicenter4.8k—~697Automated safety check: PassCustom licence

Similar skills

  • Frontend Guide

    lightly-ai/lightly-studio

    Read before writing or reviewing any frontend code in lightlystudioview - Svelte, TypeScript, or SvelteKit files.

    896 GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Query Layer

    EpicenterHQ/epicenter

    Query boundaries with TanStack Query and Wellcrafted Results.

    4.8k GitHub stars~2.5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Tanstack Query

    bskimball/tanstack-hono

    Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.

    119 GitHub starsUsed in 1 repo~5.4k tokens
    Frontend & DesignAuto-check passed

  • Tanstack Virtual

    udecode/plate

    Headless UI for virtualizing large element lists at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular.

    17k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Tanstack Table

    EpicenterHQ/epicenter

    Apply TanStack Table UI-state patterns for Svelte data tables, including columns, rendering, sorting, filtering, pagination, and row identity.

    4.8k GitHub stars~697 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Svelte

    EpicenterHQ/epicenter

    Apply Epicenter’s Svelte 5 patterns for runes, components, lifecycles, and workspace-backed state.

    4.8k GitHub stars~2.6k tokensUpdated today
    Frontend & DesignAuto-check passed

More from exceptionless/Exceptionless

All 11 skills in this repo

  • Emil Design Eng

    exceptionless/Exceptionless

    This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

    2.5k GitHub starsUsed in 28 repos~6.8k tokens
    Auto-check passed

  • Shadcn Svelte

    exceptionless/Exceptionless

    Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI.

    2.5k GitHub stars~3.6k tokensUpdated today
    Auto-check passed

  • Dogfood

    exceptionless/Exceptionless

    Systematically dogfood Exceptionless locally. An agent skill from exceptionless/Exceptionless.

    2.5k GitHub stars~759 tokensUpdated today
    Auto-check passed

  • Aspire Diagnostics

    exceptionless/Exceptionless

    Inspect local Aspire resource health, logs, traces, and browser telemetry.

    2.5k GitHub stars~769 tokensUpdated today
    Auto-check passed

  • Foundatio Repositories

    exceptionless/Exceptionless

    Query, aggregate, patch, or paginate Exceptionless data through its Elasticsearch repository abstractions.

    2.5k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

  • Releasenotes

    exceptionless/Exceptionless

    Evaluate semantic-version impact and generate formatted changelogs from git history since the last release tag.

    2.5k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Frontend Architecture

What does Frontend Architecture do?

Apply Exceptionless Svelte conventions when adding or restructuring frontend features. Frontend Architecture is an agent skill from exceptionless/Exceptionless. Apply Exceptionless Svelte conventions when adding or restructuring frontend features.

When should I use Frontend Architecture?

Frontend Architecture fits situations like: frontend & Design work in your project.

How do I install Frontend Architecture in Claude Code?

Run `npx skills add exceptionless/Exceptionless --skill frontend-architecture -a claude-code`. Or copy the skill folder (.agents/skills/frontend-architecture in exceptionless/Exceptionless) into .claude/skills/frontend-architecture in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Architecture in Codex?

Run `npx skills add exceptionless/Exceptionless --skill frontend-architecture -a codex`. Or copy the skill folder (.agents/skills/frontend-architecture in exceptionless/Exceptionless) into .agents/skills/frontend-architecture in your project. Codex loads it when a task matches its description.

Can I use Frontend Architecture 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 exceptionless/Exceptionless --skill frontend-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-architecture, .gemini/skills/frontend-architecture, .github/skills/frontend-architecture and .opencode/skills/frontend-architecture in your project.

What does Frontend Architecture need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Architecture is instructions for the agent only.

Does Frontend Architecture access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Architecture 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 Frontend Architecture use?

Frontend Architecture is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Architecture use?

About 964 tokens (SKILL.md is roughly 3.9k 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 Frontend Architecture?

Skills that share tags, products or a category with Frontend Architecture: Frontend Guide (lightly-ai/lightly-studio, 896 stars), Query Layer (EpicenterHQ/epicenter, 4.8k stars), Tanstack Query (bskimball/tanstack-hono, 119 stars) and Tanstack Virtual (udecode/plate, 17k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Architecture?

exceptionless (a GitHub organization) maintains it in exceptionless/Exceptionless, which has 2,456 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 8, 2026.

Source: exceptionless/Exceptionless on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.