/suede-component-lab · Design system

Suede AI Component Lab Skills See real components in the states that matter.

Explore the components your product already uses in a local workbench. Compare supported loading, empty, error, long-content and keyboard states with synthetic fixtures, then inspect live variants against the same task. Reuse the current stack, tokens and brand while keeping production data and behavior separate.

Read the skill Install options

"Build a component workbench with stress fixtures and live variants." /suede-component-lab The workflow router selects this task when the skill is available.

What you get

  • A local workbench that imports the actual product components and their existing providers.
  • A state matrix with synthetic fixtures for supported loading, empty, error, success, disabled and long-content cases.
  • Live variants compared under the same task, content, viewport and theme.
  • Rendered observations, keyboard checks and a record of which states still need verification.

Keep the preview isolated

  • Use the project's existing preview and build tools; request a dependency change only if the task requires it.
  • Use synthetic data, inert callbacks and request stubs. Keep production accounts, credentials and mutations outside the workbench.
  • Check the actual routing and build configuration before calling the preview dev-only.
  • Keep behavioral stress fixtures distinct from design variants so each comparison answers a clear question.

Review states, then decide

Start with the user's task and the action each control supports. Compare error recovery, readability, keyboard access and content fit before cosmetic differences. Existing components, tokens and brand supply the baseline. A preferred variant is a design judgment; a conversion improvement requires separate measurement.

When the runtime cannot render a state, the report identifies it as unobserved. A fixture file or source inspection alone does not prove that the interface renders correctly.

Example request

Use $suede-component-lab for the existing checkout controls. Import the real components into our current preview tooling, use synthetic states and inert callbacks, and compare long-content, error, loading, disabled and keyboard states. Preserve our tokens and brand. Verify the workbench stays out of production routes and output, then report what you actually rendered.

Choose the matching task

Suede AI Design Skills reviews whole flows and UI diffs or implements an authorized design. Suede AI Interface Explain Skills explains an existing mechanism without rebuilding it. Suede AI Code Skills reviews implementation correctness.

Repository and installation

This documentation-only skill lives under skills/suede-component-lab/. Keeping it in the repository prepares it for future full-pack distribution; it does not install dependencies or activate the skill globally. Installation into an agent is a separate action.

Install this skill

The repository includes this skill in full-pack discovery. Install a revision containing it to use the new entry point. Claude Code takes two commands the first time and one after that; Codex installs the same pack natively.

terminal · install the pack
Claude Code 
$ /plugin marketplace add JasonColapietro/suede-creator-skills
$ /plugin install suede-skills@suede
Codex 
$ codex plugin add suede-skills@suede-codex

Cursor, Copilot, and Windsurf install through the skills CLI. Every path is on the install page, and every folder is readable first on GitHub.

Proof is part of the release.

First install takes two commands. After the marketplace is added, install is one. Every skill is plain Markdown.

$ /plugin marketplace add JasonColapietro/suede-creator-skills → /plugin install suede-skills@suede All install paths