frontend-prompt-generator

Generate structured prompts for frontend tasks by defining the task type (wireframe, UI implementation, data binding, or routing), component name, and file path. The skill formats prompts with standardized dividers, indentation levels, cursor rules, and testing directives to ensure consistency across React and Next.js projects.

Use standardized prompt templates that enforce consistent formatting: 46-character dividers, 16-space indentations for subitems, 20-space indentations for nested levels, and correct src/components file paths. This ensures all prompts follow the same structure for component wiring and design-to-code tasks.

Yes. The skill generates prompts for data binding and routing scenarios, including GraphQL API integration cases. Each prompt type incorporates role-specific cursor rules and testing directives tailored to your project's technical requirements.

Prompt generation automates formatting entirely. Instead of manually applying dividers, indentations, and file path conventions, the skill reads centralized templates and produces ready-to-use prompts with all formatting requirements and TDD directives pre-applied.

By encoding standardized formatting rules, file path conventions, and cursor role specifications into reusable templates, the skill eliminates repetitive manual formatting and ensures every prompt meets your team's consistency standards without rework.

The skill expects React/Next.js projects with components organized under src/components/[component]/ directories and pages under src/app/. It reads these paths, applies standardized formatting with strict indentation and divider rules, and generates prompts ready for TDD workflows.