skills.rest
popo0407
popo0407COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Enforce React/TypeScript frontend conventions with WCAG 2.2 Level AA accessibility.

Updated Feb 12, 2026
Search Tags:#typescript#accessibility#frontend#react#design system#wcag
One-click install
npx skills add https://github.com/popo0407/AIHelper --skill frontend-dev-popo0407
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/popo0407/AIHelper/tree/main/.github/skills/frontend
Command: npx skills add https://github.com/popo0407/AIHelper --skill frontend-dev-popo0407

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to frontend development best practices, ensuring maintainable, accessible, and high-quality code for React/TypeScript projects.

Core Features & Use Cases

  • Coding Standards: Enforces component design, state management, and logic separation.
  • Accessibility: Guides adherence to WCAG 2.2 Level AA standards.
  • Design System Compliance: Aligns development with Serendie Design System principles for a cohesive user experience.
  • Use Case: A new developer joins the team and needs to understand the established guidelines for building UI components, ensuring consistency and accessibility from the start.

Quick Start

Follow the frontend development coding conventions for building new UI components.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
What are the best practices for React and TypeScript component design?▼

React and TypeScript component design best practices involve strict logic separation, structured state management, and consistent caching strategies to ensure maintainable UI components. This approach enforces coding standards that keep frontend architecture clean and scalable.

How do I make my frontend application meet WCAG 2.2 Level AA accessibility standards?▼

To meet WCAG 2.2 Level AA accessibility standards, follow a comprehensive accessibility checklist that guides component interaction and visual design. This ensures your React application provides an inclusive user experience for all assistive technologies.

How do I integrate Serendie Design System principles into my development workflow?▼

Integrate Serendie Design System principles by aligning your component development with its established visual and interaction rules. This ensures UI consistency and design quality compliance across your entire React project workflow.

Does this frontend development convention guide support Hot Module Replacement?▼

Yes, the frontend development conventions outline specific development workflows including Hot Module Replacement (HMR). This allows you to maintain fast feedback loops and efficient state management during local UI component development.

Related Skills

Explore More Software Engineering Skills→
s4kr4s4kr4
1

ts-formatter

Configure Prettier and ESLint for TypeScript and JavaScript projects.

Community
Intermediate
Jorge-IvanJorge-Ivan
1

validating-accessibility

Validates web accessibility against WCAG 2.2 Level AA requirements.

Community
Advanced
yogvidwankhedeyogvidwankhede
1

component-architecture

Guide React component library architecture with design patterns and API optimization.

Community
Advanced
wjyugutouwjyugutou

web-design-guidelines

Automate UI code review against Web Interface Guidelines for accessibility and consistency.

Community
Intermediate