skills.rest
Y2138
Y2138COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create frontend design documents outlining layouts, components, and API references.

1|Updated Jan 7, 2025
Search Tags:#design#ui#architecture#documentation#frontend#apis#component-hierarchy
One-click install
npx skills add https://github.com/Y2138/vue3-mono --skill frontend-design-y2138
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Y2138/vue3-mono/tree/main/.agents/skills/front-design
Command: npx skills add https://github.com/Y2138/vue3-mono --skill frontend-design-y2138

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create frontend design documents for new features, focusing on layouts, fields, component hierarchy, and interactions without implementation, to improve planning and alignment.

Core Features & Use Cases

  • Design-first planning: outlines UI layouts, fields, and interactions without code.
  • Component hierarchy mapping: defines parent-child relationships and reusable blocks.
  • API surface sketch: lists required APIs and data contracts for frontend features.
  • Use Case: When starting a new feature, generate a design document to align stakeholders and guide implementation.

Quick Start

Draft a frontend design document for the new feature outlining layouts, components, and required APIs.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a frontend design document for a new feature?▼

To create a frontend design document for a new feature, outline the required UI layouts, fields, component hierarchy, and interactions without writing implementation code to guide architecture decisions and align stakeholders.

What is component hierarchy mapping in frontend design?▼

Component hierarchy mapping in frontend design defines the parent-child relationships between UI elements and identifies reusable blocks to structure the interface before actual implementation begins.

How do I plan API references for frontend features without implementation details?▼

Plan API references for frontend features by sketching the required API surfaces and data contracts needed to support the UI layouts and interactions within your design document.

Does a frontend design document include UI interaction guidelines?▼

Yes, a frontend design document includes UI interaction guidelines to ensure stakeholders understand the expected user behaviors and interface responses during the feature planning phase.

Can I use this approach for design reviews and architecture discussions?▼

Yes, you can use frontend design documents during design reviews and architecture discussions to align teams on layouts, components, and required APIs before development starts.

Related Skills

Explore More Design & Creative Skills→
kevinlinkevinlin
14

feature-spec

Generate a structured PRD with problem statements, goals, user stories, and acceptance criteria.

Community
Advanced
jackmochjackmoch

Ticket Generation Skill

Generate implementation tickets with acceptance criteria and dependency mapping from design documents.

Community
Advanced
AskTinNguyenAskTinNguyen

flowy-ui-mockup

Generate iOS UI mockups as Flowy JSON with screens, components, and connections.

Community
Advanced
dha201dha201

architecture-documentation

Generate technical architecture documentation with C4 diagrams from codebases.

Community
Advanced