skills.rest
rodydavis
rodydavisCOMMUNITY
Explore all skills by this author →
Website𝕏@rodydavisGitHub

jaspr-fundamentals

Guide Jaspr component construction and typed HTML usage for reactive UIs.

803|85|Updated Nov 18, 2023
Search Tags:#components#events#server-side rendering#html rendering#jaspr#frontend state#web api interop
One-click install
npx skills add https://github.com/rodydavis/signals.dart --skill jaspr-fundamentals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jaspr-fundamentals
Source: https://github.com/rodydavis/signals.dart/tree/main/.agents/skills/jaspr-fundamentals
Command: npx skills add https://github.com/rodydavis/signals.dart --skill jaspr-fundamentals

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Jaspr fundamentals help you avoid common mistakes when creating components and rendering HTML in a Jaspr app, so your UI code stays correct and consistent.

Core Features & Use Cases

  • Component architecture guidance: Use StatelessComponent, StatefulComponent, and InheritedComponent to structure your UI and state.
  • Correct build() return rules: Ensure build() returns a single Component and avoid legacy iterable patterns.
  • HTML component best practices: Render DOM nodes using Jaspr’s typed HTML components with correct parameter conventions and dot-shorthand fragments/text/empty nodes.
  • Event and browser API usage patterns: Apply the required kIsWeb/universal_web approach for server/static safety and use typed global event streams.
  • Typed HTML reference lookups: Use references/html/<tag>.md for accurate signatures; fall back to .element(tag: '...') when a typed component is missing.

Quick Start

Use the jaspr-fundamentals skill to generate a small Jaspr StatelessComponent that returns a single div with .text(...) content and typed HTML child components, following the children-parameter-last rule.

Frequently Asked Questions about jaspr-fundamentals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a reactive UI component in Jaspr?▼

To build a reactive UI component in Jaspr, use StatelessComponent or StatefulComponent patterns and ensure the build() method returns a single Component, avoiding legacy iterable patterns for correct rendering.

What is the correct way to render HTML elements in a Jaspr app?▼

Render HTML elements in Jaspr using typed DOM components with dot-shorthand fragments, placing children parameters last in the signature to ensure correct DOM node construction and consistent UI code.

How do I safely use browser APIs in Jaspr during server-side rendering?▼

Safely use browser APIs during Jaspr server-side rendering by checking the kIsWeb flag and using universal_web for non-client contexts, preventing runtime errors when accessing web APIs statically.

Can I attach event listeners to DOM elements in Jaspr?▼

You can attach event listeners to DOM elements in Jaspr by using typed global event streams on HTML components, following the required parameter conventions to handle user interactions correctly.

How do I look up the correct syntax for a specific HTML tag in Jaspr?▼

Look up HTML tag syntax in Jaspr using references/html/<tag>.md for accurate signatures, falling back to the .element(tag: '...') method when a typed component is missing from the framework.

Does Jaspr support inherited state for component architecture?▼

Jaspr supports inherited state through InheritedComponent, allowing you to structure your UI and propagate state down the component tree alongside StatelessComponent and StatefulComponent patterns.

Related Skills

Explore More Software Engineering Skills→
jbabin91jbabin91
2

minimal-example

Provide ready-to-use code templates and guided examples for common programming patterns.

Community
Basic
yanochka11yanochka11

webapp-testing

Automate Playwright browser tests for local web applications.

Community
Intermediate
Subaru-PFSSubaru-PFS
3

param

Define Python classes with typed, validated, and reactive parameters.

Official
Intermediate
first-flukefirst-fluke
218

webf-native-ui-dev

Wrap Flutter widgets as HTML custom elements using WebF tooling.

Official
Advanced