Some checks failed
CI / build-and-test (pull_request) Failing after 1m19s
CI (.gitea/workflows/ci.yaml): lint → typecheck → vitest w/ coverage → OpenNext build → preview smoke → bundle-size budgets; Node 20; npm ci; artifacts; safe env; D1 dry-run scaffold. Budgets: add scripts/budgets.mjs; TOTAL_STATIC_MAX_BYTES and MAX_ASSET_BYTES thresholds; report top offenders; fail on breach; README CI section. Flags: add lib/flags.ts with typed booleans and safe defaults (ADMIN_ENABLED, ARTISTS_MODULE_ENABLED, UPLOADS_ADMIN_ENABLED, BOOKING_ENABLED, PUBLIC_APPOINTMENT_REQUESTS_ENABLED, REFERENCE_UPLOADS_PUBLIC_ENABLED, DEPOSITS_ENABLED, PUBLIC_DB_ARTISTS_ENABLED, ADVANCED_NAV_SCROLL_ANIMATIONS_ENABLED, STRICT_CI_GATES_ENABLED, ISR_CACHE_R2_ENABLED); robust parsing; client provider; unit tests. Wiring: gate Admin shell and admin write APIs (503 JSON on uploads and artists writes); disable booking submit and short-circuit booking mutations when off; render static Hero/Artists when advanced animations off; tests for UI and API guards. Ops: expand docs/prd/rollback-strategy.md with “Feature Flags Operations,” Cloudflare Dashboard and wrangler.toml steps, preview simulation, incident playbook, and post-toggle smoke checklist. Release: add docs/releases/2025-09-19-feature-flags-rollout.md with last-good commit, preview/production flag matrices, rollback notes, and smoke results; link from rollback doc. Chore: fix TS issues (gift-cards boolean handling, Lenis options, tailwind darkMode), remove next-on-pages peer conflict, update package.json scripts, configure Gitea act_runner label, open draft PR to trigger CI. Refs: CI-1, FF-1, FF-2, FF-3, OPS-1 Impact: defaults preserve current behavior; no runtime changes unless flags flipped
4.6 KiB
4.6 KiB
/generate-ai-frontend-prompt Task
When this command is used, execute the following task:
Create AI Frontend Prompt Task
Purpose
To generate a masterful, comprehensive, and optimized prompt that can be used with any AI-driven frontend development tool (e.g., Vercel v0, Lovable.ai, or similar) to scaffold or generate significant portions of a frontend application.
Inputs
- Completed UI/UX Specification (
front-end-spec.md) - Completed Frontend Architecture Document (
front-end-architecture) or a full stack combined architecture such asarchitecture.md - Main System Architecture Document (
architecture- for API contracts and tech stack to give further context)
Key Activities & Instructions
1. Core Prompting Principles
Before generating the prompt, you must understand these core principles for interacting with a generative AI for code.
- Be Explicit and Detailed: The AI cannot read your mind. Provide as much detail and context as possible. Vague requests lead to generic or incorrect outputs.
- Iterate, Don't Expect Perfection: Generating an entire complex application in one go is rare. The most effective method is to prompt for one component or one section at a time, then build upon the results.
- Provide Context First: Always start by providing the AI with the necessary context, such as the tech stack, existing code snippets, and overall project goals.
- Mobile-First Approach: Frame all UI generation requests with a mobile-first design mindset. Describe the mobile layout first, then provide separate instructions for how it should adapt for tablet and desktop.
2. The Structured Prompting Framework
To ensure the highest quality output, you MUST structure every prompt using the following four-part framework.
- High-Level Goal: Start with a clear, concise summary of the overall objective. This orients the AI on the primary task.
- Example: "Create a responsive user registration form with client-side validation and API integration."
- Detailed, Step-by-Step Instructions: Provide a granular, numbered list of actions the AI should take. Break down complex tasks into smaller, sequential steps. This is the most critical part of the prompt.
- Example: "1. Create a new file named
RegistrationForm.js. 2. Use React hooks for state management. 3. Add styled input fields for 'Name', 'Email', and 'Password'. 4. For the email field, ensure it is a valid email format. 5. On submission, call the API endpoint defined below."
- Example: "1. Create a new file named
- Code Examples, Data Structures & Constraints: Include any relevant snippets of existing code, data structures, or API contracts. This gives the AI concrete examples to work with. Crucially, you must also state what not to do.
- Example: "Use this API endpoint:
POST /api/register. The expected JSON payload is{ "name": "string", "email": "string", "password": "string" }. Do NOT include a 'confirm password' field. Use Tailwind CSS for all styling."
- Example: "Use this API endpoint:
- Define a Strict Scope: Explicitly define the boundaries of the task. Tell the AI which files it can modify and, more importantly, which files to leave untouched to prevent unintended changes across the codebase.
- Example: "You should only create the
RegistrationForm.jscomponent and add it to thepages/register.jsfile. Do NOT alter theNavbar.jscomponent or any other existing page or component."
- Example: "You should only create the
3. Assembling the Master Prompt
You will now synthesize the inputs and the above principles into a final, comprehensive prompt.
- Gather Foundational Context:
- Start the prompt with a preamble describing the overall project purpose, the full tech stack (e.g., Next.js, TypeScript, Tailwind CSS), and the primary UI component library being used.
- Describe the Visuals:
- If the user has design files (Figma, etc.), instruct them to provide links or screenshots.
- If not, describe the visual style: color palette, typography, spacing, and overall aesthetic (e.g., "minimalist", "corporate", "playful").
- Build the Prompt using the Structured Framework:
- Follow the four-part framework from Section 2 to build out the core request, whether it's for a single component or a full page.
- Present and Refine:
- Output the complete, generated prompt in a clear, copy-pasteable format (e.g., a large code block).
- Explain the structure of the prompt and why certain information was included, referencing the principles above.
- <important_note>Conclude by reminding the user that all AI-generated code will require careful human review, testing, and refinement to be considered production-ready.</important_note>