builderio/agent-native
12 skills60 installs52.5k starsGitHub
Install
npx skills add https://github.com/builderio/agent-nativeSkills in this repo
1Design ExplorationThis skill drives UI/UX exploration through the hosted Design MCP app. A developer uses it to generate several complete HTML design directions, present them for human selection, refine the chosen one, and export a coding handoff for implementation. Prototypes are self-contained HTML using Tailwind CSS v4 and Alpine.js, kept genuinely distinct in structure, typography, and mood.12installs2AssetsThis skill instructs the agent to use the hosted Assets MCP app for image and video generation, brand-safe asset search and export, and human-in-the-loop asset selection. A developer uses it so plain image-generation requests route to Assets instead of a generic generator, either through an interactive picker or unattended direct actions. It documents setup, connector auth, and fallback links.10installs3Capture LearningsThis skill defines how the agent captures and applies accumulated knowledge in a learnings.md file. A developer relies on it so the agent records user preferences, corrections, and technical learnings, reads them before significant work, and updates them when it learns something worth remembering. It specifies what to capture, a category-grouped format, and when a learning should graduate into a skill.5installs4Create SkillThis skill explains how to create new skills for an agent-native app. A developer uses it when adding a new skill, documenting a repeatable pattern, or scaffolding files from a template. It provides a 5-question interview, three skill-type templates (Pattern, Workflow, Generator), naming conventions, a file-structure layout, and anti-patterns to avoid.5installs5Delegate To AgentThis skill defines the agent-native rule that the UI and server never call an LLM directly and instead delegate all AI work to the agent through the chat bridge. A developer follows it when tempted to add inline LLM calls or when sending messages to the agent from application code. It shows the sendToAgentChat and agentChat APIs, submit-versus-prefill behavior, and how to detect when the agent is generating.5installs6Frontend DesignThis skill guides creation of distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. A developer invokes it when building web components, pages, dashboards, React components, or when styling any web UI. It gives guidance on aesthetic direction, typography, color, motion, and layout, and adds agent-native framework notes for React 18, Vite, TailwindCSS, and shadcn/ui.5installs7QaThis skill runs autonomous end-to-end QA testing across template apps using Playwright. A developer invokes it as /qa to spin up apps, test them in parallel, fix issues, retest, and compile a report, only alerting the user when blocked. It orchestrates one tester agent per app that navigates pages, checks console and network errors, fixes bugs, and reports findings.5installs8Self Modifying CodeA skill for the agent-native framework covering how an agent can safely modify the app's own source code. A developer follows it when the agent needs to edit components, routes, styles, or scripts, or when designing an app to be agent-editable. It sets a tiered taxonomy of what to modify and a git-checkpoint plus typecheck/lint safety pattern.5installs9Server PluginsA skill for the agent-native framework explaining its server plugins and the /_agent-native/ route namespace. A developer uses it when adding a custom server plugin, deciding between an /api/ route and an action, or debugging auto-mounted framework routes. It sets the rule that framework routes live under /_agent-native/ and that standard CRUD should use defineAction rather than custom routes.5installs10Files As DatabaseThis skill explains how to choose between files and SQLite for storing application state in an agent-native app. A developer uses it when adding data models or deciding where to store data: files in data/ for content and configuration the agent edits directly, and SQLite via Drizzle ORM for structured, queryable, relational records. It also covers a Turso cloud upgrade path and path-sanitization security.1installs11ScriptsA skill for the agent-native framework that documents how to implement complex agent operations as callable scripts in the scripts/ directory. A developer uses it when adding an API integration or a data-processing step the agent can invoke with pnpm script <name>. It keeps agent chat context clean by moving logic into reusable, independently testable scripts.1installs12Sse File WatcherA skill for the agent-native framework describing how to keep the UI in sync with agent file changes using Server-Sent Events. A developer uses it when setting up real-time file sync, wiring query invalidation for a new data model, or debugging a UI that will not update. A server-side chokidar watcher streams file events that trigger React Query invalidation in the browser.1installs