skills.rest
JCETools-Petra
JCETools-PetraCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Builds accessible, responsive frontend interfaces with component architecture and quality gates.

16|Updated Apr 30, 2026
Search Tags:#accessibility#frontend#responsive design#i18n#web performance#component architecture
One-click install
npx skills add https://github.com/JCETools-Petra/JCE-Opencode-Tools --skill frontend-jcetools-petra
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/JCETools-Petra/JCE-Opencode-Tools/tree/main/config/skills/frontend
Command: npx skills add https://github.com/JCETools-Petra/JCE-Opencode-Tools --skill frontend-jcetools-petra

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you design and implement frontend UI work that stays accessible, responsive, and maintainable while meeting modern performance and i18n requirements.

Core Features & Use Cases

  • Component architecture guidance: choose the right rendering and interactivity model (presentational vs client state vs data fetching) to match the task.
  • Core Web Vitals optimization: improve LCP, INP, and CLS with concrete patterns like SSR/SSG, preloading, transitions, and layout stability.
  • Accessibility and i18n best practices: enforce keyboard/focus/semantic HTML standards and externalize strings with pluralization-safe formatting and RTL-safe styling.

Quick Start

Use the frontend skill when you are implementing a responsive, accessible React component and want guidance that covers architecture, performance, a11y checks, and internationalization for the task at hand.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build accessible and responsive React components that meet Core Web Vitals targets?▼

To build accessible and responsive React components, apply correct component architecture and quality gates that enforce keyboard, focus, and semantic HTML standards while optimizing LCP, INP, and CLS using SSR, preloading, and layout stability patterns.

What is the best way to structure frontend component architecture for data fetching versus presentational UI?▼

Frontend component architecture should match the rendering and interactivity model to the task, choosing between presentational components, client state management, or data fetching patterns to ensure maintainable and performant UI workflows.

Can I use this approach to improve LCP and INP scores for my web application?▼

Yes, Core Web Vitals optimization improves LCP and INP scores through concrete patterns like SSR/SSG, preloading, transitions, and layout stability techniques applied directly within your component implementation workflow.

How do I handle internationalization and RTL styling when building responsive web interfaces?▼

Internationalization for responsive web interfaces requires externalizing strings with pluralization-safe formatting and applying RTL-safe styling patterns to ensure translation-safe rendering across different locales.

Does this frontend guidance work with Vue and Svelte or only React?▼

This frontend guidance applies to UI work involving React, Vue, and Svelte components, providing architecture, performance, a11y checks, and internationalization guidance across typical engineering workflows.

Related Skills

Explore More Design & Creative Skills→
AI-Foundry-CoreAI-Foundry-Core
4

web-component-design

Standardizes UI component patterns across React, Vue, and Svelte for design systems.

Official
Advanced
paialexpaialex
1

core-web-vitals

Diagnose and optimize LCP, INP, and CLS on web pages.

Community
Intermediate
jamestorrevillasjamestorrevillas
3

web-artifacts-builder

Build Next.js App Router applications with Zustand state and TanStack Query.

Community
Advanced
IndustrialIndustrial

application-performance-performance-optimization

Profile and optimize backend, frontend, and database performance with load testing.

Community
Advanced