frontend-impl

Generates frontend components from DESIGN.md specifications with commit-ready output.

1|Updated Jan 30, 2026

Search Tags:#documentation #frontend #implementation #cross-platform #design-docs #commit-strategy #kernel-doc

Ready to run

npx skills add https://github.com/PanJason/Awesome_SDE_Skills --skill frontend-impl-panjason

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-impl
Source: https://github.com/PanJason/Awesome_SDE_Skills/tree/main/Developer/Frontend/Implementation
Command: npx skills add https://github.com/PanJason/Awesome_SDE_Skills --skill frontend-impl-panjason

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to translate design specifications into clean, maintainable components while preserving clear, auditable commit history and accompanying documentation.

Core Features & Use Cases

Translate DESIGN.md into production-ready frontend components across platforms (SwiftUI, UIKit, React, Vue, Angular).
Enforce conventional commits and generate kernel-doc style documentation alongside code.
Coordinate end-to-end implementation tasks from design analysis to documentation updates with consistent quality controls.

Quick Start

Run the frontend-impl command with a component name to generate the implementation from DESIGN.md.

Frequently Asked Questions about frontend-impl

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

FAQPage Schema

How do I translate DESIGN.md into production-ready frontend components?▼

Translating DESIGN.md into frontend components is automated by parsing design specifications and scaffolding production-ready code. This process applies to cross-platform frameworks including SwiftUI, UIKit, React, Vue, and Angular while generating traceable commits.

How do I enforce conventional commits and kernel-doc style documentation for frontend implementation?▼

Enforcing conventional commits and kernel-doc style documentation is handled during component implementation by separating documentation commits from code commits. This ensures a clean, auditable commit history alongside kernel-style documentation updates.

Can I use a single workflow for React, Vue, Angular, SwiftUI, and UIKit component implementation?▼

A single cross-platform frontend workflow can be used for React, Vue, Angular, SwiftUI, and UIKit. It coordinates end-to-end implementation tasks from design analysis to documentation updates with consistent quality controls across these frameworks.

How do I scaffold explicit dependencies and assets when implementing frontend features?▼

Scaffolding explicit dependencies and assets is integrated into the frontend implementation workflow. It guides component-level tasks by setting up required project dependencies and asset structures before generating the production-ready code.

What is the best way to maintain auditable commit history during cross-platform frontend development?▼

Maintaining auditable commit history during cross-platform frontend development is achieved by enforcing clean commit sequencing. It separates code implementation commits from kernel-style documentation commits to preserve project traceability.