skills.rest
diegouis
diegouisCOMMUNITY
Explore all skills by this author →
GitHub

frontend-assistant

Guide frontend engineering for React, Vue, Angular, Next.js, and React Native.

Updated Aug 27, 2026
Search Tags:#ui#performance#accessibility#frontend#react#design system#tailwind
One-click install
npx skills add https://github.com/diegouis/provectus-marketplace --skill frontend-assistant
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-assistant
Source: https://github.com/diegouis/provectus-marketplace/tree/main/plugins/proagent-frontend/skills/frontend-assistant
Command: npx skills add https://github.com/diegouis/provectus-marketplace --skill frontend-assistant

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and tools for building modern, accessible, and performant web interfaces using a variety of popular frameworks and technologies.

Core Features & Use Cases

  • Component Development: Scaffold and implement UI components in React, Vue, Angular, Next.js, and React Native.
  • Design Systems & Theming: Create and manage design systems with token-based architecture and dynamic theming.
  • Accessibility & Performance: Audit and optimize for WCAG 2.1 AA compliance and Core Web Vitals.
  • Tooling & Build: Configure modern frontend build tools like Vite and TypeScript.
  • Use Case: You need to build a new design system for a React application, ensuring it's accessible and performs well across devices.

Quick Start

Use the frontend-assistant skill to scaffold a new React button component with Tailwind CSS.

Frequently Asked Questions about frontend-assistant

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

FAQPage Schema
How do I build a React component with Tailwind CSS that meets accessibility standards?▼

To build an accessible React component with Tailwind CSS, scaffold the UI using token-based architecture and audit the output against WCAG 2.1 AA compliance standards to ensure proper semantic structure and keyboard navigation.

What is a design system and how do I create one using a token-based architecture?▼

A design system using token-based architecture centralizes UI visual properties into reusable variables. You create and manage these systems to enable dynamic theming and consistent visual output across React, Vue, or Angular applications.

How do I optimize Core Web Vitals for a Next.js application?▼

Optimizing Core Web Vitals for Next.js involves auditing component architecture and performance bottlenecks. Apply frontend performance techniques to reduce layout shifts and improve loading metrics for modern web interfaces.

Does this frontend tooling support Vue and Angular component development?▼

Yes, frontend component development supports scaffolding and implementing UI components across multiple frameworks including Vue, Angular, Next.js, and React Native, alongside React for diverse web interfaces.

Can I integrate Figma designs directly into my web interface build process?▼

Yes, you can integrate with Figma, Canva, and Webflow using Composio App Automations. This allows you to pull design system assets directly into your frontend component development workflow.

What is the best way to configure Vite and TypeScript for a modern web interface?▼

The best way to configure Vite and TypeScript is to use modern frontend build tooling setup practices. This ensures proper type checking and optimized bundling for your component architecture.

Related Skills

Explore More Design & Creative Skills→
pluginagentmarketplacepluginagentmarketplace
1

frontend-technologies

Guide developers through HTML, CSS, JavaScript, and frontend frameworks.

Community
Advanced
ils15ils15
10

web-ui-analysis

Analyze web interfaces for WCAG 2.1 compliance and Core Web Vitals.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

canva-token-inference

Extract design tokens from Canva screenshots and generate Tailwind or NativeWind configs.

Official
Advanced
usenotrausenotra
148

web-design-guidelines

Analyze UI code for Web Interface Guidelines compliance across HTML, CSS, and JS files.

Official
Intermediate