skills.rest
KeyValueSoftwareSystems
KeyValueSoftwareSystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generates frontend low-level design documents and parallelized task DAGs from existing codebase patterns.

3|Updated Jul 1, 2026
Search Tags:#design#architecture#frontend#tasks#sdlc#lld
One-click install
npx skills add https://github.com/KeyValueSoftwareSystems/maestro --skill frontend-design-keyvaluesoftwaresystems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/KeyValueSoftwareSystems/maestro/tree/main/skills/core/sdlc/frontend-design
Command: npx skills add https://github.com/KeyValueSoftwareSystems/maestro --skill frontend-design-keyvaluesoftwaresystems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of inconsistent, poorly documented, or unbuildable frontend designs by enforcing a rigorous, grounded design process that bridges the gap between high-level requirements and actionable implementation tasks.

Core Features & Use Cases

  • Grounded Design: Forces the AI to read existing code and cite specific file lines to ensure the design is technically feasible and consistent with current patterns.
  • Comprehensive LLD: Generates a full low-level design document covering state management, UI-state matrices, API contracts, and accessibility.
  • Task DAG Generation: Automatically produces a validated tasks.json file that maps the design into a parallelized, dependency-aware execution plan for developers.

Quick Start

Invoke the frontend-design skill to generate a low-level design and task manifest for the new user profile feature based on the approved high-level design document.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate a frontend low-level design from an existing codebase?▼

To generate a frontend low-level design, this skill reads existing codebase patterns to produce deterministic LLD documents covering state management, UI-state matrices, API contracts, and component architecture.

What is a UI-state matrix and when do I need it for frontend architecture?▼

A UI-state matrix maps component states to behaviors within frontend architecture. You need it when generating comprehensive low-level designs to ensure deterministic, validated state management across your application.

How do I create a parallelized task manifest for frontend development?▼

You create a parallelized task manifest by mapping low-level design artifacts into a validated tasks.json file, structuring frontend development into a dependency-aware execution DAG for developers.

Does this approach to frontend design work with my specific tech stack?▼

Yes, the generated low-level design artifacts and task DAGs are validated to adhere to your specific project tech stack by enforcing a grounded design process that reads existing codebase patterns.

Why does my frontend design fail to translate into actionable implementation tasks?▼

Frontend design often fails to translate into actionable tasks due to inconsistent or unbuildable documentation. This skill bridges that gap by enforcing grounded design and generating dependency-aware task DAGs.

Related Skills

Explore More Software Engineering Skills→
tamayotchitamayotchi

forgecad-lld

Generate Low-Level Design documents for CAD models with dimensions and verification criteria.

Community
Advanced
silentbalanceyhsilentbalanceyh
2

r2-dev-page

Generate frontend page code from design specifications.

Community
Advanced
EONMUNEONMUN
1

spec_driven_development.plan

Convert clarified specifications into technical plans with architecture, data models, and API contracts.

Official
Advanced
ruskibeatsruskibeats

zoom-out

Summarize software module interactions for high-level system architecture review.

Community
Intermediate