Agent skill

Component Guide

Guide for building React components using @stellar/design-system and project SCSS conventions.

Apache-2.0Auto-check passedFrontend & Design

Install Component Guide

skills CLI

$ npx skills add stellar/laboratory --skill component-guide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install stellar/laboratory component-guide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/stellar/laboratory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/component-guide .claude/skills/component-guide && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "component-guide" agent skill from https://github.com/stellar/laboratory/tree/main/.claude/skills/component-guide into .claude/skills/component-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guide", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/stellar/laboratory/tree/main/.claude/skills/component-guide

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add stellar/laboratory --skill component-guide -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install stellar/laboratory component-guide --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/stellar/laboratory.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/component-guide .agents/skills/component-guide && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "component-guide" agent skill from https://github.com/stellar/laboratory/tree/main/.claude/skills/component-guide into .agents/skills/component-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guide", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add stellar/laboratory --skill component-guide -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install stellar/laboratory component-guide --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/stellar/laboratory.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/component-guide .cursor/skills/component-guide && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "component-guide" agent skill from https://github.com/stellar/laboratory/tree/main/.claude/skills/component-guide into .cursor/skills/component-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guide", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/stellar/laboratory.git --path .claude/skills/component-guide

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add stellar/laboratory --skill component-guide -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install stellar/laboratory component-guide --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/stellar/laboratory.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/component-guide .gemini/skills/component-guide && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "component-guide" agent skill from https://github.com/stellar/laboratory/tree/main/.claude/skills/component-guide into .gemini/skills/component-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guide", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install stellar/laboratory component-guide

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add stellar/laboratory --skill component-guide -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/stellar/laboratory.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/component-guide .github/skills/component-guide && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "component-guide" agent skill from https://github.com/stellar/laboratory/tree/main/.claude/skills/component-guide into .github/skills/component-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guide", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add stellar/laboratory --skill component-guide -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install stellar/laboratory component-guide --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/stellar/laboratory.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/component-guide .opencode/skills/component-guide && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "component-guide" agent skill from https://github.com/stellar/laboratory/tree/main/.claude/skills/component-guide into .opencode/skills/component-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guide", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: component-guide
GitHub stars: 112
Token cost: ~999 tokens
SKILL.md length: 232 words
Files: 2
Skills in repo: 6
Repo updated: Oct 3, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Guide for building React components using @stellar/design-system and project SCSS conventions.

Tasks that involve CSS and styling
SKILL.md covers Before Building Anything Custom, Component File Structure, Component Template and SCSS Template, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Tasks that involve Design systems

What it does

Component Guide is an agent skill from stellar/laboratory. Guide for building React components using @stellar/design-system and project SCSS conventions. Invoke when creating new components or reviewing component code.

Its SKILL.md is about 1000 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `reference/ui-components.md`).

It sits in Frontend & Design, covering CSS and styling, Design systems and React components. The repository describes itself as: A set of tools that enables developers to try out and learn about the Stellar network. The licence is Apache-2.0.

When your agent uses it

Tasks that involve CSS and styling
Tasks that involve Design systems
Tasks that involve React components

Example prompts

“/component-guide”

What it can do on your machine

Read from SKILL.md and the folder at commit b4b6465. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and scss).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Component Guide loads about 999 tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 232 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~44
When it runs · the whole SKILL.md, loaded when a task matches: ~999

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from stellar/laboratory at commit b4b6465, republished under its Apache-2.0 licence (© stellar). 232 words, ~999 tokens.

Download SKILL.mdSave it as .claude/skills/component-guide/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: component-guide
description: Guide for building React components using @stellar/design-system and project SCSS conventions. Invoke when creating new components or reviewing component code.
read_files: .claude/skills/component-guide/reference/*.md

Component Guide

Before Building Anything Custom

Check if @stellar/design-system already has the component: https://github.com/stellar/stellar-design-system

For the full component catalog (SDS + local layout wrappers) and props patterns, see reference/ui-components.md (loaded automatically).

Component File Structure

With styles (preferred for non-trivial components)

src/components/ComponentName/
├── index.tsx
└── styles.scss

Without styles (simple components)

src/components/ComponentName.tsx

Page-specific components

src/app/(sidebar)/[feature]/components/ComponentName.tsx

Component Template

typescript

"use client";

import { useState } from "react";
import { Button, Input, Card } from "@stellar/design-system";

import "./styles.scss";

interface ComponentNameProps {
  /** Description of prop */
  propName: string;
}

/**
 * Brief description of what this component does
 *
 * @example
 * <ComponentName propName="value" />
 */
export const ComponentName = ({ propName }: ComponentNameProps) => {
  return (
    <div className="ComponentName">
      <div className="ComponentName__header">
        {/* ... */}
      </div>
      <div className="ComponentName__content">
        {/* ... */}
      </div>
    </div>
  );
};

SCSS Template

scss

.ComponentName {
  // Root styles

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: pxToRem(16px);
  }

  &__footer {
    display: flex;
    gap: pxToRem(8px);
  }
}

Conventions

Do

Use design system components for all standard UI elements
Use SCSS with BEM-ish class naming (ComponentName__element--modifier)
Use pxToRem() for spacing values in SCSS (skip for trivial values like 1px or -1px — e.g., borders, outlines, offsets — where rem scaling is not meaningful)
Use SDS CSS custom properties for colors/fonts/gaps: var(--sds-clr-gray-06), var(--sds-ff-monospace), var(--sds-gap-md)
Use data-* attributes for state-driven styling instead of modifier classes: data-is-active, data-is-visible, data-is-selected, data-is-clickable
Use data-testid with dashes for test selectors (data-testid="sign-button")
Add JSDoc comments with @example for exported components
Co-locate page-specific components with their page
Import shared SCSS utilities: @use "../../styles/utils.scss" as *;

