Official agent skill

Design First

by getsentry in getsentry/sentry-react-native

Shape non-trivial work before writing it — decide the modules, the seams, and the public API surface up front.

OfficialMITAuto-check passedDevelopment

Install Design First

skills CLI
$ npx skills add getsentry/sentry-react-native --skill design-first -a claude-code

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

GitHub CLI
$ gh skill install getsentry/sentry-react-native design-first --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/getsentry/sentry-react-native.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/design-first .claude/skills/design-first && 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
design-first
GitHub stars
1.8k
Token cost
~1.6k tokens
SKILL.md length
873 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

Shape non-trivial work before writing it — decide the modules, the seams, and the public API surface up front.

  • Works in 5 steps: Frame the change → Shape the modules → Design for testability → …
  • Starting a feature
  • SKILL.md covers When to run, Vocabulary and The design pass
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design First is an agent skill from getsentry/sentry-react-native, published by the product's own GitHub organization. Shape non-trivial work before writing it — decide the modules, the seams, and the public API surface up front. Use when starting a feature, adding an integration, changing the public barrel (packages/core/src/js/index.ts), crossing the JS↔native bridge, changing a codegen spec, or deciding where a seam should go. Produces a design sketch to approve before implementation, then hands off to code-guidelines and test-guidelines.

Its SKILL.md is about 1.6k 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 Development, covering Project scaffolding. It works with Sentry, Android and iOS. The repository describes itself as: Official Sentry SDK for React Native. The licence is MIT.

When your agent uses it

  • Starting a feature
  • Adding an integration
  • Changing the public barrel (packages/core/src/js/index.ts)
  • Crossing the JS↔native bridge

Example prompts

  • “/design-first”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Frame the change
  2. Shape the modules
  3. Design for testability
  4. Account for the bridge, up front
  5. Write the sketch and get sign-off

What it can do on your machine

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

Design First loads about 1.6k tokens when it runs. Until then it costs about 111 tokens; SKILL.md has 873 words of instructions outside code blocks.

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

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 getsentry/sentry-react-native at commit 6ce1083, republished under its MIT licence (© getsentry). 873 words, ~1,593 tokens.

