skills.rest
kjaylee
kjayleeCOMMUNITY
Explore all skills by this author →
Website𝕏@kjayleeGitHub

web-design-pro

Engineer modern web interfaces with design systems and accessibility standards.

1|Updated Jan 31, 2026
Search Tags:#performance#accessibility#UI/UX#design systems#web design#game UI
One-click install
npx skills add https://github.com/kjaylee/misskim-skills --skill web-design-pro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-pro
Source: https://github.com/kjaylee/misskim-skills/tree/main/skills/web-design-pro
Command: npx skills add https://github.com/kjaylee/misskim-skills --skill web-design-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating high-quality, performant, and accessible web interfaces by integrating advanced design methodologies, system thinking, and modern front-end engineering practices.

Core Features & Use Cases

  • Design Systems & Tokens: Implement robust design systems using CSS custom properties and tools like Tokens Studio for consistency.
  • Advanced UI/UX Methodologies: Apply frameworks like Jobs to be Done (JTBD) and Design Sprints for user-centric problem-solving.
  • Responsive & Accessible Design: Utilize fluid typography, container queries, and WCAG 2.1 standards to ensure usability across all devices and for all users.
  • Performance Optimization: Focus on Core Web Vitals (LCP, INP, CLS) with techniques like image optimization and script deferral.
  • Game UI/UX: Incorporate game-specific patterns for enhanced player immersion and feedback.

Quick Start

Apply fluid typography using clamp() to all page fonts and convert all game assets to WebP format.

Frequently Asked Questions about web-design-pro

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

FAQPage Schema
How do I build a web interface that meets WCAG 2.1 accessibility standards?▼

To build accessible web interfaces meeting WCAG 2.1 standards, apply container queries, fluid typography with clamp(), and user-centric UI/UX methodologies like JTBD to ensure usability across all devices.

What's the best way to optimize Core Web Vitals like LCP and INP for web design?▼

Optimize Core Web Vitals like LCP, INP, and CLS for web design by deferring scripts, converting assets to WebP format, and applying performance optimization techniques to create performant web experiences.

How do I create a consistent design system using CSS custom properties?▼

Create a consistent design system using CSS custom properties and tools like Tokens Studio to manage design tokens, ensuring commercial-grade consistency across modern web interfaces.

Can I apply modern UI/UX methodologies like JTBD to game interface design?▼

Yes, you can apply modern UI/UX methodologies like Jobs to be Done to game interface design, incorporating game-specific UI patterns and Design Sprints to enhance player immersion and feedback.

How do I implement responsive design with fluid typography and container queries?▼

Implement responsive design with fluid typography using the clamp() function for all page fonts, and utilize container queries to ensure adaptable layouts across all devices.

Why does my web interface layout shift, and how do I fix CLS issues?▼

Layout shifts and CLS issues in web interfaces often stem from unoptimized images or late-loading scripts; fix them by converting game assets to WebP and deferring script execution.

Related Skills

Explore More Design & Creative Skills→
bacocobacoco
67

bmad-ux

Translate PRD requirements into user flows, wireframes, and design systems.

Community
Intermediate
jaypatrickjaypatrick

web-perf

Measure Core Web Vitals and identify page load bottlenecks.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
bomberoxenviosdosruedasbomberoxenviosdosruedas

agency-cms-developer

Develop custom themes, plugins, and modules for Drupal and WordPress CMS platforms.

Community
Advanced