Don't

Use inline style={} attributes — always use SCSS classes
Create custom buttons, inputs, or alerts when design system has equivalents
Use arbitrary hex colors — use SDS CSS custom properties (--sds-clr-*)
Put styles in the component file — always separate into .scss
Use className string concatenation — use template literals or classnames lib
Use conditional CSS classes for state — prefer data-* attributes

Data Attribute Pattern for State-Driven Styling

Prefer data-* attributes over CSS modifier classes for dynamic state:

typescript

// Component
<div
  className="TransactionStepper__step"
  data-is-active={isActive || undefined}
  data-is-completed={isCompleted || undefined}
  data-is-clickable={isClickable || undefined}
  onClick={isClickable ? () => onStepClick(step) : undefined}
>

scss

// SCSS — target with attribute selectors
.TransactionStepper__step {
  opacity: 0.5;

  &[data-is-active="true"] {
    opacity: 1;
    font-weight: var(--sds-fw-medium);
  }

  &[data-is-clickable="true"] {
    cursor: pointer;
  }

  &[data-is-completed="true"] {
    opacity: 0.8;
  }
}

Pass undefined (not false) to omit the attribute from the DOM entirely.

Files

SKILL.md and 1 other file in .claude/skills/component-guide of stellar/laboratory.

SKILL.md
reference/ui-components.md

Open the folder on GitHubat commit b4b6465

Compare with similar skills

Component Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Component Guide compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Component Guide this skillstellar/laboratory	112	—	~999	Automated safety check: Pass	Apache-2.0	4 days ago
Create ComponentEndava/BEEQ	163	—	~1.5k	Automated safety check: Pass	Apache-2.0	yesterday
Component CreationLucasBassetti/godui	129	—	~2.1k	Automated safety check: Pass	MIT	4 days ago
Shadcn Tailwind UILiarMTTT/TavernWeave	148	—	~1.7k	Automated safety check: Pass	Custom licence	3 days ago
Web Component Designwshobson/agents	40k	2 repos	~1.9k	Automated safety check: Pass	MIT	3 days ago
Shift UI Componentsshift-editor/shift	343	—	~2.5k	Automated safety check: Pass	Apache-2.0	yesterday

Similar skills

Create Component
Endava/BEEQ
Create a new BEEQ StencilJS web component. An agent skill from Endava/BEEQ.
163 GitHub stars~1.5k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Component Creation
LucasBassetti/godui
A skill your agent uses when creating a new component for the design system.
129 GitHub stars~2.1k tokensUpdated 4 days ago
Frontend & DesignAuto-check passed
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
148 GitHub stars~1.7k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Web Component Design
wshobson/agents
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture.
40k GitHub starsUsed in 2 repos~1.9k tokens
Frontend & DesignAuto-check passed
Shift UI Components
shift-editor/shift
Guides design, implementation and review of Shift interface work: shared Base UI wrappers, Tailwind v4 theme tokens, Figma matching and accessible interaction states.
343 GitHub stars~2.5k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Aceternity UI
secondsky/claude-skills
100+ animated React components (Aceternity UI) for Next.js with Tailwind.
227 GitHub stars~4.7k tokensUpdated 9 days ago
Frontend & DesignAuto-check passed

Questions about Component Guide

What does Component Guide do?

Guide for building React components using @stellar/design-system and project SCSS conventions. Component Guide is an agent skill from stellar/laboratory. Guide for building React components using @stellar/design-system and project SCSS conventions.

When should I use Component Guide?

Component Guide fits situations like: tasks that involve CSS and styling; tasks that involve Design systems; tasks that involve React components.

How do I install Component Guide in Claude Code?

Run `npx skills add stellar/laboratory --skill component-guide -a claude-code`. Or copy the skill folder (.claude/skills/component-guide in stellar/laboratory) into .claude/skills/component-guide in your project. Claude Code loads it when a task matches its description.

How do I install Component Guide in Codex?

Run `npx skills add stellar/laboratory --skill component-guide -a codex`. Or copy the skill folder (.claude/skills/component-guide in stellar/laboratory) into .agents/skills/component-guide in your project. Codex loads it when a task matches its description.

Can I use Component Guide in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add stellar/laboratory --skill component-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/component-guide, .gemini/skills/component-guide, .github/skills/component-guide and .opencode/skills/component-guide in your project.

What does Component Guide need to run?

SKILL.md names no scripts, command-line tools or credentials: Component Guide is instructions for the agent only.

Does Component Guide access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Component Guide safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Component Guide use?

Component Guide is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Component Guide use?

About 999 tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Component Guide?

Skills that share tags, products or a category with Component Guide: Create Component (Endava/BEEQ, 163 stars), Component Creation (LucasBassetti/godui, 129 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 148 stars) and Web Component Design (wshobson/agents, 40k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Component Guide?

stellar (a GitHub organization) maintains it in stellar/laboratory, which has 112 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 3, 2026.

Source: stellar/laboratory on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Component Guide

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Component Guide

Before Building Anything Custom

Component File Structure

With styles (preferred for non-trivial components)

Without styles (simple components)

Page-specific components

Component Template

SCSS Template

Conventions

Do

Don't

Data Attribute Pattern for State-Driven Styling

Files

Compare with similar skills

Similar skills

More from stellar/laboratory

Related

Questions about Component Guide