gsd-ui-developer

Create UI specifications and validate visuals and accessibility in browsers.

1|Updated Mar 26, 2026
One-click install
npx skills add https://github.com/da-moon/manus-skills --skill gsd-ui-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-ui-developer
Source: https://github.com/da-moon/manus-skills/tree/main/skills/gsd-ui-developer
Command: npx skills add https://github.com/da-moon/manus-skills --skill gsd-ui-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI projects frequently struggle with misaligned designs, inconsistent implementations, and overlooked accessibility checks. This skill delivers a repeatable workflow to create UI specifications, implement frontend work, and verify results with browser-based validation and accessibility checks.

Core Features & Use Cases

  • UI Specification Workflow: Create or update UI_SPEC.md detailing layout, components, breakpoints, interactions.
  • Visual Verification & Browser Validation: Validate rendering and behavior in the running app across devices and viewports.
  • Accessibility Assurance & Real-world Use: Verify alt text, keyboard navigation, color contrast, and semantic markup; Use Case: When implementing a new dashboard, generate the UI spec, implement components, and verify visuals and accessibility end-to-end before release.

Quick Start

Execute the UI phase by generating or updating a UI-SPEC.md, then run the UI plan with browser-based verification to validate visuals and accessibility.

Frequently Asked Questions about gsd-ui-developer

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

FAQPage Schema
How do I create a UI specification for frontend implementation?▼

To create a UI specification, generate or update a UI_SPEC.md file detailing layout, components, breakpoints, and interactions. This document serves as the foundational blueprint to guide frontend implementation and align visual outputs with design requirements.

What is browser-based visual verification for frontend workflows?▼

Browser-based visual verification validates rendering and behavior in the running application across devices and viewports. It ensures that implemented frontend components accurately match the UI specification under real-world conditions.

How do I check accessibility requirements during UI implementation?▼

To check accessibility requirements, verify alt text, keyboard navigation, color contrast, and semantic markup through a browser-enabled workflow. This ensures frontend components meet accessibility standards before release.

What's the best way to test UI breakpoints across different viewports?▼

The best way to test UI breakpoints is by running a browser-based validation workflow that checks rendering and behavior across multiple devices and viewports. This ensures consistent responsive design and visual alignment with the UI spec.

Can I use this workflow to align UI specs with visual implementation?▼

Yes, you can use this workflow to align UI specs with visual implementation by creating a UI_SPEC.md, executing the frontend plan, and running browser-based verification to validate visuals and accessibility end-to-end.

Why does my frontend implementation misalign with the original UI design?▼

Frontend implementation misaligns with UI design when lacking a repeatable workflow to create UI specifications, implement components, and verify results with browser-based visual validation and accessibility checks.