skills.rest
luisitoys12
luisitoys12COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Apply CSS tokens and WCAG accessibility rules to standardize UI/UX design.

Updated Mar 26, 2026
Search Tags:#typography#ui#accessibility#layout#tokens#ux#design-system
One-click install
npx skills add https://github.com/luisitoys12/luxcode-ai --skill frontend-design-luisitoys12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/luisitoys12/luxcode-ai/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/luisitoys12/luxcode-ai --skill frontend-design-luisitoys12

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a standardized UI/UX design system for LuxCode AI generated projects, ensuring consistency, accessibility, and faster iteration across interfaces.

Core Features & Use Cases

  • Establishes a base design system with CSS tokens for color, typography, spacing, and components.
  • Defines typography, color, layout, and accessibility guidelines to audit and improve interfaces.
  • Use cases: refining UI for a generated app, applying LuxCode's design system to ensure brand alignment and WCAG accessibility.

Quick Start

Provide a UI design brief or wireframe and apply the LuxCode base design system to the current project.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I standardize UI design and ensure accessibility for generated web and mobile projects?▼

To standardize UI design and ensure accessibility, you apply a base design system using CSS tokens for color, typography, and spacing to enforce WCAG compliance across web, mobile, and desktop interfaces.

What are CSS design tokens and how do they improve visual consistency?▼

CSS design tokens are standardized variables for color, typography, and spacing that improve visual consistency by enforcing predictable component rules and a unified visual language across all generated project interfaces.

How do I apply a design system to a wireframe or UI brief?▼

To apply a design system to a wireframe, provide your UI design brief and the system will audit and refine the interface by mapping elements to established typography, layout, and accessibility guidelines.

Can I use this UI design system for both desktop and mobile interfaces?▼

Yes, you can use this UI design system for desktop and mobile interfaces because it applies standardized component rules and CSS tokens across a wide range of project types to maintain predictable visual language.

How do I check if my interface meets WCAG accessibility guidelines?▼

To check if your interface meets WCAG accessibility guidelines, the system audits your layout and components against defined accessibility rules, ensuring proper color contrast and predictable visual language.

What is the best way to enforce typography and layout rules in a generated app?▼

The best way to enforce typography and layout rules in a generated app is by applying standardized CSS tokens that define component constraints, ensuring brand alignment and strict visual consistency.

Related Skills

Explore More Design & Creative Skills→
tyronerosstyroneross
1

ui-brainstorm-preamble

Capture UI design context and constraints into a preamble.json configuration file.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
ChildoftheVibeChildoftheVibe

minimalist-ui

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

Community
Advanced
ldzhhxxldzhhxx
1

design-md

Validate and convert DESIGN.md design specifications with WCAG contrast support.

Community
Intermediate