skills.rest
soneta
sonetaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

soneta-ui-style

Define a unified design system with CSS/SCSS tokens for Soneta/Enova365 applications.

9|6|Updated Dec 26, 2025
Search Tags:#ui#frontend#css#tokens#design-system#soneta#enova365
One-click install
npx skills add https://github.com/soneta/soneta-erp-skills --skill soneta-ui-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: soneta-ui-style
Source: https://github.com/soneta/soneta-erp-skills/tree/main/soneta-ui-style
Command: npx skills add https://github.com/soneta/soneta-erp-skills --skill soneta-ui-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design system provides a centralized, cohesive UI toolkit to align Soneta/Enova365 apps across branding, typography, color, spacing, and components, reducing design debt and speeding development.

Core Features & Use Cases

  • Color tokens, typography scales, and layout grids that enforce a cohesive enterprise UI.
  • UI components definitions for buttons, forms, tables, sidebars, headers, and tiles, with responsive considerations.
  • Asset references and guidelines for icons, SVGs, and design patterns to accelerate UI implementation.

Quick Start

Create a dashboard page following the Soneta UI design guidelines, applying emerald branding, typography, and component tokens.

Frequently Asked Questions about soneta-ui-style

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

FAQPage Schema
How do I standardize UI components across Soneta and Enova365 enterprise applications?▼

To standardize UI components across Soneta and Enova365, use a unified design system that codifies color tokens, typography scales, and component definitions in CSS/SCSS for consistent dashboards, forms, and admin panels.

What are design tokens and how do they enforce consistent enterprise UI styling?▼

Design tokens are centralized variables for color, typography, and spacing that enforce a cohesive enterprise UI. They codify styling decisions in CSS/SCSS to reduce design debt and ensure scalable UI development across applications.

Can I use CSS and SCSS to build responsive dashboards and admin panels for Enova365?▼

Yes, you can build responsive dashboards and admin panels for Enova365 using the system's CSS and SCSS component definitions. It includes layout grids and responsive considerations for sidebars, headers, and tiles.

How do I create a dashboard page that follows Soneta branding and typography guidelines?▼

Create a dashboard page by applying the system's emerald branding tokens, typography scales, and layout grids. Use the provided component definitions for headers, sidebars, and tiles to ensure UI consistency.

What's the best way to manage icons and SVG assets for a scalable design system?▼

The best way to manage icons and SVGs for a scalable design system is using centralized asset references and guidelines. This accelerates UI implementation by standardizing design patterns across enterprise applications.

Why does enterprise UI development accumulate design debt and how can tokens reduce it?▼

Enterprise UI development accumulates design debt when applications lack centralized styling standards. Implementing unified color and typography tokens reduces this debt by aligning branding and spacing across all components.

Related Skills

Explore More Design & Creative Skills→
vneseyoungstervneseyoungster
27

figma-analyzer

Extract design assets, metadata, and tokens from Figma files.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
MolcajeteAIMolcajeteAI
2

responsive-design

Implement mobile-first responsive layouts in React with Tailwind CSS.

Official
Intermediate
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced