developing-frontend

Implement frontend UI/UX with TypeScript, React, Vue, and Next.js.

Updated Aug 23, 2026

Search Tags:#typescript #performance #accessibility #frontend #react #vue #next.js

Ready to run

npx skills add https://github.com/sekka/dotfiles --skill developing-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: developing-frontend
Source: https://github.com/sekka/dotfiles/tree/main/home/.claude/skills/developing-frontend
Command: npx skills add https://github.com/sekka/dotfiles --skill developing-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

このスキルは、フロントエンド UI/UX の実装とパフォーマンス最適化を包括的に支援します。React/Vue/Next.js などの実装、TypeScript 型設計、パフォーマンス最適化、アクセシビリティ対応を迅速に行えるよう設計されています。

Core Features & Use Cases

フレームワーク選定と初期セットアップ: React/Next.js/Vue などの組み合わせを提案し、プロジェクトの初期構造を整えます。
TypeScript 型設計とコンポーネント設計: 安定したデータモデルと再利用性の高い UI 部品の設計をサポートします。
パフォーマンス最適化: Core Web Vitals を意識した最適化戦略と実装を案内します。
アクセシビリティ対応: WCAG 準拠の実装とテストをガイドします。

Quick Start

React + TypeScript の新規 SPA プロジェクトを開始し、初期セットアップとパフォーマンス最適化案を作成してください。

Frequently Asked Questions about developing-frontend

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

FAQPage Schema

How do I optimize React and Vue component performance for Core Web Vitals?▼

Performance optimization for React and Vue involves code-splitting, memoization, and lazy loading to improve Core Web Vitals metrics. This Skill guides implementation of these techniques alongside TypeScript typing and Tailwind styling to reduce bundle size and render time across SPA and SSR architectures.

What's the best way to structure TypeScript types for React and Next.js components?▼

Advanced TypeScript typing for React and Next.js ensures type-safe component props, state management, and data models. This Skill covers component architecture patterns, state management strategies, and typing conventions that scale across SPA, SSR, and content-driven sites.

How do I make frontend applications accessible and WCAG compliant?▼

Accessibility implementation requires semantic HTML, ARIA attributes, keyboard navigation, and comprehensive testing against WCAG standards. This Skill provides guidance on accessible component design, testing scaffolding, and integration with React, Vue, and Next.js projects.

Can I use Next.js for both SPA and server-side rendered content sites?▼

Next.js supports both SPA and SSR architectures with unified TypeScript typing and component design. This Skill covers framework selection, initial setup, and optimization strategies tailored to your project's rendering requirements and performance targets.

What frontend framework should I choose for a new project with TypeScript?▼

Framework selection depends on your project scope: React for flexible SPAs, Next.js for SSR and hybrid rendering, or Vue for lightweight applications. This Skill provides framework comparison, initial setup guidance, and component architecture patterns for each option.

How do I set up comprehensive testing for React and Vue components?▼

Testing scaffolding covers unit tests, integration tests, and accessibility testing for React and Vue components. This Skill guides test structure, frameworks, and best practices integrated with TypeScript typing and performance optimization validation.