Claude Code : UI

-

[Prompt 1 / Default Mode] :-

implement a /dashboard page which will contain a datepicker that defaults to the current date. this page will load all the logged workouts for the date displayed in the datepicker.

Influence Output of Claude Code

This could be skills.

[prompt 1 / edit mode]:

create a docs/ui.md file outlining the coding standards for the ui thoughout this entire project. the document should outline that ONLY shadcn ui components should be used for the ui in this project. ABSOLUTELY NO custom components should be created, ONLY use shadcn ui components.

date formatting should be done via date-fns. dates should be formatted like the following:

  • 1st Sep 2025
  • 2nd Aug 2025
  • 3rd Jan 2026
  • 4th Jun 2024

[prompt 2 / edit mode]:

update the CLAUDE.md file to highlight that all code generated by claude code should ALWAYS first refer to the relevant docs file within the /docs directory.

[prompt 3 / edit mode]:

create a /dashboard page with a datepicker set to the current date. this page should also show a list of workouts logged for the date within the datepicker. ONLY generate the UI for this page. DO NOT generate any data fetching or server side code just yet. JUST focus on the UI.


Comments

Post a Comment

Popular posts from this blog

Agentic AI Course : Week 1

-
Image
8 weeks https://edwarddonner.com/2024/11/13/llm-engineering-resources/  6 week Agentic AI Course https://github.com/ed-donner/agents the file .env has all the keys select kernel https://github.com/ed-donner/agents/blob/main/1_foundations/1_lab1.ipynb import os openai_api_key = os.getenv( 'OPENAI_API_KEY' ) from openai import OpenAI openai = OpenAI() messages = [{ "role" : "user" , "content" : "What is 2+2?" }] response = openai.chat.completions.create(      model= "gpt-4.1-nano" ,      messages=messages      ) print (response.choices[ 0 ].message.content) Day 2 : what are AI Agents? 5 different patterns for agentic systems https://lavnish.blogspot.com/2025/05/essential-design-patterns-for-building.html In General Day 3 comparing different models  https://www.vellum.ai/llm-leaderboard syntax to call diff LLMs openAI , anthropic, gemini, deepseek, groq https://github.com/ed-donner/agents/blob/main/1_foundations/2_lab2.ipynb...
Read more

LLM Engineering course : Day 1

-
Image
 Anaconda Power Shell    this will open , way you know if it is a anaconda power shell by seeing "base" Then you can install the full environment    then to activate use command "conda activate llms"     Open Ques "what is environment.yml" Then activate the conda environment and open jupyter lab   you can start with virtualenv as well (all details in readme) Video 11 : Day 1 every AI has 2 types of plan 1) pro plan with UI monthly subscription 2) API pricing , pay per request, for OPEN API need to put in 5$ pre payment (can use gpt4-o-mini for less cost)  (all details in readme)  Video 11:  store keys in .env files (all details in readme)  Video 14 there are two types of prompt   Video 15 OpenAI came up with a standard way of interacting with LLMs which is now standard for many LLMs. It is a list of dictionaries. Use completions API https://platform.openai.com/docs/guides/completions   For websites that use Java...
Read more

LLM Engineering : Week 2

-
Day 2.1 setup  anthropic api key google api key (more complex) update .env file     What is Temperature ?  Pass value between 0 to 1. 1 is most creative , 0 is least There is a slight difference in Claude API and OpenAI  in claude API we pass system message and user message separately in claude we also give context  if you want to stream , in claude there is an extra method , in openAI there is a boolean attribute.    Day 2.2 : Gradio         Day 2.3         Day 2.4 Day 2.5          
Read more