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

Linear Local First Architecture

by boraoztunc in boraoztunc/skills

A skill your agent uses when building a web app that must feel instant, when users complain about spinners or perceived slowness despite acceptable latency, or when designing a local-first sync…

Apache-2.0Auto-check passed

Install Linear Local First Architecture

skills CLI
$ npx skills add boraoztunc/skills --skill linear-local-first-architecture -a claude-code

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

GitHub CLI
$ gh skill install boraoztunc/skills linear-local-first-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/boraoztunc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/linear-local-first-architecture .claude/skills/linear-local-first-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
linear-local-first-architecture
GitHub stars
398
Token cost
~3.2k tokens
SKILL.md length
1,062 words
Files
1
Skills in repo
52
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when building a web app that must feel instant, when users complain about spinners or perceived slowness despite acceptable latency, or when designing a local-first sync…

  • Works in 6 steps: The network is the bottleneck—eliminate… → Treat the browser as the database for… → Mutations apply locally first, sync… → …
  • Building a web app that must feel instant
  • SKILL.md covers When to use this skill, Core principles, Tactics and Anti-patterns, plus 1 more section
  • Reaches static.linear.app

What it does

Linear Local First Architecture is an agent skill from boraoztunc/skills. Use when building a web app that must feel instant, when users complain about spinners or perceived slowness despite acceptable latency, or when designing a local-first sync architecture with optimistic updates.

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

The repository describes itself as: Claude Code skills for copywriting, SEO, design, and more. The licence is Apache-2.0.

When your agent uses it

  • Building a web app that must feel instant
  • Users complain about spinners
  • Perceived slowness despite acceptable latency
  • Designing a local-first sync architecture with optimistic updates

Example prompts

  • “/linear-local-first-architecture”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. The network is the bottleneck—eliminate it wherever possible. Every network request costs hundreds of milliseconds; the best optimization…
  2. Treat the browser as the database for each user. Store the full workspace in IndexedDB and hydrate into an in-memory observable graph; the…
  3. Mutations apply locally first, sync asynchronously. Update the local observable immediately so the UI re-renders synchronously, then queue…
  4. Render first, authenticate second. If local data exists, render it immediately and verify the session in the background; only redirect to…
  5. Ship less code in more pieces. Aggressive code splitting, modern-only targets, and per-package vendor chunks reduce initial payload and…
  6. Animate only composited properties. Restrict animations to transform and opacity to keep work on the GPU; never animate layout-triggering…

What it can do on your machine

Read from SKILL.md and the folder at commit 645553c. 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 (its code samples are css, typescript, javascript and html).

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • static.linear.app

    Also links to:

    • performance.dev

    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

Linear Local First Architecture loads about 3.2k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 1,062 words of instructions outside code blocks.

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

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 boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 1,062 words, ~3,209 tokens.

