Skip to main content
Prompts GitHub Portfolio Dashboard Developer

developer coding template risk: low

GitHub Portfolio Dashboard Developer

The prompt instructs the model to act as a professional dashboard developer and build a responsive GitHub portfolio dashboard using React, JavaScript, and CSS, showcasing top repos…

PROMPT 

Act as a Professional Dashboard Developer. You are skilled in creating user-friendly and visually appealing dashboards using modern web development technologies.\n\nYour task is to build a comprehensive and professional dashboard for a GitHub portfolio. This dashboard should:\n- Showcase top repositories with detailed descriptions and visuals\n- Include sections for skills, projects, and contributions\n- Be designed with a responsive layout to ensure accessibility on all devices\n- Utilize technologies such as ${technology:React}, ${technology:JavaScript}, and ${technology:CSS}\n\nRules:\n- Maintain a consistent design theme that aligns with professional standards\n- Ensure the dashboard is easy to navigate and interact with\n- Provide clear and concise information to attract potential employers\n\nVariables:\n- ${githubUsername} - The GitHub username to fetch repository data\n- ${theme:light} - The theme preference for the dashboard

INPUTS

githubUsername REQUIRED

The GitHub username to fetch repository data

e.g. octocat

technology REQUIRED

Technologies such as React, JavaScript, CSS to utilize in the dashboard

e.g. React

theme

The theme preference for the dashboard

e.g. light

REQUIRED CONTEXT

  • github username

OPTIONAL CONTEXT

  • theme preference
  • technologies

ROLES & RULES

Role assignments

  • Act as a Professional Dashboard Developer.
  1. Maintain a consistent design theme that aligns with professional standards
  2. Ensure the dashboard is easy to navigate and interact with
  3. Provide clear and concise information to attract potential employers

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Showcase top repositories with detailed descriptions and visuals
  • Include sections for skills, projects, and contributions
  • Be designed with a responsive layout to ensure accessibility on all devices
  • Utilize technologies such as React, JavaScript, and CSS

FAILURE MODES

  • May not properly integrate GitHub repository data fetching
  • Might overlook variable substitutions for username, theme, and technologies

CAVEATS

Dependencies
  • ${githubUsername} - The GitHub username to fetch repository data
  • ${theme:light} - The theme preference for the dashboard
  • ${technology:React}, ${technology:JavaScript}, ${technology:CSS} - Technologies to utilize
Missing context
  • GitHub API details or authentication for fetching repo data.
  • Definition of 'skills' content and how to source it.
  • Expected file structure or delivery format for the dashboard.
  • Browser compatibility or specific responsive breakpoints.
Ambiguities
  • 'Top repositories' lacks criteria for selection or number to showcase.
  • 'Detailed descriptions and visuals' is vague on what visuals (e.g., screenshots, stars?).
  • Source of data for 'skills' and 'contributions' sections not specified.
  • No explicit output format (e.g., code files, single HTML, React app structure).

QUALITY

OVERALL
0.80
CLARITY
0.90
SPECIFICITY
0.80
REUSABILITY
0.90
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Specify 'top repositories' as e.g., 'top 5 by stars, sorted descending'.
  • Add 'Output a complete, self-contained React app in a single index.html file with embedded styles and scripts.'
  • Include placeholder like '${skillsList:React,Node.js,...}' for skills section.
  • Clarify data fetching: 'Use GitHub REST API v3 with public access for ${githubUsername} repositories.'

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