Borrowing it
Nothing to install: this file belongs to rodydavis/signals.dart. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/rodydavis/signals.dart/main/.agents/skills/jaspr-pre-rendering-and-hydration/SKILL.mdgit clone --depth 1 https://github.com/rodydavis/signals.dartWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/rodydavis/signals.dart/jaspr-pre-rendering-and-hydration)<a href="https://agentmods.dev/skills/rodydavis/signals.dart/jaspr-pre-rendering-and-hydration"><img src="https://agentmods.dev/badge/skills/rodydavis/signals.dart/jaspr-pre-rendering-and-hydration/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/rodydavis/signals.dart/jaspr-pre-rendering-and-hydration"><img src="https://agentmods.dev/badge/skills/rodydavis/signals.dart/jaspr-pre-rendering-and-hydration.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00057 | $0.01118 |
| Opus 5 | $0.00028 | $0.00559 |
| Sonnet 5 | $0.00011 | $0.00224 |
| Haiku 4.5 | $0.00006 | $0.00112 |
Grade A, and why
jaspr-pre-rendering-and-hydration scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 98 lines — stays where its author put it; the contents beside it link to each section on GitHub.
This skill is relevant for static and server mode Jaspr projects. You can check the mode of a Jaspr project in pubspec.yaml under jaspr: mode: <mode>.
Core Rules for Pre-rendering (SSR/SSG)
Jaspr pre-renders components at request/build-time on the server. Interactive browser features require hydration.
- Dual Entrypoints:
- Server:
lib/main.server.dart-> CallsrunApp(Document(body: MyApp())) - Client:
lib/main.client.dart-> CallsrunApp(ClientApp())
- Server:
- Library Constraints:
- Importing: You MUST NOT import
dart:js_interoporpackage:webin any code imported by the server entrypoint. - Importing: You MUST NOT import
dart:ioordart:ffiin any code imported by the client entrypoint. - Using: You can import
package:universal_webin shared code, but you MUST wrap any access to its browser APIs inside anif (kIsWeb)check to prevent crashing during server-side rendering.
- Importing: You MUST NOT import
- Interactivity / Hydration: Components are server-rendered by default. To add client interactivity (e.g., event listeners, state, using browser APIs), you MUST annotate a component with
@client.
The @client Annotation and ClientApp
When you annotate a component with @client, Jaspr renders its initial HTML on the server and "hydrates" it in the browser.
ClientApp()(called in the client entrypoint) automatically looks for and hydrates all@clientcomponents that were pre-rendered on the server.- Rule: Only the uppermost component of a subtree that needs client interactivity needs to be annotated with
@client. Do not annotate child components in that subtree, they will automatically be hydrated as part of the parent.
Passing Data to @client Components
Use parameters of @client components to pass data from the server to the client. These are automatically serialized on the server and deserialized in the browser.
- Rule 1: All parameters MUST be initializing fields (e.g.,
const MyClientComponent({required this.title});). - Rule 2: All parameters MUST be serializable. They must be primitive types (
int,String,double,bool,List,Map) OR custom types that define@encoderand@decodermethods.- Parameters MUST NOT be functions, components, or any other non-serializable types.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 11d ago First seen · 98 lines · 57 tokens per session scan A 202c9e248df6
jaspr-pre-rendering-and-hydration is a skill published in the GitHub repository rodydavis/signals.dart (814 stars, last pushed 2d ago), licensed Apache-2.0. It adds 57 tokens to every session and 1,118 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
architecture-feature-first
Use when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.
flutter-use-column-row-first
Use when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.
flutter-mcp-toolkit-maintain-web
Maintains fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify). Use when editing web/index.html, agentmanifest.json, intentcallwebmcp.generated.js, web platform sync, Chrome dogfood, or WebMCP modelContext.
flutter-expert
Expert in Flutter SDK, Dart, widgets, state management, and cross-platform mobile development. Use when the user mentions mobile, Dart, cross platform, UI, or state management, or when the task involves Flutter Architecture, Widget Fundamentals, State Management Approaches, or Lifecycle Methods.
building-jaspr-web-apps
Builds SEO-friendly web applications with Dart using the Jaspr framework. Use when creating Dart-based websites, blogs, or landing pages requiring semantic HTML output; implementing server-side rendering (SSR) or static site generation (SSG); adding Tailwind CSS via jasprtailwind; routing with jasprrouter; testing…
generating-flutter-ui
Generative UI (GenUI) for Flutter using AI models like Google Gemini, Anthropic Claude, or OpenAI via the genui package. Use this skill when building dynamic AI-driven interfaces, conversational UI flows, server-rendered screen layouts, LLM-powered dashboards, chat-based UI generation, or implementing prompt-to-UI…