MCPInstall

building-edgespark-apps

Build and modify EdgeSpark apps. Use when a project has edgespark.toml, the user mentions EdgeSpark, or work involves the edgespark CLI, server SDK types, storage/auth/database workflows, deployment, or @edgespark/web.

Installs
577
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/edgesparkhq/agent-skills --skill building-edgespark-apps
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads building-edgespark-apps automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

EdgeSpark App Development

Use this skill for EdgeSpark-specific implementation and workflow decisions.

This skill is not EdgeSpark documentation. For exact contracts, read source, generated types, CLI help, and docs/Mintlify MCP. Use this skill for workflow, guardrails, and bug-prevention.

The reliable public surface in this repo is:

  • the edgespark CLI
  • scaffolded project structure from edgespark init
  • generated src/__generated__/edgespark.d.ts
  • generated src/__generated__/server-types.d.ts
  • the @edgespark/web browser SDK

Use @edgespark/web and authUI.mount() as the default browser auth path for this repo unless custom forms are explicitly requested.

Read Order

Read only what is needed for the task:

  1. edgespark.toml
  2. repo or project agent instruction file (AGENTS.md, CLAUDE.md, or GEMINI.md)
  3. src/__generated__/edgespark.d.ts
  4. src/__generated__/server-types.d.ts
  5. src/defs/index.ts, src/defs/db_schema.ts, src/defs/db_relations.ts, src/defs/runtime.ts, src/defs/storage_schema.ts
  6. node_modules/@edgespark/web/dist/index.d.ts when installed for exact browser SDK types
  7. node_modules/@edgespark/web/README.md when installed for managed auth appearance variable meanings and defaults

Then load the specific reference you need:

  • Day-to-day development workflows by surface: dev-workflow.md
  • Scaffold layout and generated-file rules: project-structure.md
  • Error-prone server-side usage patterns: server-patterns.md
  • Small web usage patterns for @edgespark/web: web-patterns.md
  • Auth config, OAuth providers, callback URLs, managed auth theming, and Google One Tap: auth-patterns.md

Hard Rules

  • Run edgespark <command> --help before assuming flags or exact behavior.
  • Run edgespark commands on behalf of the user. Only hand off steps that explicitly require a human browser action.
  • Never run multiple edgespark commands in parallel.
  • Treat scaffolded src/__generated__/edgespark.d.ts and src/__generated__/server-types.d.ts as placeholders until edgespark pull types populates them.
  • Do not edit files under src/__generated__/.
  • Use @edgespark/web for new browser code.
  • Use es.api.fetch() for app API calls, not bare fetch() to same-origin app routes.
  • Use authUI.mount() for managed auth UI unless custom forms are explicitly requested.
  • For managed auth theming, use appearance.theme and appearance.variables from @edgespark/web; do not tell users to edit SDK CSS for routine light/dark or brand theming.
  • For custom browser auth flows, use client.auth from @edgespark/web, not manual /api/_es/auth/* calls.
  • Import auth from edgespark/http, not edgespark.
  • Auth is a managed service at /api/_es/auth/. OAuth callback URLs use /api/_es/auth/callback/<provider>, not /api/auth/.
  • Treat /api/_es/auth/*, storage provider details, and deployment internals as platform implementation details unless the user is explicitly debugging them.
  • Do not import runtime SDK values from edgespark inside src/defs/**.
  • Use db.batch() instead of db.transaction().
  • Use migration workflow for schema changes. Do not use DDL through edgespark db sql.
  • Store S3 URIs in the database and return presigned URLs to clients.
  • For client-originated uploads, generate presigned PUT URLs instead of streaming files through the Worker.
  • Update src/defs/runtime.ts before using vars.get() or secret.get().
  • Use edgespark ... --help for exact command syntax instead of duplicating help text in this skill.
  • If exact behavior is unclear, prefer source code, generated types, or docs MCP over guessing.

Default Workflow

For the operational workflow by area, read dev-workflow.md.

Existing project

  1. Read generated type files first.
  2. Read the relevant defs files before changing schema, storage, or runtime keys.
  3. Read the web SDK types before touching auth or browser API code.

Fresh scaffold

  1. Inspect edgespark.toml to confirm server-only vs full-stack layout.
  2. If generated files are placeholders, run edgespark pull types before making SDK assumptions.
  3. Follow the scaffolded root, server/, and web/ agent instruction files for package boundaries.

When Stuck

  1. Read the generated type files again before assuming an API shape.
  2. Run the relevant edgespark ... --help command before guessing flags.
  3. Use docs/Mintlify MCP for product documentation details.

Quick Start

Server:

import { db, storage, vars, secret, ctx } from "edgespark";
import { auth } from "edgespark/http";
import { posts, buckets } from "@defs";
import { Hono } from "hono";
import { eq } from "drizzle-orm";

const app = new Hono()
  .get("/api/posts", async (c) => {
    return c.json(await db.select().from(posts));
  })
  .post("/api/posts", async (c) => {
    const data = await c.req.json();
    const [post] = await db.insert(posts)
      .values({ ...data, user_id: auth.user!.id })
      .returning();
    return c.json(post, 201);
  });

export default app;

Web:

import { createEdgeSpark } from "@edgespark/web";
import "@edgespark/web/styles.css";

const es = createEdgeSpark();

es.authUI.mount(document.getElementById("auth")!, {
  redirectTo: "/dashboard",
});

const res = await es.api.fetch("/api/posts");
const posts = await res.json();

FAQ

What does the building-edgespark-apps skill do?

Build and modify EdgeSpark apps. Use when a project has edgespark.toml, the user mentions EdgeSpark, or work involves the edgespark CLI, server SDK types, storage/auth/database workflows, deployment, or @edgespark/web.

How do I install building-edgespark-apps?

Run npx skills add https://github.com/edgesparkhq/agent-skills --skill building-edgespark-apps in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/building-edgespark-apps/ (personal) or .claude/skills/building-edgespark-apps/ (project).

Which AI agents can use building-edgespark-apps?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is building-edgespark-apps safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains building-edgespark-apps?

It is published by edgesparkhq in edgesparkhq/agent-skills. It has 577 recorded installs.

More from edgesparkhq/agent-skills

View all →

edgespark-frontend-design

edgesparkhq/agent-skills

Design and redesign EdgeSpark frontends with distinctive, production-grade visual direction instead of generic AI-looking UI. Use when building or polishing landing pages, marketing sites, dashboards, auth flows, portfolios, product surfaces, or reusable frontend sections in EdgeSpark, especially when the task mentions design quality, aesthetics, typography, color, layout, motion, art direction, or making the UI feel more premium and original.

Frontend & Design588 installs

Popular backend & apis skills

View category →

find-skills

vercel-labs/skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

OfficialBackend & APIs4.1M installs

entra-app-registration

microsoft/azure-skills

Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.

OfficialBackend & APIs566.7K installs

This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).

Backend & APIs514.8K installs

embedded-captions

heygen-com/hyperframes

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Backend & APIs453.3K installs

entra-agent-id

microsoft/azure-skills

Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).

OfficialBackend & APIs336.6K installs

neon

neondatabase/agent-skills

Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.

Backend & APIs237.1K installs