skills.rest
syanix
syanixCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Provide frontend development patterns for UI components, pages, and forms.

Updated Mar 14, 2026
Search Tags:#development#ui#best practices#performance#accessibility#frontend#guidelines
One-click install
npx skills add https://github.com/syanix/agentic-sdlc --skill frontend-dev-guidelines-syanix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/syanix/agentic-sdlc/tree/main/templates/skills/frontend-dev-guidelines/_base
Command: npx skills add https://github.com/syanix/agentic-sdlc --skill frontend-dev-guidelines-syanix

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of best practices and conventions for frontend development, ensuring consistency, maintainability, and quality across projects.

Core Features & Use Cases

  • Component Architecture: Guidelines on structuring UI components for reusability and clarity.
  • State Management: Strategies for managing local, global, and server state effectively.
  • Data Fetching: Patterns for efficient and robust data retrieval from APIs.
  • Styling & Accessibility: Recommendations for consistent theming, responsive design, and WCAG compliance.
  • Use Case: When starting a new frontend feature, consult this Skill for guidance on how to structure components, manage state, and implement data fetching to align with established project standards.

Quick Start

Follow the frontend development guidelines for building a new UI component.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
What are the best practices for structuring frontend UI components?▼

Best practices for frontend UI components involve structuring them for maximum reusability and clarity. This ensures consistency and maintainability across projects by following established conventions for component architecture.

How do I manage state and data fetching in modern web development?▼

State and data fetching in modern web development are managed through specific strategies for local, global, and server state. Efficient data retrieval patterns from APIs ensure robust state management across your application.

How to ensure WCAG 2.1 AA compliance for web accessibility?▼

To ensure WCAG 2.1 AA compliance, apply specific styling and accessibility recommendations during development. These guidelines enforce consistent theming and responsive design to meet modern web accessibility standards.

Does this approach to frontend guidelines work for any UI scale?▼

This approach to frontend guidelines works for any UI scale by standardizing development practices across pages and forms. It provides universal patterns for component architecture and performance optimization regardless of project size.

When should I not use universal frontend development patterns?▼

You should reconsider universal frontend development patterns when a project requires highly specialized architecture outside standard UI components. These conventions target modern web development and may not fit unconventional paradigms.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
flitzrrrflitzrrr
4

component-patterns

Standardize UI design with reusable component patterns and token-based theming.

Community
Advanced
khunglong-03khunglong-03

coding-standards

Enforce universal coding conventions across frontend and backend codebases.

Community
Advanced