AmazonNova-Hackathon/Frontend & Mobile PRD creation

Frontend & Mobile PRD Skill

This skill is designed to help you create PRDs that don't just list features, but define an experience. It focuses on modern aesthetics, dynamic animations, and high-engagement content copy.

Core Philosophy: "Anti-AI Slop"

• No Generic filler: Avoid phrases like "in the fast-paced world of...". Use direct, punchy, and value-driven copy.
• Visual-First Thinking: Every feature description should imply or explicitly state its visual representation.
• Micro-Interactions Matter: Animations are not "nice-to-haves"; they are core to the user experience.

PRD Structure & Best Practices

1. Information Architecture (IA)

• Define a clear, logical flow. Use Mermaid diagrams to visualize user journeys and app structures.
• Prioritize content hierarchy: What is the single most important action on this page?

2. Design System & Aesthetics

• Color Palette: Use descriptive names (e.g., "Midnight Obsidian", "Hyper-Electric Blue") and HSL values.
• Typography: Specify modern font pairings (e.g., Outfit for headers, Inter for body).
• Glassmorphism/Depth: Incorporate modern styling like subtle blurs, card shadows, and gradients.

3. Animations & Interactions

• Shimmer Effects: Specify where shimmer loaders should appear during data fetching.
• Text Streaming: Detail the animation for AI-generated text or dynamic content updates.
• Transitions: Define how elements enter and exit (e.g., "smooth slide-up with 300ms cubic-bezier").

4. Content Copywriting

• Voice & Tone: Define the personality of the project (e.g., "Friendly Professional", "Bold Disruptor").
• CTAs: Create compelling, action-oriented button text (e.g., "Start Your Transformation" instead of "Submit").

PRD Checklist

• [ ] Does the "Goal" section sound exciting and ambitious?
• [ ] Are there specific mentions of animations or micro-interactions?
• [ ] Is there an Information Architecture diagram (Mermaid)?
• [ ] Is the copy free of "AI slop" and generic business jargon?
• [ ] Are iconography and illustration styles defined?

Resources

• PRD Template
• Sample PRD