skills.rest
singh-gur
singh-gurCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Consolidate React, Vue.js, CSS, and component architecture guidance.

Updated Sep 16, 2025
Search Tags:#testing#performance#accessibility#frontend#react#css#vue
One-click install
npx skills add https://github.com/singh-gur/opencode --skill frontend-dev-singh-gur
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/singh-gur/opencode/tree/main/skills/frontend-dev
Command: npx skills add https://github.com/singh-gur/opencode --skill frontend-dev-singh-gur

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend engineering knowledge is often scattered; this Skill consolidates React, Vue.js, CSS, architecture, testing, performance, and accessibility guidance into a single, reusable unit.

Core Features & Use Cases

  • Framework & library guidance for React and Vue.js, including patterns, hooks, state management, SSR considerations
  • Styling, design systems, accessibility, performance optimization, and testing strategies
  • Use Case: when starting a new frontend project, apply this skill to establish component architecture, styling system, and accessibility benchmarks

Quick Start

Load this skill when starting a frontend project to align on component design, state management patterns, and performance and accessibility best practices.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
What is the best way to establish component architecture and styling systems for a new React or Vue.js project?▼

Frontend engineering guidance for React and Vue.js provides consolidated patterns for component architecture, hooks, state management, and SSR considerations to establish scalable UI foundations.

How do I structure a CSS design system and ensure accessibility benchmarks are met during UI development?▼

Structure a CSS design system and meet accessibility benchmarks by applying consolidated frontend guidance, which provides styling strategies and actionable accessibility auditing patterns for UI development.

Can I use this guidance for performance tuning and testing strategies across different frontend frameworks?▼

Yes, you can use this guidance for performance tuning and testing strategies across frontend frameworks, as it consolidates performance optimization techniques and testing patterns for React, Vue.js, and CSS.

Does this frontend engineering guidance cover state management and SSR considerations for modern web apps?▼

Yes, this frontend engineering guidance covers state management and SSR considerations, offering specific patterns and hooks for React and Vue.js to handle modern web app rendering and state.

When should I apply consolidated frontend engineering knowledge instead of searching for scattered best practices?▼

Apply consolidated frontend engineering knowledge instead of scattered best practices when starting a new project or needing immediate, actionable recommendations for styling, performance, accessibility, and testing.

Related Skills

Explore More Software Engineering Skills→
darelabs-techdarelabs-tech

dare-init

Scaffold DARE methodology project structures and configuration files.

Official
Intermediate
mgd34msumgd34msu
4

aws-amplify

Deploy full-stack web applications to AWS Amplify with CI/CD pipelines.

Community
Intermediate
rarestgrarestg
1

code-quality

Automate code quality tooling setup for Python and JavaScript/TypeScript projects.

Community
Advanced
buisihung11buisihung11

nx-generate

Generate applications and libraries using Nx generators in a monorepo.

Community
Intermediate