frontend-implementation

Name: frontend-implementation
Availability: InStock
Author: guillermobustamante

Translate UI specifications into implementation-ready frontend guidance for AI coding agents.

Updated Feb 13, 2026

Search Tags:#frontend #react #code generation #implementation #next.js #ai agent

Ready to run

npx skills add https://github.com/guillermobustamante/BOMComparevX --skill frontend-implementation-guillermobustamante

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-implementation
Source: https://github.com/guillermobustamante/BOMComparevX/tree/main/.codex/skills/frontend-implementation
Command: npx skills add https://github.com/guillermobustamante/BOMComparevX --skill frontend-implementation-guillermobustamante

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between approved UI designs and actual frontend code, ensuring that new features are built efficiently and align with the project's existing technical stack and conventions.

Core Features & Use Cases

Code Generation Guidance: Provides detailed instructions and prompts for AI coding agents to build frontend components and features.
Architecture Alignment: Ensures new code adheres to the project's framework, routing, state management, and styling patterns.
Use Case: When a new user dashboard screen needs to be developed, this Skill analyzes the existing Next.js codebase and generates specific prompts for an AI agent to create the necessary React components, data hooks, and routing setup, ensuring it matches the project's Tailwind CSS and shadcn/ui patterns.

Quick Start

Use the frontend-implementation skill to generate detailed frontend build instructions for the new user profile screen, aligning with the project's Next.js and Tailwind CSS stack.

Frequently Asked Questions about frontend-implementation

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

FAQPage Schema

How do I translate UI specifications into React code?▼

To translate UI specifications into React code, this Skill converts approved UI strategy and screen specs into repository-specific, implementation-ready frontend guidance tailored to your framework, routing, state management, and styling patterns.

How do I generate AI agent prompts for Next.js frontend implementation?▼

You generate AI agent prompts for Next.js frontend implementation by feeding approved screen specifications to this Skill, which then outputs actionable coding prompts aligned with your project's specific file structure and component libraries.

Does this frontend implementation approach work with my existing Tailwind CSS and shadcn/ui patterns?▼

Yes, this frontend implementation approach works with your existing Tailwind CSS and shadcn/ui patterns by analyzing your codebase and ensuring new components match your established styling and component library conventions.

What is the best way to align new frontend components with an existing codebase?▼

The best way to align new frontend components with an existing codebase is to use this Skill to analyze your framework, routing, and state management setup, producing delivery decomposition that matches your technical stack.

Can I use this for frontend code generation across different frameworks?▼

Yes, you can use this for frontend code generation across different frameworks because it translates UI specs into implementation guidance that adapts to your actual language, routing, state management, and testing setup.

Why do my AI coding agents generate frontend code that ignores my project conventions?▼

Your AI coding agents generate frontend code ignoring project conventions because they lack repository-specific guidance; this Skill solves that by providing detailed prompts aligned to your actual framework, file structure, and styling patterns.