skills.rest
naopensedoit2-design
naopensedoit2-designCOMMUNITY
Explore all skills by this author →
GitHub

design

Delegate frontend design and UI refinement to a specialized DESIGN subagent.

Updated Apr 25, 2026
Search Tags:#code execution#ui design#design iteration#frontend generation#react-vite#design subagent
One-click install
npx skills add https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor --skill design-naopensedoit2-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor/tree/main/.local/skills/design
Command: npx skills add https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor --skill design-naopensedoit2-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you produce and iterate better frontend UI by delegating design work to a specialized design subagent instead of manually tweaking components by hand.

Core Features & Use Cases

  • generateFrontend() for initial build: Generates a complete production-ready React (react-vite) frontend in the background for fast first-time scaffolding.
  • Design subagent for refinements: Performs design-focused iterations, fixes, and visual refinements with access to file operations and design tooling.
  • Guided integration workflow: Coordinates when and how to pass context (relevantFiles, style hints, and backend notes) so the UI matches the app architecture.

Quick Start

Delegate a UI iteration to the design subagent by instructing it to redesign a specific screen while using the existing theme and component patterns from your codebase.

Frequently Asked Questions about design

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

FAQPage Schema
How do I refine React UI components without manually tweaking the code?▼

To refine React UI, you delegate design work to a specialized design subagent that performs visual iterations and fixes. It applies your existing theme and component patterns directly to the react-vite codebase instead of manual tweaks.

What is the best way to scaffold an initial React frontend for production?▼

The best way to scaffold an initial React frontend is using a background generateFrontend workflow. It enforces react-vite-only initial generation via code execution to produce a complete production-ready artifact structure.

Can I use this design subagent to iterate on existing frontend styling?▼

Yes, you can use the design subagent to iterate on existing frontend styling. It performs design-focused iterations and visual refinements across existing components when you supply relevant files and implementation notes.

Does the frontend generation workflow support frameworks other than React-vite?▼

No, the frontend generation workflow does not support frameworks other than React-vite. Initial generation strictly enforces react-vite-only scaffolding via code execution to ensure architectural consistency.

How do I pass backend context to the UI design agent for integration?▼

To pass backend context for UI integration, you supply relevant files, style hints, and backend notes. This guided integration workflow ensures the design subagent matches the UI to your app architecture.

Related Skills

Explore More Design & Creative Skills→
HunterMcGrewHunterMcGrew

prism-architect

Assess and plan software architecture against predefined rules and context.

Community
Advanced
CaptainCrouton89CaptainCrouton89
497

Subagents Guide

Delegate tasks to specialized subagents with separate contexts and restricted tool access.

Community
Basic
BasitShafiqBasitShafiq

design

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

Community
Advanced
hajrasarwar11hajrasarwar11

design

Delegate frontend design tasks to a specialized subagent for iterative refinements.

Community
Intermediate