frontend-design

star 0

Create frontend design docs for new features, focusing on layouts, fields, component hierarchy, and interactions without implementation; list required APIs only. Use when user needs to create frontend design documentation, mentions UI/page/component design, or asks for frontend architecture planning.

Y2138 By Y2138 schedule Updated 2/6/2026
play_arrow Run Skill in Manus View GitHub

name: frontend-design description: Create frontend design docs for new features, focusing on layouts, fields, component hierarchy, and interactions without implementation; list required APIs only. Use when user needs to create frontend design documentation, mentions UI/page/component design, or asks for frontend architecture planning.

Frontend Design

Goal

Write a frontend design document for a new feature or page.

Principles

  • Frontend-first: layout, fields, component structure, interactions.
  • FE/BE separation: list required APIs (name + purpose) only.
  • Design-only: no implementation code.

Workflow

  1. Gather context (requirements, screenshots, clarifying questions).
  2. Explore existing code and reusable components.
  3. Break down modules and define each section.
  4. Write the document and run a constraint check.
  5. Do a reader pass for clarity and completeness.

Document Standard

  • Location: docs/design-docs/
  • Naming: Chinese filename, 主需求_模块
  • Split by major modules when needed.
Install via CLI
npx skills add https://github.com/Y2138/vue3-mono --skill frontend-design
Repository Details
star Stars 0
call_split Forks 1
navigation Branch main
article Path SKILL.md
More from Creator
Y2138
Y2138 Explore all skills →