front-end-engineering

Convert complete user stories into front-end code, tests, and documentation.

1|Updated Nov 29, 2025
One-click install
npx skills add https://github.com/SSiertsema/claude-code-plugins --skill front-end-engineering
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: front-end-engineering
Source: https://github.com/SSiertsema/claude-code-plugins/tree/main/.claude/skills/front-end-engineering
Command: npx skills add https://github.com/SSiertsema/claude-code-plugins --skill front-end-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front-end teams waste time translating vague user stories into actionable code and test artifacts. This Skill automates a full pipeline to produce code, tests, and documentation from complete user stories.

Core Features & Use Cases

  • Analyze a complete user story to identify requirements and constraints.
  • Plan, produce, and test front-end code aligned with acceptance criteria.
  • Generate project structure, components, and test artifacts for a production release.
  • Use case: given a story for a responsive dashboard, generate React or Vue components with unit tests and a test suite.

Quick Start

Provide a complete user story describing a front-end feature, and instruct the Skill to generate production-ready code and tests.

Frequently Asked Questions about front-end-engineering

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

FAQPage Schema
How do I generate front-end code from user stories?

To generate front-end code from user stories, provide a complete story with acceptance criteria. The Skill analyzes requirements, detects technologies, and produces production-ready code, tests, and documentation artifacts for your project.

Can I generate React and Vue components from a single user story?

Yes, you can generate React or Vue components from a single user story. The Skill detects your project's front-end framework and produces aligned components, project structures, and unit test artifacts based on the story requirements.

How do I automate testing for front-end code generated from acceptance criteria?

Automate testing for front-end code by providing acceptance criteria within your user story. The Skill's pipeline automatically plans, produces, and generates test suites alongside the production-ready code to verify the output meets the criteria.

Does this story-to-code pipeline support Angular projects?

Yes, the story-to-code pipeline supports Angular projects alongside React and Vue. It detects your specific front-end technology, loads relevant best practices, and generates traceable code artifacts tailored to that framework.

What is the best way to structure front-end code generation for a responsive dashboard?

The best way to structure front-end code generation for a responsive dashboard is to input a complete user story detailing the feature. The Skill handles analysis, planning, and production to output a structured project with components and tests.

Do I need to manually write tests when converting user stories to front-end code?

No, you do not need to manually write tests when converting user stories to front-end code. The Skill automates the full pipeline to generate both the production-ready front-end code and the corresponding test artifacts simultaneously.