New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Gpui Styling

by StudentWeis in StudentWeis/ropy

GPUI styling system including theme design, responsive layouts, visual design patterns, and style composition.

MITAuto-check passedFrontend & Design

Install Gpui Styling

skills CLI
$ npx skills add StudentWeis/ropy --skill gpui-styling -a claude-code

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

GitHub CLI
$ gh skill install StudentWeis/ropy gpui-styling --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/StudentWeis/ropy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/gpui-styling .claude/skills/gpui-styling && 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/

Facts

Skill name
gpui-styling
GitHub stars
194
Token cost
~3.8k tokens
SKILL.md length
197 words
Files
1
Skills in repo
17
Repo updated
First seen
Licence
MIT

At a glance

GPUI styling system including theme design, responsive layouts, visual design patterns, and style composition.

  • User needs help with styling
  • SKILL.md covers Metadata, Instructions and Resources
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Visual design in GPUI

What it does

Gpui Styling is an agent skill from StudentWeis/ropy. GPUI styling system including theme design, responsive layouts, visual design patterns, and style composition. Use when user needs help with styling, theming, or visual design in GPUI.

Its SKILL.md is about 3.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design, Responsive design and Theming and dark mode. The repository describes itself as: Cross-platform, lightweight clipboard manager written in Rust and GPUI. The licence is MIT.

When your agent uses it

  • User needs help with styling
  • Visual design in GPUI

Example prompts

  • “/gpui-styling”

What it can do on your machine

Read from SKILL.md and the folder at commit 4e784df. 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 rust).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    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

Gpui Styling loads about 3.8k tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 197 words of instructions outside code blocks.

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

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 StudentWeis/ropy at commit 4e784df, republished under its MIT licence (© StudentWeis). 197 words, ~3,831 tokens.

Download SKILL.mdSave it as .claude/skills/gpui-styling/SKILL.md (or your agent's skills folder).
name
gpui-styling
description
GPUI styling system including theme design, responsive layouts, visual design patterns, and style composition. Use when user needs help with styling, theming, or visual design in GPUI.

GPUI Styling

Metadata

This skill provides comprehensive guidance on GPUI's styling system, theme management, and visual design patterns for creating beautiful, consistent user interfaces.

Instructions

Styling API Fundamentals
Basic Styling
rust
use gpui::*;

div()
    // Colors
    .bg(rgb(0x2563eb))           // Background
    .text_color(white())          // Text color
    .border_color(rgb(0xe5e7eb)) // Border color

    // Spacing
    .p_4()                        // Padding: 1rem
    .px_6()                       // Padding horizontal
    .py_2()                       // Padding vertical
    .m_4()                        // Margin
    .gap_3()                      // Gap between children

    // Sizing
    .w_64()                       // Width: 16rem
    .h_32()                       // Height: 8rem
    .w_full()                     // Width: 100%
    .h_full()                     // Height: 100%

    // Borders
    .border_1()                   // Border: 1px
    .rounded_lg()                 // Border radius: large
Color Types
rust
// RGB from hex
let blue = rgb(0x2563eb);

// RGBA with alpha
let transparent_blue = rgba(0x2563eb, 0.5);

// HSLA (hue, saturation, lightness, alpha)
let hsla_color = hsla(0.6, 0.8, 0.5, 1.0);

// Named colors
let white = white();
let black = black();
Layout with Flexbox
rust
div()
    .flex()                      // Enable flexbox
    .flex_row()                  // Horizontal layout
    .flex_col()                  // Vertical layout
    .items_center()              // Align items center
    .justify_between()           // Space between
    .gap_4()                     // Gap between items
    .child(/* ... */)
    .child(/* ... */)
Theme System
Basic Theme Structure
rust
use gpui::*;

#[derive(Clone)]
pub struct AppTheme {
    pub colors: ThemeColors,
    pub typography: Typography,
    pub spacing: Spacing,
    pub shadows: Shadows,
}

#[derive(Clone)]
pub struct ThemeColors {
    // Base colors
    pub background: Hsla,
    pub foreground: Hsla,

    // UI colors
    pub primary: Hsla,
    pub primary_foreground: Hsla,
    pub primary_hover: Hsla,

    pub secondary: Hsla,
    pub secondary_foreground: Hsla,
    pub secondary_hover: Hsla,

    pub accent: Hsla,
    pub accent_foreground: Hsla,

    pub destructive: Hsla,
    pub destructive_foreground: Hsla,

    // Neutral colors
    pub muted: Hsla,
    pub muted_foreground: Hsla,

    pub border: Hsla,
    pub input: Hsla,
    pub ring: Hsla,
}

#[derive(Clone)]
pub struct Typography {
    pub font_sans: Vec<String>,
    pub font_mono: Vec<String>,

    pub text_xs: Pixels,
    pub text_sm: Pixels,
    pub text_base: Pixels,
    pub text_lg: Pixels,
    pub text_xl: Pixels,
    pub text_2xl: Pixels,
}

#[derive(Clone)]
pub struct Spacing {
    pub xs: Pixels,
    pub sm: Pixels,
    pub md: Pixels,
    pub lg: Pixels,
    pub xl: Pixels,
}
Light Theme Implementation
rust
impl AppTheme {
    pub fn light() -> Self {
        Self {
            colors: ThemeColors {
                background: rgb(0xffffff),
                foreground: rgb(0x0a0a0a),

                primary: rgb(0x2563eb),
                primary_foreground: rgb(0xffffff),
                primary_hover: rgb(0x1d4ed8),

                secondary: rgb(0xf1f5f9),
                secondary_foreground: rgb(0x0f172a),
                secondary_hover: rgb(0xe2e8f0),

                accent: rgb(0xf1f5f9),
                accent_foreground: rgb(0x0f172a),

                destructive: rgb(0xef4444),
                destructive_foreground: rgb(0xffffff),

                muted: rgb(0xf1f5f9),
                muted_foreground: rgb(0x64748b),

                border: rgb(0xe2e8f0),
                input: rgb(0xe2e8f0),
                ring: rgb(0x2563eb),
            },
            typography: Typography {
                font_sans: vec![
                    "Inter".to_string(),
                    "system-ui".to_string(),
                    "sans-serif".to_string(),
                ],
                font_mono: vec![
                    "JetBrains Mono".to_string(),
                    "monospace".to_string(),
                ],
                text_xs: px(12.0),
                text_sm: px(14.0),
                text_base: px(16.0),
                text_lg: px(18.0),
                text_xl: px(20.0),
                text_2xl: px(24.0),
            },
            spacing: Spacing {
                xs: px(4.0),
                sm: px(8.0),
                md: px(16.0),
                lg: px(24.0),
                xl: px(32.0),
            },
            shadows: Shadows {
                sm: Shadow::new(px(1.0), rgba(0x000000, 0.05)),
                md: Shadow::new(px(4.0), rgba(0x000000, 0.1)),
                lg: Shadow::new(px(8.0), rgba(0x000000, 0.15)),
            },
        }
    }
}
Dark Theme Implementation
rust
impl AppTheme {
    pub fn dark() -> Self {
        Self {
            colors: ThemeColors {
                background: rgb(0x0a0a0a),
                foreground: rgb(0xfafafa),

                primary: rgb(0x3b82f6),
                primary_foreground: rgb(0xffffff),
                primary_hover: rgb(0x2563eb),

                secondary: rgb(0x1e293b),
                secondary_foreground: rgb(0xf1f5f9),
                secondary_hover: rgb(0x334155),

                accent: rgb(0x1e293b),
                accent_foreground: rgb(0xf1f5f9),

                destructive: rgb(0xef4444),
                destructive_foreground: rgb(0xffffff),

                muted: rgb(0x1e293b),
                muted_foreground: rgb(0x94a3b8),

                border: rgb(0x334155),
                input: rgb(0x334155),
                ring: rgb(0x3b82f6),
            },
            typography: Typography {
                font_sans: vec![
                    "Inter".to_string(),
                    "system-ui".to_string(),
                    "sans-serif".to_string(),
                ],
                font_mono: vec![
                    "JetBrains Mono".to_string(),
                    "monospace".to_string(),
                ],
                text_xs: px(12.0),
                text_sm: px(14.0),
                text_base: px(16.0),
                text_lg: px(18.0),
                text_xl: px(20.0),
                text_2xl: px(24.0),
            },
            spacing: Spacing {
                xs: px(4.0),
                sm: px(8.0),
                md: px(16.0),
                lg: px(24.0),
                xl: px(32.0),
            },
            shadows: Shadows {
                sm: Shadow::new(px(1.0), rgba(0x000000, 0.2)),
                md: Shadow::new(px(4.0), rgba(0x000000, 0.3)),
                lg: Shadow::new(px(8.0), rgba(0x000000, 0.4)),
            },
        }
    }
}
Using Themes in Components
rust
impl Render for ThemedComponent {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let theme = cx.global::<AppTheme>();

        div()
            .bg(theme.colors.background)
            .text_color(theme.colors.foreground)
            .p(theme.spacing.md)
            .border_1()
            .border_color(theme.colors.border)
            .child("Themed content")
    }
}
Theme Switching
rust
pub fn toggle_theme(cx: &mut AppContext) {
    let current = cx.global::<AppTheme>().clone();

    let new_theme = match current.mode {
        ThemeMode::Light => AppTheme::dark(),
        ThemeMode::Dark => AppTheme::light(),
    };

    cx.set_global(new_theme);
    cx.refresh();
}
Responsive Design
Window Size Detection
rust
impl Render for ResponsiveView {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let window_size = cx.window_bounds().get_bounds().size;
        let is_mobile = window_size.width < px(768.0);
        let is_tablet = window_size.width >= px(768.0) && window_size.width < px(1024.0);
        let is_desktop = window_size.width >= px(1024.0);

