skills.rest
anhtrinh919
anhtrinh919COMMUNITY
Explore all skills by this author →
GitHub

frontend

Automate frontend design planning and handover workflows from requirements.md specifications.

Updated Apr 25, 2026
Search Tags:#workflow#frontend#handover#spec-driven-development#design-brief#design-tools
One-click install
npx skills add https://github.com/anhtrinh919/claude-code-sdd --skill frontend-anhtrinh919
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/anhtrinh919/claude-code-sdd/tree/main/skills/frontend
Command: npx skills add https://github.com/anhtrinh919/claude-code-sdd --skill frontend-anhtrinh919

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Skill standardizes frontend design and handover workflows in Spec-Driven Development, ensuring specs guide design decisions and backend integration points are clearly defined.

Core Features & Use Cases

  • Phase-guided workflow from design-tool choice to handover frame
  • Generates design briefs for both external-tool paths and Claude Code paths, plus a frame-index handover
  • Supports wiki integration for knowledge reuse and preflight checks to ensure alignment with requirements.md

Quick Start

Create a design brief from specs and prepare a frontend handover for the backend.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I automate frontend handover to backend using spec-driven development?▼

Automating frontend handover uses a specification-driven process to derive design tokens, handover structure, and API considerations from requirements.md. This enforces contract-based expectations and clearly defines backend integration points before development begins.

What is spec-driven frontend design and when do I need it?▼

Spec-driven frontend design standardizes planning and documentation workflows by ensuring specifications guide design decisions. You need it when aligning external-tool or Claude Code design paths with phase gates and wiki integration for knowledge reuse.

How do I create a design brief from specifications for frontend development?▼

Creating a design brief from specs involves applying phase-guided workflows that evaluate design-tool choices and generate structured documentation. It supports both external-tool and Claude Code paths while running preflight checks against requirements.md.

Does spec-driven frontend workflow support external design tools and Claude Code?▼

Spec-driven frontend workflow supports both external-tool paths and Claude Code paths. It guides tool choice, design brief creation, phase design, and frame-index handover, applying preflight checks to ensure alignment with requirements.md across both environments.

What are the limitations of spec-driven frontend design handover?▼

Spec-driven frontend handover requires strict adherence to phase gates and a valid requirements.md file to derive design tokens and API considerations. It is limited by its dependency on contract-based expectations, meaning workflows bypassing specifications will not integrate properly.

Related Skills

Explore More Design & Creative Skills→
D0NMEGAD0NMEGA
8

gsd-ui-phase

Generate a UI-SPEC.md contract for a frontend phase.

Community
Intermediate
FutureAtomsFutureAtoms
1

ui-ux-design-system

Generate mobile design system specifications with design tokens and component structures.

Community
Advanced
OshanKHZOshanKHZ
5

hook-development

Create and implement Claude Code plugin hooks for lifecycle events.

Community
Advanced
coco-researchcoco-research
264

gsd-ui-phase

Generate UI-SPEC.md defining interface behavior and design constraints for a frontend phase.

Community
Advanced