skills.rest
sebnow
sebnowCOMMUNITY
Explore all skills by this author →
Website𝕏@sebnowGitHub

ui-design

Enforce token-based UI design systems with foundation, semantic, and component tokens.

8|Updated Dec 16, 2008
Search Tags:#design#ui#accessibility#design-system#design-tokens#component-library
One-click install
npx skills add https://github.com/sebnow/configs --skill ui-design-sebnow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/sebnow/configs/tree/main/home-manager/agentic/skills/ui-design
Command: npx skills add https://github.com/sebnow/configs --skill ui-design-sebnow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent visual design and ad-hoc UI implementations undermine brand cohesion and product quality; this Skill provides a structured approach to enforce intentional aesthetics, token-driven systems, and production-grade implementations.

Core Features & Use Cases

  • Enforces an intentional design direction and systematic token usage to prevent generic patterns.
  • Establishes a formal token system (foundation, semantic, and component tokens) for cohesive styling.
  • Supports building and maintaining design systems, component libraries, and scalable front-end styling across projects.

Quick Start

Define your aesthetic direction and token system before starting any UI implementation.

Frequently Asked Questions about ui-design

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

FAQPage Schema
What's the best way to structure design tokens for a frontend design system?▼

The best way to structure design tokens for a frontend design system is to categorize them into foundation, semantic, and component tokens. This formal hierarchy ensures cohesive styling, clear aesthetic direction, and scalable component library maintenance.

How do I structure design tokens for a frontend component library?▼

Structure design tokens by categorizing them into foundation, semantic, and component tokens. This formal hierarchy ensures cohesive styling, clear aesthetic direction, and scalable component library maintenance across web applications.

Why does my frontend UI design look inconsistent across different components?▼

Frontend UI design looks inconsistent when ad-hoc implementations undermine brand cohesion. Establishing an intentional design direction and a formal token system prevents generic patterns and enforces production-grade aesthetics systematically.

Do I need to document component states for production-grade UI design?▼

Documenting component states is necessary for production-grade UI design because it ensures components handle all interactions systematically. It integrates accessibility and performance considerations, preventing inconsistent visual design and ad-hoc implementations across your design system.

Can I use this approach to maintain a design system across multiple web applications?▼

Yes, you can use this token-driven approach to maintain a design system across multiple web applications. It establishes a formal token system and documented component states to support scalable front-end styling and brand cohesion across projects.

Related Skills

Explore More Design & Creative Skills→
EverettFieldEverettField
2

ui-design

Define frontend design specifications with color palettes, typography, and layout strategies.

Community
Advanced
o9nno9nn

design-guide

Provide design principles, component standards, and composition patterns for Paperclip's frontend UI.

Official
Advanced
NolanPicNolanPic

Frontend Accessibility

Enforce WCAG compliance in frontend UI code with semantic HTML and ARIA.

Community
Basic
MinhAnh-CorpMinhAnh-Corp

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and style guides for web and mobile interfaces.

Official
Intermediate