        div()
            .flex()
            .when(is_mobile, |this| {
                this.flex_col().gap_2()
            })
            .when(is_desktop, |this| {
                this.flex_row().gap_6()
            })
            .child(sidebar())
            .child(main_content())
    }
}
Breakpoint-Based Styling
rust
pub struct Breakpoints;

impl Breakpoints {
    pub const SM: f32 = 640.0;
    pub const MD: f32 = 768.0;
    pub const LG: f32 = 1024.0;
    pub const XL: f32 = 1280.0;
    pub const XXL: f32 = 1536.0;
}

fn responsive_grid(width: Pixels) -> impl IntoElement {
    div()
        .grid()
        .when(width.0 < Breakpoints::SM, |this| this.grid_cols_1())
        .when(width.0 >= Breakpoints::SM && width.0 < Breakpoints::LG, |this| {
            this.grid_cols_2()
        })
        .when(width.0 >= Breakpoints::LG, |this| this.grid_cols_3())
        .gap_4()
}
Visual Design Patterns
Card Component
rust
pub fn card(
    title: impl Into<String>,
    description: impl Into<String>,
    content: impl IntoElement,
) -> impl IntoElement {
    let theme = cx.global::<AppTheme>();

    div()
        .bg(theme.colors.background)
        .border_1()
        .border_color(theme.colors.border)
        .rounded_lg()
        .shadow_sm()
        .overflow_hidden()
        .child(
            div()
                .p_6()
                .border_b_1()
                .border_color(theme.colors.border)
                .child(
                    div()
                        .text_lg()
                        .font_semibold()
                        .child(title.into())
                )
                .child(
                    div()
                        .text_sm()
                        .text_color(theme.colors.muted_foreground)
                        .child(description.into())
                )
        )
        .child(
            div()
                .p_6()
                .child(content)
        )
}
Button Variants
rust
pub enum ButtonVariant {
    Primary,
    Secondary,
    Outline,
    Ghost,
    Destructive,
}

