skills.rest
ACHVMR
ACHVMROFFICIAL
Explore all skills by this author →
GitHub

oracle-design

Codify reusable design tokens and CSS variables for SmelterOS frontend UI.

1|Updated Jan 1, 2026
Search Tags:#typography#branding#frontend#ui-design#design-system#css-tokens#component-guidelines
One-click install
npx skills add https://github.com/ACHVMR/SmelterOS --skill oracle-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: oracle-design
Source: https://github.com/ACHVMR/SmelterOS/tree/main/.agent/skills/oracle-design
Command: npx skills add https://github.com/ACHVMR/SmelterOS --skill oracle-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design system standardizes frontend UI across SmelterOS by codifying a reusable design language, reducing visual drift and accelerating development.

Core Features & Use Cases

  • Reusable tokens and CSS variables for color, typography, and spacing.
  • Guidelines for components, buttons, typography, and brand assets.
  • Use Case: Rapidly prototype dashboards and pages while maintaining visual consistency across modules.

Quick Start

Review the design tokens and component guidelines in this skill to apply the SmelterOS design language to a new frontend page.

Frequently Asked Questions about oracle-design

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

FAQPage Schema
What is a design system for frontend UI development?▼

A scalable design system for frontend UI standardizes visual elements across tools. It codifies reusable color tokens, typography rules, and component guidelines, reducing visual drift and accelerating development across multiple dashboards.

How do I standardize typography and color tokens across multiple dashboards?▼

You standardize typography and color tokens across dashboards by applying reusable CSS variable templates and component guidelines. This codifies a shared design language, ensuring visual consistency and reducing drift across different frontend modules and pages.

Can I use these CSS variable templates for rapid frontend prototyping?▼

Yes, you can use these CSS variable templates for rapid frontend prototyping. They provide predefined color tokens, typography rules, and spacing variables that allow you to quickly build new pages and dashboards while maintaining strict visual consistency.

What's the best way to prevent visual drift when building new UI components?▼

The best way to prevent visual drift when building UI components is to enforce a codified design system. By adhering to standardized component guidelines and reusable design tokens, developers ensure all styling decisions match the established branding and design language.

Does this design system include branding assets for frontend tools?▼

Yes, this design system includes optional branding assets for frontend tools. Alongside core styling rules, it provides brand assets and component guidelines to unify the visual identity across various dashboards and user interfaces.

Related Skills

Explore More Design & Creative Skills→
windyroadwindyroad
4

wr-style-guide:update-guide

Inspect project CSS architecture, design tokens, and component patterns to generate STYLE-GUIDE.md.

Official
Intermediate
BEIRUXBEIRUX

frontend-design

Generate production-ready HTML/CSS/JS or React components from user requirements.

Official
Advanced
dirnbauerdirnbauer
33

frontend-design

Design frontend interfaces with typography, color palettes, motion, and CSS/HTML examples.

Community
Basic
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate