skills.rest
BasitShafiq
BasitShafiqCOMMUNITY
Explore all skills by this author →
Website𝕏@BasitShafiq4GitHub

design

Generate React-Vite frontends and delegate design iterations to a subagent.

Updated Mar 14, 2026
Search Tags:#design#frontend#react#code generation#subagent#vite
One-click install
npx skills add https://github.com/BasitShafiq/personal --skill design-basitshafiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/BasitShafiq/personal/tree/main/.local/skills/design
Command: npx skills add https://github.com/BasitShafiq/personal --skill design-basitshafiq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines frontend development by either automating initial builds or delegating design-specific iterations and refinements to a specialized subagent.

Core Features & Use Cases

  • generateFrontend(): Automates the initial creation of React-Vite frontends, generating all components, pages, and styles based on provided context.
  • Design Subagent: Handles design iterations, visual refinements, image/video generation, and web searches for design-related tasks.
  • Use Case: After backend API development, use generateFrontend() for a rapid initial UI build. Later, use the Design Subagent to refine the UI's aesthetic, add illustrations, or adjust layouts based on feedback.

Quick Start

Use the generateFrontend function to build the initial frontend for the web-app artifact, with a clean minimal design style.

Frequently Asked Questions about design

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

FAQPage Schema
How do I automate React Vite frontend generation from backend APIs?▼

You can automate React Vite frontend generation by using a function that creates all components, pages, and styles based on your context. This allows you to rapidly generate an initial UI build after backend development.

What is the best way to delegate design iterations for a web application?▼

The best way to delegate design iterations is using a specialized subagent that handles visual refinements, image generation, and layout adjustments. It supports both synchronous and asynchronous execution for interactive design workflows.

Can I refine the aesthetic of my React frontend after the initial build?▼

Yes, you can refine the React frontend aesthetic after the initial build by delegating design-specific tasks to a subagent. This subagent adjusts layouts, adds illustrations, and performs visual refinements based on your feedback.

Does this frontend code generation approach require any specific dependencies?▼

No specific dependencies are required to use this frontend code generation approach. It operates independently to generate React-Vite applications and integrates directly with code execution tools and specialized subagents.

How do subagents handle asynchronous execution for background frontend generation?▼

Subagents handle asynchronous execution by running background frontend generation tasks concurrently while you continue other work. This design supports comprehensive design workflows without blocking interactive design refinements.

Related Skills

Explore More Design & Creative Skills→
gtriggtrig

ui-web-explorer

Render LaightDB dashboards and 3D Explorer via a Vite/React frontend.

Community
Advanced
victorjoshi9victorjoshi9
1

build-mcpb

Package local MCP servers into installable .mcpb bundles.

Community
Advanced
nirajrathod19nirajrathod19

design

Generate React Vite frontends and refine designs through specialized subagents.

Community
Advanced
ouzayrouzayr

design

Generate React-Vite frontends and delegate design refinements to a subagent.

Community
Advanced