What is solid-core-rendering?

Perfect for Frontend Agents needing advanced SolidJS rendering capabilities for Single-Page Applications. SolidJS rendering: render for client apps, hydrate for SSR, renderToString for server rendering, renderToStream for streaming, isServer checks.

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.

solid-core-rendering

Install solid-core-rendering, an AI agent skill for AI agent workflows and automation. Review the use cases, limitations, and setup path before rollout.

SKILL.md

Readonly

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Supporting Evidence

SolidJS Rendering Utilities

Name: solid-core-rendering
Availability: InStock
Author: vallafederico

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

Always use function form:
- render(() => <App />, element)
- Not render(<App />, element)
Empty mount element:
- Element should be empty
- Render appends, dispose removes all
Hydration matching:
- Server and client must match
- Same structure and content
Use isServer checks:
- Avoid browser APIs on server
- Conditional logic when needed
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

solid-core-rendering — community solid-core-rendering, solid-ai-rules, community, ide skills

About this Skill

Killer-Skills Review

Core Value

Ideal Agent Persona

↓ Capabilities Granted for solid-core-rendering

! Prerequisites & Limits

Why this page is reference-only

Source Boundary

Decide The Next Action Before You Keep Reading Repository Material

Start With Installation And Validation

Cross-Check Against Trusted Picks

Move To Workflow Collections For Team Rollout

Browser Sandbox Environment

⚡️ Ready to unleash?

FAQ & Installation Steps

? Frequently Asked Questions

What is solid-core-rendering?

How do I install solid-core-rendering?

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

Which IDEs are compatible with solid-core-rendering?

Are there any limitations for solid-core-rendering?

↓ How To Install

! Reference-Only Mode

Upstream Repository Material

solid-core-rendering

SolidJS Rendering Utilities

render - Client-Side Rendering

hydrate - SSR Hydration

renderToString - Server Rendering

renderToStringAsync - Async Rendering

renderToStream - Streaming SSR

HydrationScript / generateHydrationScript

isServer - Environment Check

Common Patterns

Client Entry Point

SSR Entry Point

Client Hydration

Streaming SSR

Environment-Specific Code

Best Practices

Summary

Related Skills

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

openclaw-release-maintainer

widget-generator

flags

pr-review