skills.rest
kernex-dev
kernex-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-developer

Build accessible frontend components with TypeScript and WCAG 2.1 AA compliance.

1|Updated Mar 6, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#lighthouse#tailwind
One-click install
npx skills add https://github.com/kernex-dev/kernex-agent --skill frontend-developer-kernex-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/kernex-dev/kernex-agent/tree/main/builtins/frontend-developer
Command: npx skills add https://github.com/kernex-dev/kernex-agent --skill frontend-developer-kernex-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the repetitive, error-prone work of implementing accessible, performant, and well-typed frontend components across modern JavaScript frameworks so teams can ship reliable UI faster.

Core Features & Use Cases

  • Framework coverage: Practical guidance and implementation patterns for React (including Next.js and RSC), Vue 3, Angular, and Svelte/SvelteKit.
  • Accessibility & UX: Enforces WCAG 2.1 AA recommendations, semantic HTML, ARIA patterns, and keyboard navigation for interactive components.
  • Performance & tooling: Advises Core Web Vitals targets, bundle analysis, code-splitting, lazy loading, and image optimization; integrates Lighthouse and source-map analysis.
  • Developer ergonomics: TypeScript-first patterns, component-first architecture, naming and testing conventions (Vitest, React Testing Library, Storybook).
  • Use case example: Convert a visual design into a responsive, accessible, and test-covered React component that meets Lighthouse performance thresholds and stays within bundle budgets.

Quick Start

Create a responsive, accessible React TypeScript button component styled with Tailwind CSS, include explicit props types and a unit test for keyboard interactions.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I build React components that meet WCAG 2.1 AA accessibility standards?▼

To build accessible React components, apply semantic HTML, ARIA patterns, and keyboard navigation to meet WCAG 2.1 AA standards. This approach ensures interactive elements are usable with screen readers and keyboard controls.

What's the best way to optimize Core Web Vitals and analyze my frontend bundle size?▼

Optimize Core Web Vitals by applying code-splitting, lazy loading, and image optimization, then analyze your frontend bundle using Lighthouse and source-map analysis to stay within performance budgets.

Can I use this approach to build TypeScript components for Vue, Angular, and Svelte?▼

Yes, you can build TypeScript components for Vue, Angular, and Svelte. The approach provides practical implementation patterns and strict typing conventions across all these modern frameworks.

How do I convert a visual design into a test-covered React component?▼

Convert a visual design into a test-covered React component by implementing the UI with Tailwind CSS, adding explicit TypeScript prop types, and writing unit tests for keyboard interactions using Vitest and React Testing Library.

Does this method enforce strict TypeScript typing for frontend component architecture?▼

Yes, this method enforces strict TypeScript typing for frontend component architecture. It applies TypeScript-first patterns to ensure robust type safety across your component implementation and props.

When should I not use code-splitting and lazy loading for frontend performance?▼

Avoid code-splitting and lazy loading when the component is critical for above-the-fold content, as the loading delay can negatively impact your LCP Core Web Vitals score and user experience.

Related Skills

Explore More Software Engineering Skills→
liamtran96liamtran96

tailwindcss

Apply utility classes to style web interfaces across React, Vue, Svelte, and HTML.

Community
Intermediate
botPhUbotPhU

nextjs-expert

Diagnose and fix Next.js App Router routing, hydration, and performance issues.

Community
Advanced
aroidoaroido

React Testing with Vitest and RTL

Create unit and integration tests for React components with Vitest and React Testing Library.

Official
Intermediate
RepairYourTechRepairYourTech
6

vanilla-javascript

Provide ES2022+ JavaScript patterns for framework-free web development.

Community
Advanced