Using with AI
The NateUI skill gives your coding agent instructions for working with NateUI components and extending the template's interface. It covers component usage, reusing existing project code, and following the app's design.
- 1
Install the NateUI skill
Open the project folder containing
package.jsonand run:To choose an agent explicitly, use
--client. For example, to install the NateUI skill for Codex:See Agent skills for other supported agents and setup options.
After setup, ask your coding agent to use the NateUI skill when working on the interface.
Your project's design guidance
DESIGN.md describes the visual direction for your app, including typography, colors, spacing and component styling. The NateUI skill directs the agent to find and read this file automatically during UI work, alongside your app's existing styles.
The setup creates DESIGN.md in the project root if it does not already exist. You can start working with the current design without rewriting the file or asking the agent to read it in every request.
Edit it when you want to record project-specific rules or adopt a different design direction. Keep those rules current as your design changes, and ask the agent to apply corresponding changes in the app.
Template documentation
The template documentation for AI collects the template guides in one document that you can share with your agent.
For work on a particular part of the template, you can link directly to its guide, such as Connect your data.
Component lookup with MCP
The NateUI MCP server lets your agent search for components and read their APIs and usage examples while working on the app.
Follow the MCP setup guide to connect the server to your coding tool. This connection is configured separately from the skill installation.