Skip to content
Nanoviews

Agent Skills

The repository ships universal agent skills: instructions that teach an AI coding agent how to build with Nanoviews. They are compatible with Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Windsurf, Cline and other agents that support the skills format.

Skills

Section titled “Skills”
  • nanoviews: writing views. The element call shape, signals and accessors, component$, blocks, form bindings, effects, slots, dependency injection and the store API of nanoviews/store.
  • nanoviews-testing: unit tests with @nanoviews/testing-library and Vitest. The happy-dom setup and cleanup, the forms of render, driving bindings with events, assertions right after signal writes, async data, dependency injection and composed stories.
  • nanoviews-storybook: stories with @nanoviews/storybook-vite. The framework and preview config, CSF3 typing, args that reach the render as writable signals, decorators and portable stories.
  • nanoviews-router: routing with @nanoviews/router. Navigation, pages and layouts, code splitting, links, the document head, URL state, guards, the dependency injection tokens and tests on virtual navigation.

Install the nanoviews skill first, then the skills for the tools your project uses. The testing, Storybook and router skills refer to the nanoviews skill for how views are written instead of repeating it, and the testing and Storybook skills point to each other for stories in tests.

The description of each skill tells the agent when to apply it. nanoviews applies to components, views, forms, lists and stores wired into views in any file that imports from nanoviews, nanoviews/store, @nanoviews/* or @nano_kit/*, whether or not the request names the library. nanoviews-testing applies to *.spec.ts files, nanoviews-storybook to *.stories.ts files, the .storybook config and story-based tests, and nanoviews-router to routes, pages, layouts, links, head tags and URL-derived state.

Installation

Section titled “Installation”

Install a skill into your project with any package runner, replacing the skill name as needed:

pnpx skills add TrigenSoftware/nanoviews --skill nanoviews

Nano Kit Skills

Section titled “Nano Kit Skills”

The @nano_kit/* packages have skills of their own in the Nano Kit repository. Install them the same way, from TrigenSoftware/nano_kit, for the packages your app uses: see Agent Skills in the Nano Kit docs.