solid-core-rendering — solid-core-rendering install solid-core-rendering, solid-ai-rules, community, solid-core-rendering install, ide skills, solid-core-rendering client-side rendering, solid-core-rendering server-side rendering, solid-core-rendering streaming, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing advanced SolidJS rendering capabilities for Single-Page Applications. solid-core-rendering is a set of utilities for rendering SolidJS applications, providing client-side rendering, server-side rendering, hydration, and streaming capabilities.

Features

Mounts SolidJS apps to the DOM using the render function from solid-js/web
Supports client-side rendering for Single-Page Applications
Enables server-side rendering (SSR) for improved SEO and performance
Hydrates server-rendered markup for seamless client-side takeover
Streams rendering for efficient and dynamic content updates

# Core Topics

solid-core-rendering install solid-core-rendering client-side rendering solid-core-rendering server-side rendering solid-core-rendering streaming
vallafederico vallafederico
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The solid-core-rendering skill by vallafederico is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for solid-core-rendering install, solid-core-rendering client-side rendering, solid-core-rendering server-side rendering.

Ideal Agent Persona

Perfect for Frontend Agents needing advanced SolidJS rendering capabilities for Single-Page Applications.

Core Value

Empowers agents to perform client-side rendering, server-side rendering, hydration, and streaming using SolidJS, enabling seamless integration with protocols like HTTP and libraries such as solid-js/web.

↓ Capabilities Granted for solid-core-rendering

Rendering SolidJS applications on the client-side
Implementing server-side rendering for improved SEO
Hydrating server-rendered markup for dynamic updates

! Prerequisites & Limits

  • Requires SolidJS application setup
  • Limited to SolidJS framework
  • Element must be a function for rendering
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

solid-core-rendering

Install solid-core-rendering, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

SolidJS Rendering Utilities

Complete guide to rendering SolidJS applications. Understand client-side rendering, SSR, hydration, and streaming.

render - Client-Side Rendering

Mount your Solid app to the DOM. Essential browser entry point for SPAs.

tsx
1import { render } from "solid-js/web";
2
3const dispose = render(() => <App />, document.getElementById("app")!);
4
5// Later, unmount
6dispose();

Key points:

  • First argument must be a function (not JSX directly)
  • Element should be empty (render appends, dispose removes all)
  • Returns dispose function to unmount

Correct usage:

tsx
1// ✅ Correct - function
2render(() => <App />, element);
3
4// ❌ Wrong - JSX directly
5render(<App />, element);

hydrate - SSR Hydration

Hydrate server-rendered HTML with client-side code. Essential for SSR apps.

tsx
1import { hydrate } from "solid-js/web";
2
3const dispose = hydrate(() => <App />, document.getElementById("app")!);

Key points:

  • Rehydrates existing DOM
  • Matches server-rendered structure
  • Attaches interactivity
  • Used in SSR applications

Options:

tsx
1hydrate(() => <App />, element, {
2  renderId: "app", // Optional render ID
3  owner: undefined, // Optional owner context
4});

renderToString - Server Rendering

Render components to HTML string for SSR.

tsx
1import { renderToString } from "solid-js/web";
2
3const html = renderToString(() => <App />);
4// Returns: "<div>...</div>"

Use cases:

  • SSR initial render
  • Static site generation
  • Email templates
  • Server-side HTML generation

renderToStringAsync - Async Rendering

Render components with async data to HTML string.

tsx
1import { renderToStringAsync } from "solid-js/web";
2
3const html = await renderToStringAsync(() => <App />);
4// Waits for async resources

Use cases:

  • SSR with async data
  • Resources and Suspense
  • Async components

renderToStream - Streaming SSR

Stream HTML to client for faster time-to-first-byte.

tsx
1import { renderToStream } from "solid-js/web";
2
3const stream = renderToStream(() => <App />);
4
5// Pipe to response
6stream.pipeTo(response);

Benefits:

  • Faster initial render
  • Progressive HTML delivery
  • Better perceived performance

HydrationScript / generateHydrationScript

Bootstrap hydration before Solid runtime loads.

tsx
1import { HydrationScript, generateHydrationScript } from "solid-js/web";
2
3// As component (JSX)
4<HydrationScript nonce={nonce} eventNames={["click", "input"]} />
5
6// As string (manual HTML)
7const script = generateHydrationScript({
8  nonce,
9  eventNames: ["click", "input"],
10});

Purpose:

  • Sets up hydration on client
  • Required for SSR apps
  • Place once in <head> or before closing </body>

isServer - Environment Check

Check if code is running on server.

tsx
1import { isServer } from "solid-js/web";
2
3if (isServer) {
4  // Server-only code
5  console.log("Running on server");
6} else {
7  // Client-only code
8  console.log("Running on client");
9}

Use cases:

  • Conditional server/client code
  • Environment-specific logic
  • Avoiding browser APIs on server

Common Patterns

Client Entry Point

tsx
1// entry-client.tsx
2import { render } from "solid-js/web";
3import App from "./App";
4
5render(() => <App />, document.getElementById("app")!);

SSR Entry Point

tsx
1// entry-server.tsx
2import { renderToString, generateHydrationScript } from "solid-js/web";
3import App from "./App";
4
5export default function handler(req, res) {
6  const html = renderToString(() => <App />);
7  
8  res.send(`
9    <!DOCTYPE html>
10    <html>
11      <head>
12        ${generateHydrationScript()}
13      </head>
14      <body>
15        <div id="app">${html}</div>
16      </body>
17    </html>
18  `);
19}

Client Hydration

tsx
1// entry-client.tsx
2import { hydrate } from "solid-js/web";
3import App from "./App";
4
5hydrate(() => <App />, document.getElementById("app")!);

Streaming SSR

tsx
1import { renderToStream } from "solid-js/web";
2
3export default async function handler(req, res) {
4  const stream = renderToStream(() => <App />);
5  
6  res.setHeader("Content-Type", "text/html");
7  stream.pipeTo(res);
8}

Environment-Specific Code

tsx
1import { isServer } from "solid-js/web";
2
3function Component() {
4  if (isServer) {
5    // Server-only initialization
6    return <div>Server rendered</div>;
7  }
8  
9  // Client-only code
10  const [mounted, setMounted] = createSignal(false);
11  onMount(() => setMounted(true));
12  
13  return <div>Client: {mounted()}</div>;
14}

Best Practices

  1. Always use function form:

    • render(() => <App />, element)
    • Not render(<App />, element)

  2. Empty mount element:

    • Element should be empty
    • Render appends, dispose removes all

  3. Hydration matching:

    • Server and client must match
    • Same structure and content

  4. Use isServer checks:

    • Avoid browser APIs on server
    • Conditional logic when needed

  5. Streaming for performance:

    • Use renderToStream for SSR
    • Faster time-to-first-byte

Summary

  • render: Client-side mounting
  • hydrate: SSR hydration
  • renderToString: Server HTML generation
  • renderToStringAsync: Async server rendering
  • renderToStream: Streaming SSR
  • HydrationScript / generateHydrationScript: Hydration setup
  • isServer: Environment detection

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is solid-core-rendering?

Perfect for Frontend Agents needing advanced SolidJS rendering capabilities for Single-Page Applications. solid-core-rendering is a set of utilities for rendering SolidJS applications, providing client-side rendering, server-side rendering, hydration, and streaming capabilities.

How do I install solid-core-rendering?

Run the command: npx killer-skills add vallafederico/solid-ai-rules/solid-core-rendering. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for solid-core-rendering?

Key use cases include: Rendering SolidJS applications on the client-side, Implementing server-side rendering for improved SEO, Hydrating server-rendered markup for dynamic updates.

Which IDEs are compatible with solid-core-rendering?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for solid-core-rendering?

Requires SolidJS application setup. Limited to SolidJS framework. Element must be a function for rendering.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add vallafederico/solid-ai-rules/solid-core-rendering. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use solid-core-rendering immediately in the current project.

Related Skills

Looking for an alternative to solid-core-rendering or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI