Skip to main content
Prompts React Tailwind Single-File Page Builder

developer coding template risk: low

React Tailwind Single-File Page Builder

Instructs building a specified page like Homepage or About as a single-file React component using Tailwind, with mobile-first responsive design, performance budget constraints, a s…

PROMPT 

Based on the approved concept, build the [Homepage/About/etc.] page.

Constraints:
- Single-file React component with Tailwind
- Mobile-first, responsive
- Performance budget: no library over 50kb unless justified
- [Specific interaction from Phase 1] must be the hero moment
- Use the frontend-design skill for design quality

Show me the component. I'll review before moving to the next page.

INPUTS

page_type REQUIRED

Page identifier such as Homepage/About/etc.

e.g. Homepage

specific_interaction REQUIRED

Specific interaction from Phase 1 that must be the hero moment.

e.g. interactive slider

REQUIRED CONTEXT

  • approved concept

TOOLS REQUIRED

  • frontend-design

ROLES & RULES

  1. Single-file React component with Tailwind
  2. Mobile-first, responsive
  3. Performance budget: no library over 50kb unless justified
  4. [Specific interaction from Phase 1] must be the hero moment
  5. Use the frontend-design skill for design quality

EXPECTED OUTPUT

Format
code
Constraints
  • Single-file React component with Tailwind
  • Mobile-first responsive
  • Performance budget: no library over 50kb unless justified
  • [Specific interaction from Phase 1] as hero moment

SUCCESS CRITERIA

  • Build the specified page as a single-file React component with Tailwind
  • Ensure mobile-first responsive design
  • Meet performance budget
  • Feature specific interaction from Phase 1 as hero moment
  • Apply frontend-design skill

FAILURE MODES

  • Using libraries over 50kb without justification
  • Failing to make specific interaction the hero
  • Non-responsive or non-mobile-first design
  • Substandard design quality
  • Ignoring approved concept

CAVEATS

Dependencies
  • Approved concept
  • [Homepage/About/etc.] page details
  • Specific interaction from Phase 1
  • frontend-design skill
Missing context
  • Details of the approved concept
  • Specific page name
  • Description of Phase 1 and the interaction
  • Definition or guidelines for 'frontend-design skill'
Ambiguities
  • What is the 'approved concept'?
  • What page is [Homepage/About/etc.]?
  • What is '[Specific interaction from Phase 1]'?
  • What is 'frontend-design skill'?

QUALITY

OVERALL
0.70
CLARITY
0.80
SPECIFICITY
0.70
REUSABILITY
0.90
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Replace placeholders like [Homepage/About/etc.] and [Specific interaction from Phase 1] with parameters or examples for better reusability.
  • Provide a link, summary, or attachment for the 'approved concept'.
  • Explicitly define or link to 'frontend-design skill' guidelines.
  • Add success criteria for design quality and performance justification.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER