agentsclimarketplace

Component rendering

Skill andrmaz/spec-driven-architecture/.agents/skills/component-rendering

Software architecture documentation assistant tool

Install
npx -y skills add andrmaz/spec-driven-architecture --skill component-rendering

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Handles Tambo component streaming, loading states, and persistent state. Use when implementing streaming UI feedback, tracking prop streaming status, managing partial props, or persisting component state across sessions with useTamboStreamStatus or useTamboComponentState.

SKILL.md

3.8 KB, as published. Nobody here has run it

Component Rendering

Handles streaming props and persistent component state.

Quick Start

const { streamStatus, propStatus } = useTamboStreamStatus<Props>();

if (streamStatus.isPending) return <Skeleton />;
if (streamStatus.isStreaming) return <LoadingIndicator />;

Stream Status

Track overall and per-prop streaming status:

import { useTamboStreamStatus } from "@tambo-ai/react";

function MyComponent({ title, items }: Props) {
  const { streamStatus, propStatus } = useTamboStreamStatus<Props>();

  // Global status
  if (streamStatus.isPending) return <Skeleton />;
  if (streamStatus.isStreaming) return <LoadingIndicator />;
  if (streamStatus.isError) return <Error message={streamStatus.streamError} />;

  // Per-prop status
  return (
    <h2 className={propStatus.title?.isStreaming ? "animate-pulse" : ""}>
      {title}
    </h2>
  );
}

StreamStatus Properties

PropertyDescription
isPendingNo tokens received yet
isStreamingActive streaming in progress
isSuccessAll props finished without error
isErrorFatal error occurred
streamErrorError object if failed

PropStatus (per-prop)

PropertyDescription
isPendingNo tokens for this prop yet
isStreamingProp has partial content
isSuccessProp finished streaming
errorError for this prop (if any)

Component State

Make state visible to AI and persist across sessions:

import { useTamboComponentState, useTamboStreamStatus } from "@tambo-ai/react";

function EditableCard({ title: streamedTitle }: { title?: string }) {
  const [title, setTitle, { isPending, flush }] = useTamboComponentState(
    "title",
    "",
  );
  const { streamStatus } = useTamboStreamStatus();

  return (
    <input
      value={title}
      onChange={(e) => setTitle(e.target.value)}
      disabled={streamStatus.isStreaming || isPending}
    />
  );
}

useTamboComponentState API

const [value, setValue, meta] = useTamboComponentState(
  key, // Unique state key within the component
  initialValue, // Initial value if no server state
  debounceTime, // Debounce ms (default: 500)
);
ReturnDescription
valueCurrent state value
setValueUpdate state (supports updater functions)
meta.isPendingServer sync in progress
meta.errorSync error (if any)
meta.flushImmediately flush pending debounced updates

setValue Patterns

// Direct value
setTitle("New title");

// Updater function
setCount((prev) => prev + 1);

When to Use Component State

  • User-editable content AI should see
  • Form inputs requiring persistence
  • State that survives page reloads
  • Streaming props that user can modify after generation

Streaming Best Practices

  1. Make props optional in Zod schema:

    z.object({
  title: z.string().optional().describe("Card title"),
  items: z.array(z.string()).optional(),
});

  2. Show skeletons for missing data, not errors

  3. Use optional chaining: items?.map(...)

  4. Disable interactions until streamStatus.isSuccess

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.