pub fn button(
    label: &str,
    variant: ButtonVariant,
) -> impl IntoElement {
    let theme = cx.global::<AppTheme>();

    let (bg, fg, hover_bg) = match variant {
        ButtonVariant::Primary => (
            theme.colors.primary,
            theme.colors.primary_foreground,
            theme.colors.primary_hover,
        ),
        ButtonVariant::Secondary => (
            theme.colors.secondary,
            theme.colors.secondary_foreground,
            theme.colors.secondary_hover,
        ),
        ButtonVariant::Outline => (
            hsla(0.0, 0.0, 0.0, 0.0),
            theme.colors.foreground,
            theme.colors.accent,
        ),
        ButtonVariant::Ghost => (
            hsla(0.0, 0.0, 0.0, 0.0),
            theme.colors.foreground,
            theme.colors.accent,
        ),
        ButtonVariant::Destructive => (
            theme.colors.destructive,
            theme.colors.destructive_foreground,
            theme.colors.destructive,
        ),
    };

    div()
        .px_4()
        .py_2()
        .bg(bg)
        .text_color(fg)
        .rounded_md()
        .font_medium()
        .cursor_pointer()
        .when(matches!(variant, ButtonVariant::Outline), |this| {
            this.border_1().border_color(theme.colors.border)
        })
        .hover(|this| this.bg(hover_bg))
        .transition_colors()
        .duration_150()
        .child(label)
}
Input Fields
rust
pub fn text_input(
    value: &str,
    placeholder: &str,
) -> impl IntoElement {
    let theme = cx.global::<AppTheme>();

    div()
        .flex()
        .items_center()
        .w_full()
        .px_3()
        .py_2()
        .bg(theme.colors.background)
        .border_1()
        .border_color(theme.colors.input)
        .rounded_md()
        .text_color(theme.colors.foreground)
        .focus(|this| {
            this.border_color(theme.colors.ring)
                .ring_2()
                .ring_color(rgba(theme.colors.ring, 0.2))
        })
        .child(
            input()
                .w_full()
                .bg(hsla(0.0, 0.0, 0.0, 0.0))
                .placeholder(placeholder)
                .value(value)
        )
}
Style Composition
Reusable Style Functions
rust
pub fn focus_ring(theme: &AppTheme) -> StyleRefinement {
    StyleRefinement::default()
        .ring_2()
        .ring_color(rgba(theme.colors.ring, 0.2))
        .border_color(theme.colors.ring)
}

pub fn shadow_sm(theme: &AppTheme) -> StyleRefinement {
    StyleRefinement::default()
        .shadow(theme.shadows.sm)
}

// Usage
div()
    .apply(focus_ring(&theme))
    .apply(shadow_sm(&theme))
    .child("Styled element")
Conditional Styles
rust
fn dynamic_button(
    label: &str,
    is_loading: bool,
    is_disabled: bool,
) -> impl IntoElement {
    let theme = cx.global::<AppTheme>();

    div()
        .px_4()
        .py_2()
        .bg(theme.colors.primary)
        .text_color(theme.colors.primary_foreground)
        .rounded_md()
        .when(is_disabled || is_loading, |this| {
            this.opacity(0.5).cursor_not_allowed()
        })
        .when(!is_disabled && !is_loading, |this| {
            this.cursor_pointer()
                .hover(|this| this.bg(theme.colors.primary_hover))
        })
        .child(
            if is_loading {
                "Loading..."
            } else {
                label
            }
        )
}
Animation and Transitions
Hover Transitions
rust
div()
    .transition_all()           // Transition all properties
    .duration_200()             // 200ms duration
    .bg(blue_500())
    .hover(|this| {
        this.bg(blue_600())
            .scale_105()        // Scale to 105%
    })
    .child("Hover me")
Transform Animations
rust
div()
    .transition_transform()
    .duration_300()
    .ease_in_out()
    .hover(|this| {
        this.rotate(5.0)        // Rotate 5 degrees
            .translate_y(px(-2.0))  // Move up 2px
    })
    .child("Animated element")

Resources

Color Systems
  • Use HSL for color manipulation
  • Maintain consistent color contrast ratios
  • Define semantic color names (primary, secondary, etc.)
  • Support both light and dark themes
Typography Scale
  • Base: 16px (1rem)
  • Scale: 1.125 (Major Second) or 1.2 (Minor Third)
  • Sizes: xs, sm, base, lg, xl, 2xl, etc.
  • Weights: normal, medium, semibold, bold
Spacing Scale
  • Base unit: 4px or 8px
  • Multipliers: 0.5, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32
  • Consistent throughout application
  • Used for padding, margin, gap
Best Practices
  • Define theme at app level
  • Use semantic color names
  • Implement both light and dark themes
  • Support responsive design
  • Maintain consistent spacing
  • Use transitions for smooth interactions
  • Ensure accessibility (contrast, focus indicators)
  • Document theme structure

© StudentWeis, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/gpui-styling of StudentWeis/ropy.

Open the folder on GitHubat commit 4e784df

Compare with similar skills

Gpui Styling 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.

