skills.rest
medispis
medispisCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Builds UI components, pages, and frontend architecture for React, Vue, Svelte, and Angular.

Updated Jun 2, 2026
Search Tags:#ui#accessibility#state management#frontend#react#components#vue
One-click install
npx skills add https://github.com/medispis/opencode-config --skill frontend-medispis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/medispis/opencode-config/tree/main/skills/frontend
Command: npx skills add https://github.com/medispis/opencode-config --skill frontend-medispis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, accessible, and performant frontend components requires juggling framework conventions, state management choices, styling approaches, and accessibility rules. This Skill provides structured guidance so generated UI code follows your project's existing patterns instead of generic boilerplate. ## Core Features & Use Cases - Framework-aware component generation: Detects React, Vue, Svelte, or Angular and applies idiomatic patterns such as hooks, composables, or stores. - State management guidance: Maps complexity levels to appropriate solutions, from local component state to Redux, Zustand, Pinia, or React Query. - Accessibility and performance by default: Enforces semantic HTML, ARIA labels, keyboard navigation, lazy loading, code splitting, and memoization. - Use Case: Ask for a new dashboard page in a React + Tailwind project and receive a typed component with loading and error states, tests, and styling that matches your conventions. ## Quick Start Create a responsive user profile card component in React with TypeScript, loading and error states, and Tailwind styling.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I create a React component with proper state management?▼

Start with local state via useState for simple cases, move to Context with useReducer for medium complexity, and adopt Redux or Zustand for complex shared state. Use React Query or SWR for server-side data fetching and caching.

What state management library should I use for Vue or React?▼

For Vue, use composables for shared logic and Pinia for medium-to-complex state. For React, use Context plus useReducer for medium complexity and Redux, Zustand, or NgRx-style stores for complex application state.

Does this approach support Tailwind and CSS Modules styling?▼

Yes, the workflow detects the project's existing styling approach and follows it. Supported approaches include CSS Modules, Tailwind, Styled Components, Sass/SCSS, and vanilla CSS without introducing new UI libraries.

How do I make frontend components accessible by default?▼

Use semantic HTML elements, add ARIA labels where needed, ensure keyboard navigation and focus management, meet WCAG AA color contrast, and provide alt text for images. These practices are applied to every generated component.

Why is my frontend bundle too large and how do I fix it?▼

Large bundles usually come from missing code splitting and unoptimized assets. Lazy load routes and heavy components, split code by route, optimize images with WebP and srcset, and use virtual lists for large datasets.

Related Skills

Explore More Software Engineering Skills→
igoyetcheigoyetche

typescript-backend-project-setup

Set up an NX monorepo for TypeScript backend projects with strict standards.

Community
Advanced
akornmeierakornmeier
4

docker

Automate Docker containerization and deployment workflows across multi-container setups and CI/CD pipelines.

Community
Advanced
helderbertohelderberto
12

deps-audit

Audit npm dependencies for vulnerabilities and outdated packages.

Community
Intermediate
trudyan141trudyan141
3

auth-expert

Implements JWT authentication, password hashing, and role-based access control for web applications.

Community
Intermediate