skills.rest
JCE-Joshhh77
JCE-Joshhh77COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend

Automate frontend UI quality checks for React, Vue, or Svelte codebases.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI quality, accessibility compliance, and responsive consistency across projects, reducing manual rewrites and rework.

Core Features & Use Cases

  • Accessibility automation: enforces a11y checks and semantic markup during development.
  • Responsive design guidance: prescribes patterns for breakpoints, layout, and fluid components.
  • i18n integration: standardizes translation patterns and locale-aware rendering.
  • Use Case: when integrating a new component library, the skill provides architecture templates, checklists, and reusable patterns to accelerate delivery.

Quick Start

Describe your frontend task (e.g., build an accessible responsive navigation) to receive architecture guidance, component patterns, and accessibility checks.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I enforce accessibility checks in a React component library?▼

Accessibility checks are enforced during development by automating semantic markup validation and a11y conformance. This skill provides architecture templates and reusable patterns to ensure UI quality and compliance across React, Vue, or Svelte codebases.

What's the best way to standardize i18n integration across frontend projects?▼

Standardizing i18n integration involves applying documented patterns for translation and locale-aware rendering. This skill prescribes templates that enforce internationalization standards to reduce manual rework and ensure consistent locale behavior.

Can I use this for responsive design guidance in a Svelte codebase?▼

Yes, responsive design guidance applies to Svelte codebases. It prescribes specific patterns for breakpoints, layout structures, and fluid components to ensure responsive behavior and consistency across your production application.

How do I set up performance budgets for a Vue design system?▼

Performance budgets are satisfied through documented patterns and templates applied to your Vue design system. This skill guides architectural decisions to meet performance requirements while maintaining accessibility and responsive design standards.

Why does manual UI rework increase without automated frontend architecture templates?▼

Manual UI rework increases without automated templates because accessibility, responsive design, and i18n standards are enforced inconsistently. This skill automates quality checks and provides architecture guidance to reduce manual rewrites across projects.

Related Skills

Explore More Software Engineering Skills→
arbazkhan971arbazkhan971
26

ui

Analyze UI component architecture and generate tokenized component library structures.

Community
Intermediate
pratikrath126pratikrath126
42

i18n-localization

Detect hardcoded strings and validate locale files across React, Next.js, and Python projects.

Community
Intermediate
jx1100370217jx1100370217
4

ios-ui-ux-design

Design iOS interfaces following Apple's Human Interface Guidelines.

Community
Basic
NabilThangeNabilThange
1

i18n-localization

Detect hardcoded strings and manage translations for software localization.

Community
Advanced