skills.rest
PaulRBerg
PaulRBergCOMMUNITY
Explore all skills by this author →
Website𝕏@PaulRBergGitHub

sablier-design

Generate React interfaces using Sablier dark-theme tokens and Urbanist font.

6|2|Updated Jan 25, 2026
Search Tags:#design#theming#ui#frontend#react#aesthetics
One-click install
npx skills add https://github.com/PaulRBerg/dot-agents --skill sablier-design-paulrberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sablier-design
Source: https://github.com/PaulRBerg/dot-agents/tree/main/skills/sablier-design
Command: npx skills add https://github.com/PaulRBerg/dot-agents --skill sablier-design-paulrberg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams produce distinctive, production-grade frontend interfaces aligned with Sablier's dark-theme aesthetic, avoiding generic AI-generated visuals.

Core Features & Use Cases

  • Design-forward components: Create React components, pages, and apps that strictly follow the Sablier visual language.
  • Themed accuracy: Use Urbanist font, color tokens, and motion guidelines to ensure consistency and accessibility.
  • Use Case: Build high-impact dashboards or marketing pages that demand a bold, refined aesthetic.

Quick Start

Provide your frontend requirements (component, page, or application). I will generate production-grade React code aligned with Sablier’s theme.

Frequently Asked Questions about sablier-design

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

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

Generate React components with a dark-theme aesthetic by providing your UI requirements; the skill outputs production-ready code using Sablier CSS tokens, the Urbanist font, and accessibility-conscious patterns.

What is the best way to build design-forward React interfaces that avoid generic styling?▼

To build design-forward React interfaces that avoid generic styling, apply strict visual language constraints using specific typography, color tokens, and motion guidelines to ensure a distinctive aesthetic.

Can I use Sablier CSS tokens and the Urbanist font for full React applications?▼

Yes, you can use Sablier CSS tokens and the Urbanist font for full React applications. The skill handles design-forward UI for full apps, ensuring themed accuracy and ready-to-run code.

Does this approach to React UI generation support accessibility-conscious patterns?▼

Yes, this approach to React UI generation supports accessibility-conscious patterns. It integrates accessibility directly into the layout, typography, and motion constraints alongside the Sablier visual language.

What do I need to provide to get ready-to-run React code for a dashboard?▼

To get ready-to-run React code for a dashboard, you only need to provide your frontend requirements. The skill then generates the production-grade interface aligned with the dark-theme aesthetic.

Related Skills

Explore More Design & Creative Skills→
otto-poblyshotto-poblysh

frontend-design

Generate production-grade React/HTML/CSS frontend interfaces with cohesive typography and motion.

Community
Intermediate
rauell1rauell1
3

frontend-design

Design and build distinctive frontend interfaces with cohesive typography, color, motion, and layout.

Community
Advanced
anderskevanderskev
75

react-flow-implementation

Implement React Flow node-based UIs with @xyflow/react.

Community
Advanced
whyte25whyte25
12

frontend-design

Design and implement distinctive frontend interfaces with cohesive typography and color systems.

Community
Advanced