skills.rest
ByronWilliamsCPA
ByronWilliamsCPAOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces across React, Next.js, Vue, Svelte, and HTML/CSS.

Updated Nov 24, 2025
Search Tags:#accessibility#design systems#ui development#web components#frontend design#ux optimization#react performance
One-click install
npx skills add https://github.com/ByronWilliamsCPA/.claude --skill frontend-design-byronwilliamscpa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ByronWilliamsCPA/.claude/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/ByronWilliamsCPA/.claude --skill frontend-design-byronwilliamscpa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the pervasive issue of generic, low-quality AI-generated frontend code that lacks distinctive design, accessibility, and performance, eliminating the need for manual refinement of subpar UI code into production-ready interfaces.

Core Features & Use Cases

  • End-to-End Frontend Development: Create production-grade web components, pages, dashboards, landing pages, and full applications across React, Next.js, Vue, Svelte, and HTML/CSS with intentional, cohesive design direction.
  • Built-in Quality Checks: Run accessibility audits (WCAG AA compliance), UX reviews, React/Next.js performance optimization passes, and targeted UI fixes for existing codebases.
  • Curated Design References: Access pre-vetted reference catalogs for style families, font pairings, chart types, and UX patterns to avoid generic "AI slop" aesthetics and ensure consistent, memorable user experiences.
  • Real-World Use Case: A developer building a customer-facing SaaS dashboard can use this Skill to define a luxury/refined aesthetic, implement accessible data visualizations with proper contrast, optimize React rendering to reduce waterfalls, and verify all touch targets meet mobile size requirements.

Quick Start

Use the frontend-design skill to build a responsive, accessible landing page for a sustainable skincare brand with an organic/natural aesthetic and optimized Core Web Vitals.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-ready React components that avoid generic AI design aesthetics?▼

Building production-ready React components with distinctive design requires applying curated style families and font pairings instead of generic defaults. This Skill enforces cohesive design systems, WCAG AA accessibility compliance, and cross-viewport UX best practices across all generated web component code.

What's the best way to ensure WCAG AA accessibility compliance in frontend UI development?▼

Ensuring WCAG AA accessibility compliance involves running targeted accessibility audits on your frontend code. This process verifies proper contrast ratios in data visualizations, validates touch target sizes for mobile viewports, and enforces cross-viewport UX best practices across your web components.

Can I optimize Next.js performance and Core Web Vitals when building landing pages?▼

You can optimize Next.js performance and Core Web Vitals by running React performance optimization passes that reduce rendering waterfalls. This Skill applies cross-viewport UX best practices and performance optimization directly to landing page and dashboard development across React and Next.js environments.

Does this frontend design approach work with Vue and Svelte or just React?▼

This frontend design approach works with Vue, Svelte, and HTML/CSS in addition to React and Next.js. It applies cohesive design system implementation, WCAG AA accessibility compliance, and cross-viewport UX optimization across web component builds, dashboards, and full application development in all supported frameworks.

Why does my AI-generated dashboard UI look generic and lack cohesive design?▼

AI-generated dashboard UI looks generic due to the absence of intentional design direction and cohesive design system implementation. Applying pre-vetted reference catalogs for style families, chart types, and UX patterns replaces generic slop aesthetics with distinctive, memorable user experiences across your frontend.

How do I fix accessibility and touch target issues in existing web components?▼

Fixing accessibility and touch target issues in existing web components requires running targeted UX reviews and accessibility audits. This process verifies WCAG AA compliance, validates proper contrast in data visualizations, and confirms all touch targets meet mobile size requirements to resolve cross-viewport limitations.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
augustoheissaugustoheiss

agency-frontend-developer

Implement accessible React, Vue, Angular, or Svelte frontend applications with TypeScript and WCAG 2.1 AA compliance.

Community
Advanced
OpenCovenOpenCoven
20

dataviz-dashboard-ux

Guide chart type selection and dashboard design for accessible React visualizations.

Official
Advanced
DeliciousHouseDeliciousHouse
2

frontend-design

Design and implement React components, web layouts, dashboards, and landing pages.

Community
Advanced