菜单
Hypermedia-driven UI development patterns including architecture, SSE streaming, Datastar framework, CSS architecture, web components, templating, and event architecture. Load when building server-driven UIs or hypermedia applications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Index curated reference corpora into a searchable knowledge graph via the cognee engine, then query it to ground technical writing, review, and analysis. Use when ingesting reference documents into named datasets or retrieving grounding context for tasks like drafting or reviewing a manuscript. A reference-knowledge index, explicitly not agent session memory.
Nix development conventions for flakes, derivations, modules, and code style. Use when authoring flake.nix files, writing derivations or builders, designing NixOS/nix-darwin/home-manager modules, or following nix formatting and naming conventions. For check architecture and CI integration, see preferences-nix-checks-architecture and preferences-nix-ci-cd-integration.
Approximately-verifiable, refinement-driven development for type-driven domain-driven design. Use when modeling a domain as a dependently-typed Lean 4 specification, refining/lowering it to a Rust implementation, lifting the implementation back via Charon and Aeneas to check spec<->implementation correspondence (translation validation) — mechanically when tractable, otherwise via differential testing or LLM comparison — or when generating and diffing type-system diagrams of the model and implementation to track their evolution. Mechanical on-the-nose proof is the precise ideal, not a requirement; its absence is not a failure of the method.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
Algebraic data type patterns including sum types, product types, and pattern matching across languages. Load when designing type hierarchies or working with discriminated unions.
Algebraic laws including functor/monad laws and property-based testing strategies. Load when verifying algebraic properties or writing property tests.
| name | preferences-hypermedia-development |
| description | Hypermedia-driven UI development patterns including architecture, SSE streaming, Datastar framework, CSS architecture, web components, templating, and event architecture. Load when building server-driven UIs or hypermedia applications. |
This guide covers server-first hypermedia architecture for building web applications where the backend is the source of truth for both application state and UI rendering.
Primary paradigm: Server-driven UI - the server generates HTML fragments and pushes them to the browser via Server-Sent Events (SSE), eliminating client-side state management complexity.
Core philosophy (Tao of Datastar):
Contrast with SPA architectures:
Server → HTML → Browser native DOMServer → JSON → Client framework → Virtual DOM → RenderThis paradigm complements functional domain modeling by maintaining clear effect boundaries: pure domain logic (sync), application orchestration (async/SSE), and infrastructure (I/O).
Side effects should be explicit in type signatures and isolated at boundaries to preserve compositionality.
In Rust (Ironstar), the async/sync boundary is the effect boundary: if a function is async, it performs I/O; if sync, it is pure.
The Decider pattern (fmodel-rust) enforces this structurally: decide and evolve are pure synchronous functions; all I/O occurs at the axum/Zenoh boundary.
| File | Description |
|---|---|
| 01-architecture.md | Server-first philosophy, effect boundaries, HATEOAS principles, anti-patterns (client-side reactivity duplication, WASM SPAs, optimistic updates) |
| 02-sse-patterns.md | SSE protocol fundamentals, event types (PatchElements, PatchSignals), connection lifecycle, reconnection resilience, lag handling, resource cleanup |
| 03-datastar.md | Datastar framework patterns: signal system, data attributes, backend actions, SDK event types, ReadSignals pattern, real-time updates |
| 04-css-architecture.md | CUBE CSS methodology, composition primitives (Every Layout), design tokens with Open Props, cascade layers, light-dark() theming, container queries, PostCSS configuration, Light DOM requirement |
| 05-web-components.md | Thin wrapper pattern for third-party libraries (charts, editors, maps), vanilla vs Lit, morph exclusion, event design, memory cleanup |
| 06-templating.md | Type-safe server-side templating, lazy vs eager evaluation, ID strategy for morphing, security (escaping, sanitization), testing patterns |
| 07-event-architecture.md | Event sourcing with SSE, CQRS pattern for hypermedia, event log as authority, real-time projections |
| 08-analytics-data-serving.md | DuckDB analytics via async-duckdb in axum handlers, query result serialization for SSE, predicate pushdown from UI interactions, httpfs remote data access, cache strategy |
Choose hypermedia when:
For standalone documents (no server):
When the document is self-contained and does not need server state (experiments, presentations, visualizations), see ~/.claude/skills/preferences-hypermedia-documents/SKILL.md for the standalone authoring patterns that share the same design system and progressive enhancement approach.
Reconsider when:
Hypermedia frameworks: Datastar, htmx, Turbo (Hotwire)
Backend SDKs (Datastar): Go, Rust, PHP, Python, .NET, Ruby, Java, Kotlin, TypeScript, Clojure
CSS architecture: Open Props (design tokens), Open Props UI (copy-paste components)
Web component approaches: Vanilla web components, Lit (for complex lifecycle management)
Templating (by language):
Reference implementations:
Ironstar (~/projects/rust-workspace/ironstar) is the canonical Rust integration of algebraic DDD with hypermedia architecture.
It demonstrates the Decider pattern (fmodel-rust) for pure domain logic, embedded infrastructure (SQLite event store, Zenoh pub/sub, DuckDB analytics, moka cache), Open Props + CUBE CSS cascade layer architecture, hypertext lazy templates with datastar-rust SSE events, and Idris2 formal specifications for domain model verification.
See the repo's CLAUDE.md for the authoritative architectural context.
Stario (~/projects/lakescope-workspace/stario) is an illustrative Python 3.14+ framework for Datastar integration.
It demonstrates the Go-style handler pattern (Context, Writer) -> None, declarative HTML element functions, data/at Datastar attribute helpers, and the Relay in-process pub/sub system for broadcasting events across SSE connections.
~/.claude/skills/preferences-web-platform-foundations/SKILL.md - shared vocabulary: 15 web platform properties, capability ladder, paradigm routing~/.claude/skills/preferences-hypermedia-documents/SKILL.md - standalone document authoring (presentations, experiments, visualizations) without a server backend~/.claude/skills/preferences-architectural-patterns/SKILL.md - onion/hexagonal architecture, effect boundaries~/.claude/skills/preferences-domain-modeling/SKILL.md - functional domain modeling, smart constructors~/.claude/skills/preferences-railway-oriented-programming/SKILL.md - Result-based error handling~/.claude/skills/preferences-distributed-systems/SKILL.md - event log authority, CQRS, idempotency patterns~/.claude/skills/preferences-data-modeling/SKILL.md - materialized views, DuckDB/DuckLake patterns~/.claude/skills/preferences-rust-development/SKILL.md - Rust-specific patterns (integrates with Datastar-Rust/hypertext)~/.claude/skills/preferences-typescript-nodejs-development/SKILL.md - TypeScript patterns for Node.js backends