Skip to main content
Prompts Next.js Clash of Clans Tool Developer

developer coding template risk: low

Next.js Clash of Clans Tool Developer

Act as a Next.js and React developer to build a comprehensive tool for Clash of Clans enthusiasts, including formation copying, strategy teaching, and community discussion features…

PROMPT 

Act as a Next.js and React Developer. You are tasked with building a comprehensive tool for Clash of Clans enthusiasts. This tool should integrate features for formation copying, strategy teaching, and community discussion.

Your task is to:
- Design and develop the frontend using Next.js and React, ensuring a responsive and user-friendly interface.
- Implement features for users to copy and share formations seamlessly.
- Create modules for teaching strategies, including interactive tutorials and guides.
- Develop a community forum for discussions and strategy sharing.
- Ensure the application is optimized for performance and SEO.

Rules:
- Follow best practices in React and Next.js development.
- Ensure cross-browser compatibility and responsive design.
- Utilize server-side rendering where appropriate for SEO benefits.

Variables:
- ${featureList:formation copying, strategy teaching, community discussion} - List of features to include
- ${framework:Next.js} - Framework to use for development
- ${library:React} - Library to use for UI components

INPUTS

featureList REQUIRED

List of features to include

e.g. formation copying, strategy teaching, community discussion

framework REQUIRED

Framework to use for development

e.g. Next.js

library REQUIRED

Library to use for UI components

e.g. React

ROLES & RULES

Role assignments

  • Act as a Next.js and React Developer.
  1. Follow best practices in React and Next.js development.
  2. Ensure cross-browser compatibility and responsive design.
  3. Utilize server-side rendering where appropriate for SEO benefits.

EXPECTED OUTPUT

Format
code
Constraints
  • Follow best practices in React and Next.js
  • Ensure responsive design and cross-browser compatibility
  • Utilize server-side rendering for SEO
  • Optimized for performance

SUCCESS CRITERIA

  • Design and develop the frontend using Next.js and React ensuring a responsive and user-friendly interface.
  • Implement features for users to copy and share formations seamlessly.
  • Create modules for teaching strategies including interactive tutorials and guides.
  • Develop a community forum for discussions and strategy sharing.
  • Ensure the application is optimized for performance and SEO.

FAILURE MODES

  • May neglect backend requirements for features like community discussions.
  • Might not properly substitute or utilize the provided template variables.
  • Could overemphasize frontend without addressing full integration needs.

CAVEATS

Dependencies
  • Requires substitution of template variables ${featureList}, ${framework}, ${library}.
Missing context
  • Backend APIs or database for formations, strategies, forum posts.
  • User authentication and authorization.
  • UI design system or component library (e.g., Tailwind, Material-UI).
  • Data models/schemas for Clash of Clans formations and strategies.
  • Deployment and hosting details.
Ambiguities
  • Unclear what 'formation copying' entails exactly (e.g., visual editor, JSON import?).
  • No specification on backend integration for data persistence.
  • Scope ambiguous: full production app or prototype?

QUALITY

OVERALL
0.60
CLARITY
0.80
SPECIFICITY
0.60
REUSABILITY
0.70
COMPLETENESS
0.50

IMPROVEMENT SUGGESTIONS

  • Add section for data models: 'Define JSON schema for formations {troops: [...], layout: {...}}'.
  • Specify UI toolkit: 'Use Tailwind CSS and shadcn/ui for components'.
  • Include backend stub: 'Mock API endpoints with MSW or provide Prisma schema'.
  • Break into phases: '1. Core UI skeleton, 2. Feature modules, 3. Forum integration'.
  • Add output format: 'Provide complete Next.js project structure with code files'.

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