Download SKILL.mdSave it as .claude/skills/linear-local-first-architecture/SKILL.md (or your agent's skills folder).
name
linear-local-first-architecture
description
Use when building a web app that must feel instant, when users complain about spinners or perceived slowness despite acceptable latency, or when designing a local-first sync architecture with optimistic updates.

When to use this skill

  • You're building a productivity tool where perceived speed is critical to user experience
  • Users report the app "feels slow" despite reasonable network latency
  • You need to eliminate loading spinners and skeleton states from user workflows
  • You're architecting a local-first application with offline capabilities
  • You want to implement optimistic updates that feel instant
  • You're designing a keyboard-first interface for power users

Core principles

  1. The network is the bottleneck—eliminate it wherever possible. Every network request costs hundreds of milliseconds; the best optimization is to avoid the request entirely by reading from local state.

  2. Treat the browser as the database for each user. Store the full workspace in IndexedDB and hydrate into an in-memory observable graph; the UI reads from local state, not the server.

  3. Mutations apply locally first, sync asynchronously. Update the local observable immediately so the UI re-renders synchronously, then queue the transaction for background sync to the server.

  4. Render first, authenticate second. If local data exists, render it immediately and verify the session in the background; only redirect to login if the server rejects.

  5. Ship less code in more pieces. Aggressive code splitting, modern-only targets, and per-package vendor chunks reduce initial payload and improve cache granularity.

  6. Animate only composited properties. Restrict animations to transform and opacity to keep work on the GPU; never animate layout-triggering properties like width, height, or margin.

Tactics

Set up local-first data architecture

Store the workspace in IndexedDB and hydrate into an in-memory observable store (MobX in Linear's case). The UI queries the local store, not the server.

typescript
// A traditional web app updating the server
async function updateIssue({ issue }) {
  showSpinner();
  const response = await fetch(`/api/issues/${issue.id}`, {
    method: "PATCH",
    body: JSON.stringify({ title: issue.title }),
  });
  const updated = await response.json();
  setIssue(updated)
  hideSpinner();
}

// vs Linear
issue.title = "Faster app launch";
issue.save();

The first line updates an in-memory datastore (MobX observable). The second line queues a transaction that the sync engine batches and flushes to the server. The UI re-renders synchronously off the local update—no spinners, no waiting.

Implement optimistic updates with standard libraries

If you're not building a custom sync engine, use libraries like Tanstack Query or SWR with optimistic updates:

typescript
// optimistic mutation with SWR
mutate(
  `/api/issues/${issue.id}`,
  { ...issue, title: "Faster app launch" },
  false
);

// vs Linear
issue.title = "Faster app launch";
issue.save();

The key: UI responsiveness should not depend on network latency. Users perceive speed based on how quickly the interface reacts, not how quickly the server responds.

Reduce bundle size with modern-only builds

Target only modern browsers, drop legacy polyfills, and use aggressive code splitting:

typescript
// vite.config.ts (reconstruction; matches observed chunk graph)
export default defineConfig({
  plugins: [react()],
  build: {
    target: "esnext",            // no legacy syntax, no polyfills
    cssMinify: "lightningcss",
    modulePreload: { polyfill: false },
    rollupOptions: {
      output: {
        // One chunk per npm package > ~3 KB. Cache invalidation
        // becomes per-library instead of per-app-revision.
        manualChunks(id) {
          if (id.includes("node_modules")) {
            const pkg = id.match(/node_modules\/([^/]+)/)?.[1];
            if (pkg) return `vendor-${pkg}`;
          }
        },
      },
    },
  },
});

Split every npm package into its own chunk. A traditional vendor.js invalidates the entire dependency graph on any bump; per-package chunking makes cache invalidation fine-grained.

Preload critical chunks in parallel

Eliminate the waterfall of fetch → parse → fetch imports by declaring all critical chunks in <head>:

html
<script type=module crossorigin
  src="https://static.linear.app/client/assets/html.2_JBQs3Q.js"></script>
<link rel=modulepreload crossorigin
  href="https://static.linear.app/client/assets/vendor-mobx.Crhy2qQc.js">
<link rel=modulepreload crossorigin
  href="https://static.linear.app/client/assets/SyncWebSocket.Djw6l_Op.js">
<link rel=modulepreload crossorigin
  href="https://static.linear.app/client/assets/DatabaseManager.DKssGAN8.js">
<!-- ...around many more -->

The crossorigin attribute on each preload matches the crossorigin on the entry script, so the browser reuses the cached fetch. The cold-load timeline collapses from a sequential waterfall into a single parallel batch.

Precache remaining assets with a service worker

After the first page load, use a service worker to precache route-level chunks in the background:

javascript
// The service worker has a precache manifest baked into its source,
// around 1,200 hashed assets covering route chunks, icons, and fonts.
// It pulls them down lazily after the first page load.

Within seconds of hitting the login screen, the full app sits in cache. Subsequent navigations skip the network entirely; the service worker answers directly from cache. Combined with IndexedDB, the app works offline.

Inline critical CSS and boot logic

Avoid an external stylesheet fetch by inlining just enough CSS to paint the loading state:

css
<style>
  :root {
    --bg-color: #f5f5f5;
    --bg-base-color: #fcfcfd;
    --bg-border-color: #e0e0e0;
    --sidebar-width: 244px;
  }
  html { background: var(--bg-color); height: 100%; }
  body { font-family: "Inter Variable", Arial, Helvetica, sans-serif; }

  #appBorders {
    border: 1px solid var(--bg-border-color);
    background: var(--bg-base-color);
    margin: 8px 8px 8px var(--sidebar-width);
    border-radius: 12px;
  }

  #logo { transform: translateZ(0); }

  @keyframes logoBackgroundPulse {
    0%   { opacity: 0; transform: scale(0.8); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.0); }
  }
</style>
<script>performance.mark("appStart");</script>

Inline JavaScript restores last-known shell tokens (sidebar bg, width, dark mode) before paint:

javascript
<script>
// Electron context — lets CSS branch on native chrome.
if (navigator.userAgent.includes("Electron") && navigator.userAgent.includes("Linear")) document.documentElement.classList.add("electron");

// No local store → no workspace data → render the auth layout.
if (localStorage.getItem("ApplicationStore") === null) document.documentElement.classList.add("logged-out");

// Restore last-known shell tokens (sidebar bg, width, dark mode) before paint.
const c = JSON.parse(localStorage.getItem("splashScreenConfig") || "{}");
if (c.bgSidebarColor) document.documentElement.style.setProperty("--bg-sidebar-color", c.bgSidebarColor);
if (c.sidebarWidth) document.documentElement.style.setProperty("--sidebar-width", c.sidebarWidth + "px");
if (c.darkMode) document.documentElement.classList.add("dark");

// Compact sidebar to a sliver when the user opens links in the desktop app.
if (JSON.parse(localStorage.getItem("userSettings") || "{}").openLinksInDesktop) document.documentElement.style.setProperty("--sidebar-width", "8px");

</script>

By the time the first JavaScript bundle arrives, the loading screen is already correctly themed, sized, and positioned.

Optimize font loading

Preload variable fonts with correct CORS mode to avoid double-fetching:

html
<!-- in <head> of index.html -->
<link rel="preload"
      href="https://static.linear.app/fonts/InterVariable.woff2?v=4.1"
      as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preconnect" href="https://static.linear.app" crossorigin>
