design

Delegate frontend design tasks to a specialized subagent for fullstack apps.

Updated Jul 4, 2026
One-click install
npx skills add https://github.com/Spectra29115/Project-ResumeParser --skill design-spectra29115
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/Spectra29115/Project-ResumeParser/tree/main/.local/skills/design
Command: npx skills add https://github.com/Spectra29115/Project-ResumeParser --skill design-spectra29115

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill solves the problem of managing frontend design work by delegating it to a specialized subagent, allowing for efficient design tasks in fullstack apps, mockup sandboxes, and variant exploration.

Core Features & Use Cases

  • Subagent Delegation: Delegate frontend design work to a specialized subagent through the subagent CodeExecution callback.
  • Fullstack Apps: Ideal for fullstack applications, providing a clear brief for design work within the application.
  • Mockup Sandboxes: Useful for prototyping and design explorations without backend or API hooks.
  • Variant Exploration: Allows for creating different design variants with distinct vibes for comparison.

Quick Start

Run the following command to delegate a design task:

subagent({
  name: "initial-design",
  task: "Frontend design brief with product identity, scope, exact file paths to inspect, API hooks, and implementation skill names.",
  config: {
    $kind: "design",
    outputDir: "artifacts/<slug>",
    relevantFiles: ["artifacts/<slug>/src/App.tsx"],
    relevantSkills: [".local/skills/clerk-auth/SKILL.md"],
  },
});

Frequently Asked Questions about design

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

FAQPage Schema
How do I delegate frontend design tasks to a subagent for fullstack applications?

To delegate frontend design tasks for fullstack apps, use the subagent CodeExecution callback with a design brief specifying product identity, scope, file paths, API hooks, and implementation skill names.

What is a mockup sandbox and when do I need it for frontend design exploration?

A mockup sandbox is an isolated environment for frontend design prototyping and variant exploration without backend or API hooks. You need it when creating and comparing different design vibes.

Can I create multiple design variants with distinct vibes for comparison in fullstack apps?

Yes, you can create multiple design variants with distinct vibes for comparison in fullstack apps by delegating separate frontend design tasks to the specialized subagent with specific configuration parameters.

Do I need to configure output directories and relevant files before delegating frontend design work?

Yes, delegating frontend design work requires configuring the output directory, relevant files to inspect, and relevant skills for integration within the subagent configuration block to ensure proper execution.

What's the best way to prototype frontend designs without backend or API hooks?

The best way to prototype frontend designs without backend hooks is using a mockup sandbox through subagent delegation, specifying the output directory and relevant files in the configuration.

Why specify implementation skill names in the frontend design brief for subagent delegation?

Specifying implementation skill names in the frontend design brief allows the specialized subagent to properly integrate design work with the required skills and API hooks within fullstack applications.