skills.rest
Blaze-sports-Intel
Blaze-sports-IntelOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-development

Build accessible, responsive UI components with performance verification.

1|Updated May 15, 2026
Search Tags:#storybook#core web vitals#axe-core#frontend components#performance budget#responsive ui#accessibility wcag
One-click install
npx skills add https://github.com/Blaze-sports-Intel/uber-engineer --skill frontend-development-blaze-sports-intel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/Blaze-sports-Intel/uber-engineer/tree/main/plugins/uber-engineer/skills/frontend-development
Command: npx skills add https://github.com/Blaze-sports-Intel/uber-engineer --skill frontend-development-blaze-sports-intel

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It prevents frontend work from becoming unverified guesswork by focusing on component-level correctness: accessibility, responsive behavior, and measurable performance.

Core Features & Use Cases

  • Component-tier UI implementation: build and refactor UI components that match design-system contracts (tokens, states, and predictable state architecture).
  • Accessibility (WCAG 2.2 AA) at the component surface: ensure keyboard navigation, focus order, labeling, and reduced-motion considerations.
  • Measured frontend performance: optimize for Core Web Vitals (LCP, INP, CLS) using evidence and defined budgets rather than assumptions.

Quick Start

Ask your agent: Audit and improve the accessibility and performance of the Checkout UI component, then verify with axe, tests, and a web-vitals/Lighthouse report against the defined budgets.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I verify WCAG accessibility for my React UI components?▼

You verify WCAG 2.2 AA accessibility for UI components by running axe-core audits, conducting keyboard-only walkthroughs, and checking focus order and reduced-motion considerations to ensure compliance.

How do I optimize Core Web Vitals when building frontend components?▼

To optimize Core Web Vitals during component development, you enforce a defined performance budget for LCP, INP, and CLS at the component surface, verified through web-vitals and Lighthouse reports.

Can I use Storybook to test responsive UI component layouts?▼

Yes, Storybook supports adding and validating responsive UI component layouts, paired with visual regression checks and cross-browser smoke tests to ensure predictable behavior across viewports.

What is the best way to audit a design-system component for accessibility and performance?▼

The best way to audit a design-system component is to check it against design tokens and state architecture, followed by executing axe-core tests, visual regression checks, and keyboard-only walkthroughs.

Does axe-core work with Vue or Svelte component libraries?▼

Yes, axe-core works with Vue, Svelte, and Angular component libraries to verify WCAG 2.2 AA compliance, focusing on keyboard navigation, focus order, and proper ARIA labeling at the component surface.

Why does my frontend component fail visual regression checks after a state architecture change?▼

Frontend components fail visual regression checks after state architecture changes when updates break predictable state contracts or design tokens, requiring evidence-based verification to isolate layout shifts.

Related Skills

Explore More Software Engineering Skills→
ll1llkll1llk

design-system

Manage token-based UI design and generate slides with design tokens.

Community
Advanced
jfrometajfrometa

webapp-testing

Execute Playwright-based end-to-end tests against live web routes.

Community
Advanced
juburrjuburr
1

react-storybook

Build and validate React-TypeScript components with Storybook CSF3 stories.

Community
Advanced
namninhndnamninhnd

templates

Generate pre-configured project scaffolding for Next.js, React Native, Electron, and FastAPI.

Community
Basic