Gpui Styling compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Gpui Styling this skillStudentWeis/ropy194—~3.8kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill130—~3kAutomated safety check: PassMIT
UI Design Systemtry-works/role-model118—~5kAutomated safety check: PassMIT
UI UX Pro Max SkillJason904/ui-skill-lab144—~865Automated safety check: PassMIT
Bmad UXaj-geddes/claude-code-bmad-skills487—~2kAutomated safety check: NotesCustom licence

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Material Design 3 UI/UX Guide

    skydashnet/material-design-3-ui-skill

    Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.

    130 GitHub stars~3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    118 GitHub stars~5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • UI UX Pro Max Skill

    Jason904/ui-skill-lab

    A skill your agent uses for UI/UX design intelligence in Codex: planning, building, reviewing, improving, or implementing web/mobile interfaces, landing pages, dashboards, design systems…

    144 GitHub stars~865 tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Bmad UX

    aj-geddes/claude-code-bmad-skills

    Solutioning-phase UX planning skill (optional; activate when the project has a UI).

    487 GitHub stars~2k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check: notes

  • Frontend Enhancer

    ailabs-393/ai-labs-claude-skills

    This skill should be used when enhancing the visual design and aesthetics of Next.js web applications.

    454 GitHub stars~3k tokensUpdated 11 mo ago
    Frontend & DesignAuto-check passed

More from StudentWeis/ropy

All 17 skills in this repo

  • Gpui Element

    StudentWeis/ropy

    Implementing custom elements using GPUI's low-level Element API (vs.

    194 GitHub stars~1.1k tokensUpdated 29 days ago
    Auto-check passed

  • Gpui Entity

    StudentWeis/ropy

    Entity management and state handling in GPUI. An agent skill from StudentWeis/ropy.

    194 GitHub stars~1.1k tokensUpdated 29 days ago
    Auto-check passed

  • Code Quality Review

    StudentWeis/ropy

    Review a code change, diff, pull request, module, or test suite for code quality, comment and documentation quality, and test quality.

    194 GitHub stars~2.2k tokensUpdated 29 days ago
    Auto-check passed

  • Contribution Flow

    StudentWeis/ropy

    Repository contribution workflow. An agent skill from StudentWeis/ropy.

    194 GitHub stars~705 tokensUpdated 29 days ago
    Auto-check passed

  • Gpui Action

    StudentWeis/ropy

    Action definitions and keyboard shortcuts in GPUI. An agent skill from StudentWeis/ropy.

    194 GitHub stars~916 tokensUpdated 29 days ago
    Auto-check passed

  • Gpui Async

    StudentWeis/ropy

    Async operations and background tasks in GPUI. An agent skill from StudentWeis/ropy.

    194 GitHub stars~934 tokensUpdated 29 days ago
    Auto-check passed

Categories

Questions about Gpui Styling

What does Gpui Styling do?

GPUI styling system including theme design, responsive layouts, visual design patterns, and style composition. Gpui Styling is an agent skill from StudentWeis/ropy. GPUI styling system including theme design, responsive layouts, visual design patterns, and style composition.

When should I use Gpui Styling?

Gpui Styling fits situations like: user needs help with styling; visual design in GPUI.

How do I install Gpui Styling in Claude Code?

Run `npx skills add StudentWeis/ropy --skill gpui-styling -a claude-code`. Or copy the skill folder (.agents/skills/gpui-styling in StudentWeis/ropy) into .claude/skills/gpui-styling in your project. Claude Code loads it when a task matches its description.

How do I install Gpui Styling in Codex?

Run `npx skills add StudentWeis/ropy --skill gpui-styling -a codex`. Or copy the skill folder (.agents/skills/gpui-styling in StudentWeis/ropy) into .agents/skills/gpui-styling in your project. Codex loads it when a task matches its description.

Can I use Gpui Styling 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 StudentWeis/ropy --skill gpui-styling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gpui-styling, .gemini/skills/gpui-styling, .github/skills/gpui-styling and .opencode/skills/gpui-styling in your project.

What does Gpui Styling need to run?

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

Does Gpui Styling access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Gpui Styling 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 Gpui Styling use?

Gpui Styling is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Gpui Styling use?

About 3.8k tokens (SKILL.md is roughly 15k 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 Gpui Styling?

Skills that share tags, products or a category with Gpui Styling: UI Styling (Ohh-889/skyroc, 795 stars), Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 130 stars), UI Design System (try-works/role-model, 118 stars) and UI UX Pro Max Skill (Jason904/ui-skill-lab, 144 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Gpui Styling?

StudentWeis (a GitHub user) maintains it in StudentWeis/ropy, which has 194 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on September 9, 2026.

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