sablier-design

Generate React components and pages matching Sablier's dark-theme aesthetic.

7|Updated Nov 27, 2025
One-click install
npx skills add https://github.com/sablier-labs/plugin-marketplace --skill sablier-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sablier-design
Source: https://github.com/sablier-labs/plugin-marketplace/tree/main/plugins/sablier/skills/design
Command: npx skills add https://github.com/sablier-labs/plugin-marketplace --skill sablier-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend teams translate high-level requirements into distinctive, production-grade React interfaces aligned with Sablier's dark-theme aesthetic, reducing iteration time and ensuring visual cohesion.

Core Features & Use Cases

  • Bold, cohesive UI: Generates production-ready React components and pages that embody a unique Sablier aesthetic.
  • Design guidance + implementation: Provides structured design directions, typography, color, motion, and layout practices aligned with the Sablier theme.
  • Use Case: Given a requirement for a reusable Button+Modal system with a dark theme, the Skill will produce a ready-to-integrate React component set with CSS-in-JS or CSS modules, plus example usage.

Quick Start

Use sablier-design to generate a reusable React UI module: a Button, a Card, and a sample page that follows the Sablier dark-theme aesthetic.

Frequently Asked Questions about sablier-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build React components with a dark theme aesthetic?▼

Dark theme React components require cohesive design systems with aligned typography, color palettes, and motion guidelines. This Skill generates production-ready components and pages that implement a distinctive dark-theme aesthetic out of the box, reducing design iteration and ensuring visual consistency across your UI.

Can I generate production-grade React UI that matches a specific design system?▼

Yes. This Skill automates creation of production-grade React interfaces aligned to Sablier's dark-theme design system, including typography, color, motion, and layout practices. It outputs ready-to-integrate components with CSS-in-JS or CSS modules and example usage patterns.

What's the fastest way to build a reusable component library with dark mode?▼

This Skill accelerates component library creation by generating reusable React modules—Buttons, Cards, pages, and full component sets—that follow a cohesive dark-theme aesthetic with structured design guidance, eliminating manual design decisions and reducing time-to-integration.

Do I need design specifications to create React components with consistent styling?▼

No. This Skill includes built-in design guidance for typography, color, motion, and layout aligned to a dark-theme aesthetic. You provide functional requirements, and it generates React code that automatically enforces visual cohesion without needing separate design specs.

Can I use this for pages and full UI systems, or just individual components?▼

Both. This Skill generates individual components like Buttons and Cards as well as complete pages and design systems. All outputs follow the same Sablier dark-theme aesthetic, ensuring cohesion whether you're building modular components or full page layouts.

What output formats does this Skill use for React code?▼

This Skill outputs React code with CSS-in-JS or CSS modules styling, ready for immediate integration into your project. Components include example usage patterns and follow production-grade standards aligned to the Sablier dark-theme design language.