skills.rest
ebarroso12
ebarroso12COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design accessible frontend interfaces with cohesive design tokens and motion.

Updated Aug 23, 2026
Search Tags:#accessibility#frontend#react#design tokens#semantic html#ui design#motion design
One-click install
npx skills add https://github.com/ebarroso12/personal-skills --skill frontend-design-ebarroso12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ebarroso12/personal-skills/tree/main/frontend-design
Command: npx skills add https://github.com/ebarroso12/personal-skills --skill frontend-design-ebarroso12

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It prevents generic, “AI-looking” web UIs by guiding you to create distinctive frontend designs with purposeful layout, motion, and accessibility from the start.

Core Features & Use Cases

  • Aesthetic Direction Selection: Choose one committed visual style (e.g., brutalist raw, editorial, neon, soft craft, industrial) using a curated playbook, then apply it consistently.
  • Design System & Token Planning: Define CSS variables (palette, radii, shadows, spacing, motion curve) and font pairings to maintain coherence across components.
  • Semantic, Accessible UI Construction: Build with semantic structure, logical heading order, focus states, labeled inputs, and reduced-motion support.
  • Implementation Workflow for Vanilla/React: Translate the plan into semantic HTML/CSS/JS or React component structures with data-driven rendering.
  • Polish & QA Checklist: Validate responsive behavior, performance constraints, and interaction details (hover vs focus/active) before delivery.

Quick Start

Use the frontend-design skill to create a production-ready landing page concept with a single signature visual gesture, cohesive tokens, semantic HTML/React structure, guarded motion, and an accessibility-focused QA pass for responsive breakpoints.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-ready React frontend with accessible semantic HTML?▼

Build a production-ready React frontend by selecting a committed aesthetic style, defining CSS design tokens for theme variables, and structuring semantic HTML components with logical heading order and labeled inputs. Validate responsive behavior and WCAG interaction patterns before delivery.

What is the best way to prevent generic AI-looking web UI designs?▼

Preventing generic AI-looking web UI designs requires choosing a committed visual style like brutalist raw, editorial, or neon, then applying it consistently through design tokens, purposeful layout, and meaningful motion with prefers-reduced-motion guards to maintain a cohesive aesthetic across components.

How do I set up design tokens and CSS variables for a cohesive UI component system?▼

Set up design tokens by defining CSS variables for palette, radii, shadows, spacing, and motion curves alongside font pairings. This establishes a coherent design system that maintains visual consistency across all frontend components and ensures a unified aesthetic throughout the application.

Can I use this approach for both vanilla HTML/CSS/JS and React component structures?▼

Yes, the workflow supports both vanilla HTML/CSS/JS and React component structures. It translates aesthetic direction and design token plans into semantic markup with data-driven rendering, ensuring accessible, production-ready interfaces whether you use plain web technologies or React.

How do I add motion design while respecting accessibility and reduced-motion preferences?▼

Add motion design by orchestrating meaningful animations that enhance the interface aesthetic, then implement prefers-reduced-motion guards to disable or modify animations for users who request reduced motion. This ensures WCAG accessibility compliance while maintaining purposeful visual feedback.

What QA checklist should I use to validate responsive frontend design before delivery?▼

Validate responsive frontend design by checking behavior across breakpoints, verifying performance constraints, testing interaction details like hover versus focus and active states, and confirming WCAG-compatible accessibility patterns. This QA polish pass ensures production-ready delivery without interaction defects.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
hpsgdhpsgd

accessibility-audit

Audit web UI codebases for WCAG 2.1 AA compliance and generate remediation reports.

Official
Advanced
princejoogieprincejoogie
30

web-animation-design

Designes and implements web animations and motion systems for UI interfaces.

Community
Advanced
HouseGarofaloHouseGarofalo
3

radix-ui

Provide unstyled, accessible React component primitives for custom UI.

Official
Intermediate