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

frontend-design

Create and review production-grade frontend interfaces with accessibility, performance, and design guidelines.

Updated Jul 9, 2026
Search Tags:#accessibility#frontend#react#wcag#ui design#web components#ux review
One-click install
npx skills add https://github.com/ByronWilliamsCPA/plugin --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/plugin/tree/main/plugins/wff-code/skills/frontend-design
Command: npx skills add https://github.com/ByronWilliamsCPA/plugin --skill frontend-design-byronwilliamscpa

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building web interfaces that look generic, fail accessibility standards, or ship with performance regressions is a common problem when generating UI code. This Skill provides structured design thinking, a 100+ rule UX checklist, and React/Next.js performance patterns so frontend work meets WCAG AA contrast, interaction, and visual quality standards before delivery. ## Core Features & Use Cases - Guided UI Creation: Build components, pages, dashboards, and landing pages in React, Next.js, Vue, Svelte, or HTML/CSS with a required design-thinking phase covering tone, typography, color, and motion. - Multi-Mode Workflows: Run wireframe exploration, interactive prototypes, hi-fi variations, scoped reviews (accessibility, AI-slop, hierarchy-rhythm, interaction-states), accessibility audits, performance passes, and targeted file fixes. - Deterministic Contrast Verification: Compute WCAG contrast ratios with the bundled wcag-contrast.py script instead of estimating by eye, with batch mode for checking every state variant. - Reference Catalogs: Load curated CSV catalogs of 84 style families, 74 font pairings, 25 chart types, and product-type UX reasoning when choosing design directions. - Use Case: Ask for a SaaS pricing page; the Skill proposes distinct visual directions, implements the chosen one with semantic color tokens and responsive layout, then verifies every text/background contrast pair programmatically before delivery. ## Quick Start Ask the assistant to design and build a landing page for your product using the frontend-design skill, then request an accessibility review of the result.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I check WCAG color contrast for my website?▼

Run the bundled wcag-contrast.py script with foreground and background hex values to compute the exact ratio against the 4.5:1 normal-text or 3:1 large-text thresholds. Use --batch with a JSON file to check every pairing including hover, active, and focus states in one pass.

How to build a React landing page that passes accessibility audits?▼

Follow the Skill's Build mode: define design tokens first, implement with semantic HTML and visible focus states, then run the a11y mode which checks the full Priority 1 accessibility checklist plus touch targets and form feedback. Contrast ratios are computed with the script, not estimated.

Does this frontend skill work with Vue and Svelte or only React?▼

The aesthetics guidelines, UX checklist, and accessibility rules apply to HTML/CSS, Vue, and Svelte as well as React. The Part 3 performance patterns are React/Next.js specific, covering waterfalls, bundle splitting, and re-render optimization.

What React performance issues does the review mode catch?▼

The perf mode checks async waterfalls, barrel-file imports, missing code splitting, duplicate server serialization, unnecessary re-renders, and non-composited animations. Findings are reported as file:line entries with priority levels and estimated impact.

When should I use wireframe mode versus variations mode?▼

Use wireframe for low-fidelity exploration before any direction is chosen: greyscale, 3+ structurally distinct layouts. Use variations after a direction exists to produce hi-fi alternatives across axes like palette, density, or interaction model.

Related Skills

Explore More Design & Creative Skills→
529-studio529-studio
2

frontend-design-direction

Define audience-specific tone and layout constraints for web interfaces.

Official
Intermediate
rodgemd1-lgtmrodgemd1-lgtm

Forge

Automate QA and testing workflows for engineering software projects.

Community
Intermediate
rakovi4rakovi4
45

qa-run

Automate manual QA checklists by driving a browser against live production environments.

Community
Advanced
alinur527alinur527

ckm:ui-styling

Create accessible React interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced