stella-design

Align Stella desktop and create-stella-app UIs with design standards.

29|4|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/ruuxi/stella --skill stella-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stella-design
Source: https://github.com/ruuxi/stella/tree/main/runtime/home-seed/skills/stella-design
Command: npx skills add https://github.com/ruuxi/stella --skill stella-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Stella desktop surfaces and user-created Stella apps often suffer from inconsistent frontend design, broken accessibility, visual drift from the established Stella design system, and poor responsive behavior that creates a fragmented user experience across different viewports and use contexts.

Core Features & Use Cases

  • Comprehensive frontend guidance: Covers all Stella frontend surfaces including desktop chrome, settings, sidebars, onboarding flows, Store pages, and user-built apps created with the create-stella-app scaffold.
  • Specialized reference materials: Includes targeted guides for visual principles, typography and layout, interaction states, responsive motion, product UI patterns, brand/showcase surfaces, and pre-launch quality audits.
  • Use case: When building a new feature for the Stella desktop app or a user-created portfolio app, this skill ensures the UI matches Stella's design system, is accessible, responsive, and polished before release.

Quick Start

Use the stella-design skill to refine the frontend UI of the new Stella desktop settings page to align with product design standards.

Frequently Asked Questions about stella-design

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

FAQPage Schema
How do I fix inconsistent frontend UI in Stella desktop apps?

To fix inconsistent frontend UI in Stella desktop apps, apply established product design standards covering visual principles, interaction states, and responsive behavior. This ensures interfaces remain accessible and visually aligned across all surfaces.

What's the best way to make a Stella app responsive and accessible?

The best way to make a Stella app responsive and accessible is to follow reference guides for responsive motion and interaction states, then run a pre-launch quality audit checklist to verify polished behavior across all viewports.

Does Stella design system guidance cover user-created apps built with create-stella-app?

Yes, Stella design system guidance covers user-created apps built with the create-stella-app scaffold. It provides targeted reference materials to ensure these custom apps match established product UI patterns and visual principles.

How do I audit my Stella settings page UI before release?

To audit a Stella settings page UI before release, use a pre-launch quality audit checklist that verifies visual consistency, accessibility compliance, and responsive behavior against the established Stella design system standards.

What are the Stella product UI standards for sidebars and onboarding flows?

Stella product UI standards for sidebars and onboarding flows include specific visual principles, typography, layout rules, and interaction states. These references ensure all desktop chrome surfaces maintain consistent design quality.