css
@font-face {
  font-family: "Inter Variable";
  font-weight: 100 900;
  font-display: swap;
  src: url(https://static.linear.app/fonts/InterVariable.woff2?v=4.1)
       format("woff2");
}
/* Italic and Berkeley Mono follow the same shape, single woff2 each. */

Variable fonts cover the full 100–900 weight axis in a single woff2. font-display: swap renders the fallback stack immediately and swaps to Inter when it loads. crossorigin="anonymous" on the preload makes the browser reuse the cached font when CSS references it.

Show full SKILL.md (455 more words)Show less
Assume authentication, verify in background

Instead of blocking on session validation, check if local data exists:

javascript
if (localStorage.getItem("ApplicationStore") === null) {
  document.documentElement.classList.add("logged-out");
}

If ApplicationStore exists, the user has used the app before and their workspace is in IndexedDB. Render it immediately. The actual session token sits in a cookie; let the next request (WebSocket handshake, sync delta, any HTTP call) fail with a 401 if the session is stale, then redirect to login.

The flow is "do we have anything to show you," not "do you have a valid session."

Use granular observables for surgical re-renders

Make every property on every model its own observable. When a delta arrives from the server, write to the corresponding observable. The framework (MobX) knows exactly which components depend on which fields and re-renders only those components.

A change that updates one field of one issue re-renders exactly the components that read that field—not the parent list, not the sidebar, one cell. A 50-issue update is 50 cell re-renders, not a list re-render.

Design for keyboard-first interaction

Every common action should have a shortcut. Single letters edit the focused issue. Two-letter combos navigate. Modifiers act globally. Make shortcuts visible everywhere in the UI.

Implement a global command palette (⌘ k) that searches over actions, issues, projects, labels, status changes, navigation, settings. Search runs against the local MobX object pool—no server request, instant results.

Animate only composited properties

Browsers have three tiers of property changes:

  • Composited properties (transform, opacity): GPU-accelerated, independent of main thread
  • Paint-triggering properties (color, background-color, border-color, fill): skip layout but redraw pixels
  • Layout-triggering properties (width, height, top, left, margin, padding): force recomputation of every subsequent element

Never animate layout-triggering properties:

css
/* What Linear does */
.row:hover {
  background-color: var(--color-bg-hover);
  transition: background-color 0.12s;
}
.icon-arrow {
  transform: translateX(0);
  transition: transform 0.15s;
}

/* What you'd write if you didn't know better */
.row:hover {
  margin-left: 2px;       /* triggers layout for every row beneath */
  transition: all 0.2s;   /* and now you're animating margin */
}
Keep animation durations short

Default to shorter transitions than industry norms:

css
/* variables form Linear's stylesheet */

--speed-highlightFadeIn: 0s;
--speed-highlightFadeOut: .15s;
--speed-quickTransition: .1s;
--speed-regularTransition: .25s;
--speed-slowTransition: .35s;

Use asymmetric timing: appear instantly when summoned, fade out over 150ms when dismissed. This makes the interface feel responsive to user intent.

Anti-patterns

❌ Don't wait for network requests before updating the UI. Apply mutations locally first, sync in the background, and rollback only if the server rejects.

❌ Don't animate layout-triggering properties like width, height, margin, padding, top, or left. Stick to transform and opacity.

❌ Don't block initial render on authentication. If local data exists, render it immediately and verify the session asynchronously.

❌ Don't bundle all vendor code into a single chunk. Split each npm package into its own chunk so cache invalidation is per-library, not per-app-revision.

❌ Don't use long animation durations (>250ms) for frequent interactions. Shorter transitions make the app feel faster; reserve longer durations for infrequent, high-impact moments.

❌ Don't fetch data on every navigation if it's already local. Hydrate from IndexedDB on boot, lazy-load heavy tables on demand, and treat the server as a sync target, not a source of truth for the UI.

Source

How's Linear so fast? A technical breakdown

© boraoztunc, 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 linear-local-first-architecture of boraoztunc/skills.

Open the folder on GitHubat commit 645553c

Compare with similar skills

Linear Local First 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.

Linear Local First Architecture compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Linear Local First Architecture this skillboraoztunc/skills398—~3.2kAutomated safety check: PassApache-2.0
Linearasgeirtj/system_prompts_leaks69k—~653Automated safety check: PassCC0-1.0
Linearyc-software/qm15k—~886Automated safety check: PassMIT
Linear Issue Workflowlobehub/lobehub83k—~1.5kAutomated safety check: PassCustom licence
Make Interfaces Feel Betteraffaan-m/ECC276k1 repos~1.2kAutomated safety check: PassMIT
Linearkaranhudia/borg-ui1.7k—~1.7kAutomated safety check: PassAGPL-3.0

Similar skills

  • Linear

    asgeirtj/system_prompts_leaks

    Read and manage software issues, tickets, projects, and planning data in Linear.

    69k GitHub stars~653 tokensUpdated today
    Product & Project ManagementAuto-check passed

  • Linear

    yc-software/qm

    Search, read, create, and update the user's Linear issues, projects, and comments through per-user OAuth.

    15k GitHub stars~886 tokensUpdated today
    Backend & APIsAuto-check passed

  • Linear Issue Workflow

    lobehub/lobehub

    Handles Linear issues for the team: reading details and images, checking sub-issues, marking progress, labeling AI-created issues and writing completion comments.

    83k GitHub stars~1.5k tokensUpdated today
    Productivity & AutomationAuto-check passed

  • Make Interfaces Feel Better

    affaan-m/ECC

    Apply concrete design-engineering details that make interfaces feel polished.

    276k GitHub starsUsed in 1 repo~1.2k tokens
    Frontend & DesignAuto-check passed

  • Linear

    karanhudia/borg-ui

    Use Symphony's lineargraphql client tool for raw Linear GraphQL operations such as comment editing and upload flows.

    1.7k GitHub stars~1.7k tokensUpdated today
    Backend & APIsAuto-check passed

  • Linear Automation

    davila7/claude-code-templates

    Automate Linear tasks via Rube MCP (Composio): issues, projects, cycles, teams, labels.

    33k GitHub starsUsed in 8 repos~1.5k tokens
    Productivity & AutomationAuto-check passed

More from boraoztunc/skills

All 52 skills in this repo

  • Gsap

    boraoztunc/skills

    GSAP animation reference for HyperFrames. An agent skill from boraoztunc/skills.

    398 GitHub starsUsed in 5 repos~1.9k tokens
    Auto-check passed

  • Hyperframes

    boraoztunc/skills

    Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.

    398 GitHub starsUsed in 9 repos~7.6k tokens
    Auto-check passed

  • Remotion To Hyperframes

    boraoztunc/skills

    Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition.

    398 GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Animejs

    boraoztunc/skills

    Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

    398 GitHub starsUsed in 2 repos~828 tokens
    Auto-check passed

  • Beam Glow States

    boraoztunc/skills

    Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow.

    398 GitHub starsUsed in 2 repos~3.2k tokens
    Auto-check passed

  • Minimal Zine Poster

    boraoztunc/skills

    Compile a theme, sentence, object, mood, article idea, or photo into a quiet Japanese/Korean zine-style editorial poster — tall aged paper, large negative space, one small image anchor, experimental…

    398 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Linear Local First Architecture

What does Linear Local First Architecture do?

A skill your agent uses when building a web app that must feel instant, when users complain about spinners or perceived slowness despite acceptable latency, or when designing a local-first sync…. Linear Local First Architecture is an agent skill from boraoztunc/skills. Use when building a web app that must feel instant, when users complain about spinners or perceived slowness despite acceptable latency, or when designing a local-first sync architecture with optimistic updates.

When should I use Linear Local First Architecture?

Linear Local First Architecture fits situations like: building a web app that must feel instant; users complain about spinners; perceived slowness despite acceptable latency; designing a local-first sync architecture with optimistic updates.

How do I install Linear Local First Architecture in Claude Code?

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

How do I install Linear Local First Architecture in Codex?

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

Can I use Linear Local First 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 boraoztunc/skills --skill linear-local-first-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/linear-local-first-architecture, .gemini/skills/linear-local-first-architecture, .github/skills/linear-local-first-architecture and .opencode/skills/linear-local-first-architecture in your project.

What does Linear Local First Architecture need to run?

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

Does Linear Local First Architecture access the network?

SKILL.md names 2 domains. In commands or code: static.linear.app; the agent is likely to contact it when it follows the instructions. As links in the text: performance.dev. This is read from the text; nothing was executed.

Is Linear Local First 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 Linear Local First Architecture use?

Linear Local First 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 Linear Local First Architecture use?

About 3.2k tokens (SKILL.md is roughly 13k 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 Linear Local First Architecture?

Skills that share tags, products or a category with Linear Local First Architecture: Linear (asgeirtj/system_prompts_leaks, 69k stars), Linear (yc-software/qm, 15k stars), Linear Issue Workflow (lobehub/lobehub, 83k stars) and Make Interfaces Feel Better (affaan-m/ECC, 276k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Linear Local First Architecture?

boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 398 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on August 15, 2026.

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