skills.rest
nexus-substrate
nexus-substrateOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-design

Generate accessible UI/UX design systems and frontend code for Astro and Svelte stacks.

18|1|Updated Jan 3, 2026
Search Tags:#accessibility#design systems#ui design#tailwind#astro#oklch#ux patterns
One-click install
npx skills add https://github.com/nexus-substrate/nexus-agents --skill ui-ux-design-nexus-substrate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/nexus-substrate/nexus-agents/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/nexus-substrate/nexus-agents --skill ui-ux-design-nexus-substrate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns ambiguous UI/UX requests into consistent, accessible frontend design systems and implementation-ready components without relying on unsafe or “AI-sloppy” styling.

Core Features & Use Cases

  • Accessible design system generation: Produces OKLCH-based color tokens and typography/layout guidance aligned to WCAG 2.1 AA, APCA advisories, touch target requirements, reduced-motion support, semantic structure, and zero-JS defaults.
  • Style-safe creative production: In Creative mode, enforces a caller-chosen tone catalog, blocks common low-quality aesthetic patterns (e.g., gradient-on-white purple, default centered max-w card grids, banned display fonts), and ensures an “aesthetic direction” is committed before code.
  • Frontend code implementation for Astro + Svelte + Tailwind: Generates component structure and styling guidance for Astro layouts and Svelte islands, with OKLCH-only color usage and optional Material Design 3 when explicitly requested.

Quick Start

Generate a UI/UX design system and frontend implementation for a “product dashboard design” request using Astro + Svelte + Tailwind, ensuring OKLCH-only colors, WCAG 2.1 AA contrast, prefers-reduced-motion support, and a single-column mobile-first layout with defined typography and spacing.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I generate an accessible UI design system with OKLCH color tokens?▼

To generate an accessible UI design system with OKLCH color tokens, provide a product design prompt to receive WCAG 2.1 AA-compliant color palettes, typography, and layout guidance. The output enforces OKLCH-only colors, 4.5:1 text contrast, and touch target rules for frontend implementation.

Can I build Astro and Svelte components using WCAG 2.1 AA contrast requirements?▼

Yes, you can build Astro and Svelte components meeting WCAG 2.1 AA contrast requirements by processing frontend design prompts. The system outputs component structures and styling guidance for Astro layouts and Svelte islands with enforced 4.5:1 text contrast and zero-JS default behavior.

What's the best way to create accessible frontend code without AI-sloppy styling?▼

The best way to create accessible frontend code without AI-sloppy styling is to use a style-safe creative production mode. This blocks low-quality aesthetic patterns like gradient-on-white purple and default centered card grids, ensuring a committed aesthetic direction before generating implementation-ready code.

Does the generated UI design system support Material Design 3 and Tailwind?▼

Yes, the generated UI design system supports Material Design 3 and Tailwind when explicitly requested. It provides OKLCH-only color usage for Tailwind styling and optional M3 compliance for component design, handling explicit constraints while maintaining accessibility standards.

How do I audit UX patterns for reduced-motion and semantic structure support?▼

To audit UX patterns for reduced-motion and semantic structure support, input your component design or dashboard request. The system evaluates accessibility, enforcing prefers-reduced-motion support, semantic HTML structure, and WCAG 2.1 AA non-text contrast ratios of 3:1.

Why does my generated color palette only output OKLCH values?▼

Your generated color palette only outputs OKLCH values to enforce perceptual color consistency and accessibility compliance. This strict OKLCH-only output guarantees accurate WCAG 2.1 AA contrast ratios across UI components while preventing unsafe or inconsistent color rendering.

Related Skills

Explore More Design & Creative Skills→
SunS1eep1ngSunS1eep1ng

ui-ux-pro-max

Generate UI/UX design systems with role-specific guidance and stack-aware frontend implementation.

Community
Advanced
catalinakarstulovic2-aicatalinakarstulovic2-ai

frontend-design

Design and implement production-grade frontend interfaces with design tokens and responsive layouts.

Community
Advanced
Olu-AnuAkin-AkinyemiOlu-AnuAkin-Akinyemi
1

astro-tailwind-cloudflare-stack

Build Astro web apps with Tailwind and Cloudflare edge deployment.

Community
Advanced
Higashi-KotaHigashi-Kota

a11y

Audits UI components for WCAG 2.2 AA and ARIA compliance.

Community
Intermediate