agent-native
Designs agent-native applications where agents are first-class citizens with full tool parity, atomic primitives, and explicit completion signals. Covers tool design, context injection, agent-to-UI communication, and mobile checkpoint/resume patterns. Use when architecting an agentic system, designing tool surfaces, building agent-aware UI, implementing context.md patterns, or asking "how do I make my app agent-native."
- Installs
- 140
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mblode/agent-skills --skill agent-native- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads agent-native automatically when relevant.
- 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.
Agent-Native
Agent-native applications treat agents as first-class users. Whatever a human can do through the UI, an agent can achieve through tools. Features are outcomes described in prompts, achieved by an agent with atomic tools, operating in a loop until done.
Reference Files
| File | Read When |
|---|---|
references/core-principles.md | Default: understanding Parity, Granularity, Composability, and Emergent Capability |
references/tool-design.md | Designing tools — atomic primitives, CRUD, domain tools, dynamic discovery |
references/files-and-context.md | State management — entity directories, context.md, context injection, files vs database |
references/agent-ui-communication.md | Building agent feedback — completion signals, partial completion, event types |
references/mobile-specifics.md | iOS/mobile — checkpoint/resume, iCloud storage, background execution |
Core Principles
- Parity — Agent can achieve anything users can do through the UI. Build a capability map; close every gap.
- Granularity — Tools are atomic primitives. Judgment and decision logic live in prompts, not tool implementations. To change behavior, edit prose, not code.
# Anti-pattern: workflow-shaped tool analyze_and_organize(folder) # bundles judgment into code # Agent-native: atomic primitives list_files(folder) → read_file(path) → move_file(src, dst) → write_file(path, content) # The agent decides what to move and where — judgment stays in the prompt - Composability — New features = new prompts. With atomic tools and parity, you describe an outcome and the agent loops until it's achieved.
- Emergent capability — The agent handles requests you didn't design for. Observe what users ask; formalize patterns that emerge.
- Improvement over time — State persists via context files. Prompts can be updated for all users without shipping code.
Design Workflow
- Capability audit — Map every UI action to an agent equivalent. Close any gap. Read
core-principles.md. - Tool surface design — Define atomic primitives for every entity (CRUD). Add domain tools only for vocabulary, guardrails, or efficiency. Read
tool-design.md. - Context and state planning — Design the
context.mdfile, entity directory structure, and system prompt injection. Readfiles-and-context.md. - Agent-UI feedback design — Define completion signals, event types, shared workspace, and approval gates. Read
agent-ui-communication.md. - Validate — Run the checklist below. Describe an unbuilt outcome and test whether the agent can figure it out.
Design Checklist
Copy and track during design:
Agent-native design progress:
- [ ] Capability map: every UI action has an agent equivalent
- [ ] Tools are atomic primitives (judgment in prompts, not tools)
- [ ] Every entity has full CRUD tool coverage
- [ ] System prompt injects available resources and capabilities
- [ ] Agents and users share the same data space
- [ ] Agent actions reflect immediately in UI
- [ ] Completion is signaled explicitly (no heuristic detection)
- [ ] External APIs use dynamic capability discovery where possible
- [ ] Approval model matches stakes and reversibility
- [ ] Ultimate test: describe an unbuilt outcome — can the agent figure it out?
Validation Loop
Before shipping, verify:
- Capability coverage — Pick 5 random UI actions; confirm the agent can accomplish each without touching code.
- Tool atomicity — Review every tool; if it contains
if/elsedecision logic, split it. - Context completeness — Clear the agent's context and start a session; does it still know what exists?
- End-to-end scenario — Give the agent an outcome you never explicitly built. Does it compose tools to get there?
Anti-Patterns
- Agent as router — Agent routes to your code instead of acting with judgment; you've built a dispatcher, not an agent.
- Workflow-shaped tools —
analyze_and_organizebundles decision logic into a tool; break intoread_file,move_file,write_file. - Orphan UI actions — User can do something the agent can't; breaks parity.
- Context starvation — Agent doesn't know what exists; inject resources and capabilities into every system prompt.
- Gates without reason — Domain tool is the only path when primitives should also work; default to open.
- Heuristic completion detection — Detecting done via consecutive idle iterations; require an explicit completion tool call.
- Static API mapping — 50 tools for 50 endpoints; use discover + access instead.
Related Skills
define-architecture— repo structure and module boundaries before going agent-nativeagents-md— audit CLAUDE.md / AGENTS.md for agent instruction quality
FAQ
What does the agent-native skill do?
Designs agent-native applications where agents are first-class citizens with full tool parity, atomic primitives, and explicit completion signals. Covers tool design, context injection, agent-to-UI communication, and mobile checkpoint/resume patterns. Use when architecting an agentic system, designing tool surfaces, building agent-aware UI, implementing context.md patterns, or asking "how do I make my app agent-native."
How do I install agent-native?
Run npx skills add https://github.com/mblode/agent-skills --skill agent-native 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/agent-native/ (personal) or .claude/skills/agent-native/ (project).
Which AI agents can use agent-native?
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 agent-native 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 agent-native?
It is published by mblode in mblode/agent-skills. It has 140 recorded installs.
More from mblode/agent-skills
ui-animation
mblode/agent-skills
Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound. Use when asked to "add animation", "match this easing", "reverse engineer this motion", "add a click sound", or find animation opportunities.
multi-tenant-architecture
mblode/agent-skills
Designs tenant isolation, hostname routing, custom-domain lifecycle, and plan limits on Cloudflare or Vercel. Use when asked to "isolate tenant data", "support custom domains", "build a white-label platform", or assess PSL registration. For general module structure use codebase-architecture; for SEO content use seo.
ui-design
mblode/agent-skills
Designs and builds React/Next/Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", "audit this component", "stress-test this component", "break this UI", or "show me the worst case".
typography-audit
mblode/agent-skills
Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.
agent-skills-creator
mblode/agent-skills
Creates and improves portable Agent Skills with a validator, routing scenarios, and evidence-based keep, cut, merge, or retire decisions. Use when asked to "write a skill", "update all skills", "audit my SKILL.md", "remove redundant instructions", or fix skill triggering.
docs-writing
mblode/agent-skills
Writes and audits technical docs with Diataxis type gating, runnable examples, and 51 documentation rules. Use when asked to "review my docs", "write an API reference", or improve a documentation page. For a whole README use readme-creator; for agent instructions use agents-md.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.