Download SKILL.mdSave it as .claude/skills/design-first/SKILL.md (or your agent's skills folder).
name
design-first
description
Shape non-trivial work before writing it — decide the modules, the seams, and the public API surface up front. Use when starting a feature, adding an integration, changing the public barrel (`packages/core/src/js/index.ts`), crossing the JS↔native bridge, changing a codegen spec, or deciding where a seam should go. Produces a design sketch to approve before implementation, then hands off to code-guidelines and test-guidelines.

Design the shape before writing the code. The pass ends in a design sketch the user approves; implementation does not start until it does. Aim for deep modules placed at clean seams — so callers get leverage, maintainers get locality, and tests get a surface to push against.

This is a design pass, not an implementation plan. Decide what shape the code takes and why; leave line-level rules to code-guidelines and test structure to test-guidelines.

When to run

Run for work where the shape is a real decision:

  • A new feature or a new integration
  • A change to the public barrel (packages/core/src/js/index.ts) or a public option in options.ts — it cascades to every downstream user and the API report
  • A change to a codegen spec (src/js/NativeRNSentry.ts, *NativeComponent.ts) or anything crossing the JS↔native bridge — the ABI must move in lockstep across JS/iOS/Android
  • Any moment you are choosing where a seam goes, or how a module is shaped to be testable

Skip it — and say you are skipping it — for one-line fixes, localized bug fixes with obvious placement, and refactors that change no interface.

Vocabulary

Use these terms exactly in the sketch — consistent language is what makes the design legible across sessions. Don't substitute "component," "service," or "layer."

  • Module — anything with an interface and an implementation: a function, a factory, a class, a file.
  • Interface — everything a caller must know to use it correctly: the signature, plus invariants, ordering, error modes, required config.
  • Deep module — a lot of behavior behind a small interface. The goal. A shallow module has an interface nearly as complex as its implementation — avoid it.
  • Seam — the place where you can swap behavior without editing in that place. Where an interface lives, and where a test double crosses. In this SDK the biggest seam is the NATIVE wrapper (src/js/wrapper.ts) between JS and native.
  • Adapter — a concrete thing satisfying an interface at a seam.

Two checks settle most design questions:

  • The deletion test. Imagine deleting the module. If complexity vanishes, it was a pass-through — don't build it. If complexity reappears across N callers, it earns its keep.
  • The interface is the test surface. Callers and tests cross the same seam. If you need to test past the interface, the module is the wrong shape.

The design pass

1. Frame the change

State the behavior the change introduces, in the domain's own words. Name the surface(s) it lands in — JS, Android, iOS, bridge — and read the relevant AGENTS.md (root, packages/core/, packages/core/android/, packages/core/ios/).

Find the nearest well-shaped precedent and align to it. The codebase has almost certainly solved something adjacent — locate its best current example and match it, or improve on it deliberately and say why. The TurboModule subsystem (turbomodule/ + thin integrations/turboModuleContext*.ts wiring) is a strong precedent for a cohesive feature that touches JS, native, and the bridge; the integration factory in integrations/nativelinkederrors.ts is the precedent for a plain JS integration.

Show full SKILL.md (395 more words)Show less
2. Shape the modules

Decide the modules and where their seams go. Prefer fewer, deeper modules over many shallow ones. For each module, name its interface — not just the signature, but the invariants and error modes a caller must know. Run the deletion test on anything you suspect is a pass-through.

Decide where the code lives as part of shaping it — a locality call: co-locate what changes together so one change stays directory-local.

  • A cohesive subsystem owns its model, lifecycle, and pipeline as one concept — group it in its own dir (like turbomodule/), and let the integrations/ file be thin wiring. integrations/ is a type-bucket, not a home for a subsystem's logic.
  • Native code belongs behind the bridge seam under packages/core/android/ and packages/core/ios/; JS features call it via NATIVE, they don't embed native code.
  • If you can't name the concern a piece serves, that's a smell — it's doing two things, or belongs to a concept you haven't named.
3. Design for testability

A seam exists so a test can cross it (test-guidelines builds the fakes there). Three rules make that possible:

  • Accept dependencies, don't create them. A module that reaches for NativeModules.RNSentry itself can't be faked; one that receives the bridge (or goes through the NATIVE seam a test can mock) can.
  • Keep the platform/arch branch at the edge. Push Platform.OS / isTurboModuleEnabled() decisions to a thin boundary so the core logic is arch-agnostic and unit-testable without simulating a device.
  • Make the observable output the contract. Tests assert on the produced event/envelope/resolved value, not on private state — so the design must route results through the interface.
4. Account for the bridge, up front

If the change crosses the bridge, decide now (not during implementation):

  • What the payload shape is and whether it is codegen-expressible or must be an Object validated natively (see code-guidelines/references/native-bridge.md).
  • Whether it's an ABI change and how JS/iOS/Android land in lockstep while staying backward-compatible with older cached native binaries.
  • How it behaves when enableNative is false or the module isn't linked.
  • What crosses regarding PII and how it's gated.
5. Write the sketch and get sign-off

Produce, in the conversation: the modules and their interfaces; where each lives and why (locality); the seams and what fakes cross them; the bridge/ABI decisions; and what you deliberately chose not to build (deletion-test casualties). Get the user's approval before implementing, then hand off to code-guidelines + test-guidelines.

© getsentry, MIT. 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/design-first of getsentry/sentry-react-native.

Open the folder on GitHubat commit 6ce1083

Compare with similar skills

Design First 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.

Design First compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design First this skillgetsentry/sentry-react-native1.8k—~1.6kAutomated safety check: PassMIT
Flutter Appccplugins/awesome-claude-code-plugins967—~1.1kAutomated safety check: NotesApache-2.0
Sentry Flutter SDKgetsentry/sentry-for-ai268—~7.1kAutomated safety check: PassApache-2.0
Kmp Starter Feature Store Reviews UpdatesDevAtrii/Kmp-Starter-Template167—~670Automated safety check: PassMIT
Mobile App Developerhappycapy-ai/Happycapy-skills137—~1.3kAutomated safety check: PassMIT
jscpd Code Migration Trackerkucherenko/jscpd6.3k—~5kAutomated safety check: PassMIT

Similar skills

  • Flutter App

    ccplugins/awesome-claude-code-plugins

    Bootstrap a new Flutter mobile app with clean architecture, Riverpod, FVM-pinned SDK, current packages, and no deprecated APIs.

    967 GitHub stars~1.1k tokensUpdated 1 mo ago
    MobileAuto-check: notes
  • Sentry Flutter SDK

    getsentry/sentry-for-ai

    Official

    Full Sentry SDK setup for Flutter and Dart. An agent skill from getsentry/sentry-for-ai.

    268 GitHub stars~7.1k tokensUpdated today
    MobileAuto-check passed
  • Kmp Starter Feature Store Reviews Updates

    DevAtrii/Kmp-Starter-Template

    Store reviews and in-app updates on the KMP Starter Template — StarterStoreManager (askForReview, checkAppUpdate), rememberStarterStoreManager, and AppUpdateProvider.

    167 GitHub stars~670 tokensUpdated 1 mo ago
    MobileAuto-check passed
  • Mobile App Developer

    happycapy-ai/Happycapy-skills

    End-to-end mobile app development and publishing using Expo + EAS.

    137 GitHub stars~1.3k tokensUpdated 1 mo ago
    MobileAuto-check passed
  • Measures a code port between languages or frameworks with jscpd's function-level comparison, porting tests before code and tracking what is left unmatched.

    6.3k GitHub stars~5k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Diagnose

    CherryHQ/cherry-studio-app

    Opt-in evidence-first causal diagnosis for bugs, browser or app/device failures, flaky behavior, and performance regressions.

    4k GitHub stars~1.8k tokensUpdated 4 days ago
    DevelopmentAuto-check passed

More from getsentry/sentry-react-native

  • Code Guidelines

    getsentry/sentry-react-native

    Official

    Enforce Sentry React Native SDK code guidelines for implementation, refactoring, and review.

    1.8k GitHub stars~3.2k tokensUpdated today
    Auto-check passed
  • Test Guidelines

    getsentry/sentry-react-native

    Official

    Enforce Sentry React Native SDK test conventions for naming, structure, mocking, and fixtures with Jest.

    1.8k GitHub stars~1.3k tokensUpdated today
    Auto-check passed
  • Review

    getsentry/sentry-react-native

    Official

    Three-axis review of the branch diff — Standards (this repo's documented standards + public API/bridge surface), Spec (the originating Linear/GitHub issue or PR), and Correctness (runtime bugs + the…

    1.8k GitHub stars~1.9k tokensUpdated today
    Auto-check passed
  • Diagnosing Bugs

    getsentry/sentry-react-native

    Official

    A discipline for hard bugs, flaky tests, CI hangs, native crashes, and performance regressions in this SDK.

    1.8k GitHub stars~1.4k tokensUpdated today
    Auto-check passed
  • Spec

    getsentry/sentry-react-native

    Official

    Produce a verified spec — problem, desired outcome, and acceptance criteria — before building.

    1.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

Questions about Design First

What does Design First do?

Shape non-trivial work before writing it — decide the modules, the seams, and the public API surface up front. Design First is an agent skill from getsentry/sentry-react-native, published by the product's own GitHub organization. Shape non-trivial work before writing it — decide the modules, the seams, and the public API surface up front.

When should I use Design First?

Design First fits situations like: starting a feature; adding an integration; changing the public barrel (packages/core/src/js/index.ts); crossing the JS↔native bridge.

How do I install Design First in Claude Code?

Run `npx skills add getsentry/sentry-react-native --skill design-first -a claude-code`. Or copy the skill folder (.agents/skills/design-first in getsentry/sentry-react-native) into .claude/skills/design-first in your project. Claude Code loads it when a task matches its description.

How do I install Design First in Codex?

Run `npx skills add getsentry/sentry-react-native --skill design-first -a codex`. Or copy the skill folder (.agents/skills/design-first in getsentry/sentry-react-native) into .agents/skills/design-first in your project. Codex loads it when a task matches its description.

Can I use Design First 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 getsentry/sentry-react-native --skill design-first -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-first, .gemini/skills/design-first, .github/skills/design-first and .opencode/skills/design-first in your project.

What does Design First need to run?

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

Does Design First 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 Design First 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 Design First use?

Design First is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design First use?

About 1.6k tokens (SKILL.md is roughly 6.4k 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 Design First?

Skills that share tags, products or a category with Design First: Flutter App (ccplugins/awesome-claude-code-plugins, 967 stars), Sentry Flutter SDK (getsentry/sentry-for-ai, 268 stars), Kmp Starter Feature Store Reviews Updates (DevAtrii/Kmp-Starter-Template, 167 stars) and Mobile App Developer (happycapy-ai/Happycapy-skills, 137 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design First?

getsentry (a GitHub organization, an official publisher) maintains it in getsentry/sentry-react-native, which has 1,824 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 7, 2026.

Source: getsentry/sentry-react-native on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.