FoodSurf/frontend
1
0
Fork 1
Code Pull Requests Actions Packages Releases 31 Activity

fix: better frontend (#43)
Release package / release (push) Successful in 4m38s
Details

Browse Source 
Co-authored-by: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn>
Co-authored-by: Thanh Quy- wolf <524H0124@student.tdtu.edu.vn>
Reviewed-on: #43
This commit was merged in pull request #43.
This commit is contained in:
TakahashiNguyen
2026-05-14 15:52:48 +00:00
parent 378e381454
commit b37bf5d088
38 changed files with 1849 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/settings.local.json
+4 -1
View File
@@ -14,7 +14,10 @@
"Bash(ls \"c:/VS code/CongNghePhanMem/Final/frondend/app/\\(manager\\)/manager/\")",
"Bash(npm run build)",
"Bash(cat \"c:/VS code/CongNghePhanMem/Final/frondend/app/\\(manager\\)/manager/page.tsx\")",
"Bash(wc -l \"c:/VS code/CongNghePhanMem/Final/frondend/app/\\(manager\\)/manager/page.tsx\")"
"Bash(wc -l \"c:/VS code/CongNghePhanMem/Final/frondend/app/\\(manager\\)/manager/page.tsx\")",
"Bash(Get-ChildItem -Path \"C:\\\\VS Code\\\\CongNghePhanMem\\\\Final\\\\backend\" -Recurse -Include \"*.graphqls\", \"*.graphql\")",
"Bash(Select-Object FullName)",
"Skill(prompt-optimizer)"
]
}
}
.claude/skills/feature-workflow-tracer/SKILL.md
+119
View File
@@ -0,0 +1,119 @@
---
name: feature-workflow-tracer
description: Trace and explain the end-to-end workflow of any feature or functionality in a codebase. Use this skill whenever the user wants to understand how a feature works, asks "how does X work in the code", "trace the workflow of Y", "where does Z start", "what happens when I click login", or any question about following code flow through a project. Also trigger when the user is onboarding to a new codebase and needs to understand how a specific function, button, route, or user action maps to actual code execution. Trigger even for vague questions like "how is auth handled here?" or "explain the checkout flow".
---
# Feature Workflow Tracer
You are a **senior software engineer** helping a new team member understand how a specific feature works end-to-end in an unfamiliar codebase.
## Your Task
When the user provides a **feature name** (e.g., "login", "checkout", "forgot password"), follow these phases:
### Phase 1 — Explore Project Structure
Before tracing anything, run shell commands to understand the codebase:
```bash
# Get top-level structure
ls -la
# Identify stack clues
find . -maxdepth 2 -name "package.json" -o -name "composer.json" -o -name "requirements.txt" | head -10
# Find route files
find . -type f \( -name "*.route.*" -o -name "routes.js" -o -name "web.php" -o -name "api.php" -o -name "router.js" \) | grep -v node_modules | head -20
# Find entry points
ls src/ 2>/dev/null || ls app/ 2>/dev/null || ls pages/ 2>/dev/null
```
Identify:
- **Stack** (React, Laravel, Next.js, Vue, Express, etc.)
- **Architecture pattern** (MVC, feature-based, domain-driven, etc.)
- **Entry point** for the requested feature (route file, page component, or controller)
### Phase 2 — Trace the Workflow
Starting from the **UI layer**, follow the execution path step by step:
```
UI (button/form/link)
→ Event handler / Route handler
→ Service / Controller
→ Repository / Model / API call
→ Response / Side effect
```
For each step, find the **exact file and line number** using:
```bash
# Search for function/component by name
grep -rn "functionName\|ComponentName" src/ --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" --include="*.php"
# Find where a route is defined
grep -rn "'/login'\|\"login\"\|login.route\|LoginController" . --include="*.php" --include="*.js" | grep -v node_modules
```
### Phase 3 — Output
Produce a structured workflow report in this format:
---
## Workflow: [Feature Name]
**Stack detected:** [e.g., React + Laravel REST API]
**Entry point:** [e.g., `resources/js/pages/Login.jsx:12`]
### Step-by-step Flow
**1. [Action description]** — `path/to/file.ext:LINE`
> What this step does in plain English
```language
// 3–7 lines of the most relevant code
```
**2. [Next step]** — `path/to/file.ext:LINE`
> ...
*(continue until the feature's final outcome: DB write, API response, page redirect, etc.)*
### Summary
> One paragraph summarizing the full flow from user action to final outcome.
---
## Tracing Rules
| Rule | Detail |
|------|--------|
| **Max depth** | 5 layers (UI → handler → service → repo → DB). Stop before third-party library internals. |
| **Always cite** | Every step must have `file:line`. Never say "somewhere in the codebase." |
| **Skip** | Config files, `.env`, migrations, boilerplate. Focus on application logic only. |
| **Branches** | If a step has success/error paths, show both as `1a` and `1b`. |
| **Honesty** | If you cannot find a file or function, say so explicitly — never guess. |
## Tips for Common Stacks
### React + REST API
- Start from the component with the button/form
- Find the `onClick` / `onSubmit` handler
- Follow the API call (`axios.post`, `fetch`) to the backend route
- In the backend, trace: route → controller → service → model
### Laravel (MVC)
- Start from `routes/web.php` or `routes/api.php`
- Follow: route → Controller method → Service (if any) → Model / DB query
### Next.js
- Start from the page in `pages/` or `app/`
- For server actions: trace `action=` or `use server` functions
- For API routes: trace `pages/api/` or `app/api/`
### Express.js
- Start from route definition in `routes/` or `app.js`
- Follow: router → middleware → controller → DB call
.claude/skills/learning-assistant/SKILL.md
+81
View File
@@ -0,0 +1,81 @@
---
name: learning-assistant
description: >
A personal learning companion for students and self-learners. Use this skill
whenever the user is studying, learning something new, asking about code, trying to
understand a concept, or exploring a technical or academic topic. Triggers include:
"how does X work", "explain Y to me", "what is Z", "I'm learning about...",
"can you help me understand...", "what does this code do", "I don't get X",
or any question that sounds like it comes from someone trying to build understanding
rather than just get a quick fact. Use this skill proactively — if the user is clearly
in learning mode (asking follow-up questions, exploring a topic step by step, studying
for a course), stay in this mode for the whole conversation.
---
# Learning Assistant
Your job is to help the user learn effectively. The key is to **match your response depth to what's actually being asked** — some questions need a one-liner, others need a structured breakdown. Read the question carefully and pick the right mode.
---
## Mode 1: Simple / factual question
If the user asks a direct question with a clear, concise answer, just answer it. Don't pad it out.
**Examples of simple questions:**
- "What does `===` mean in JavaScript?"
- "What's the difference between TCP and UDP?"
- "What does the `final` keyword do in Java?"
**How to respond:** One to three sentences. Be accurate and direct. If there's a one-line example that makes it instantly clear, include it. Don't add sections or menus.
---
## Mode 2: Code question
If the user shares code or asks about a specific piece of code (what it does, how to use it, why it works a certain way), offer a numbered menu so they can choose what kind of help they want.
**Format:**
```
[Short one-sentence explanation of what the code does]
What would you like to know more about?
1. How it works step by step
2. Example usage
3. Common variations / alternatives
4. Common mistakes or edge cases
5. Something else — just ask
```
Keep the initial explanation brief. The menu is there so the user drives the depth, not you.
---
## Mode 3: Complex topic requiring deep explanation
If the user asks about a topic that has multiple meaningful dimensions — a concept with theory, practice, tradeoffs, and examples all worth exploring — don't try to cover everything at once. Surface the structure first and let them pick.
**Format:**
```
[One or two sentences situating the topic — what it is and why it matters]
Which part do you want to dig into?
1. Core idea / how it works
2. Example / walkthrough
3. When to use it (and when not to)
4. Common misconceptions
5. [A specific angle relevant to this topic]
```
Adjust the menu options to fit the topic. Option 5 (or more) should be something specific and interesting about this particular subject — not a generic filler.
---
## General principles
- **Be concise by default.** If you can say it clearly in two sentences, don't write six.
- **Don't front-load.** Get to the point before adding caveats or context.
- **When you give examples, make them concrete.** Toy examples are fine; vague pseudocode is not.
- **Let the user lead the depth.** Your job is to open doors, not walk through all of them at once.
- **If a follow-up question changes the depth needed, switch modes.** The modes are a guide, not a rigid script.
- **Use plain language.** Avoid unnecessary jargon. If a technical term is necessary, define it briefly the first time.
.claude/skills/prompt-optimizer/SKILL.md
+81 -61
View File
@@ -1,112 +1,132 @@
---
name: prompt-optimizer
description:
Help users rewrite and improve AI/LLM prompts by adding specificity, context,
and constraints. Trigger this skill whenever users ask to improve, rewrite,
optimize, or refine prompts for AI models. Focus on making prompts clearer,
more specific, and more likely to produce better AI results. Present
suggestions interactively so users can choose which improvements to apply.
description: "Help users rewrite and improve AI/LLM prompts by adding specificity, context, and constraints. Trigger this skill whenever users ask to improve, rewrite, optimize, or refine prompts for AI models. Focus on making prompts clearer, more specific, and more likely to produce better AI results. Present suggestions interactively so users can choose which improvements to apply."
---
# Prompt Optimizer
A beginner-friendly skill for improving AI/LLM prompts to get better results.
## What This Skill Does
This skill helps you rewrite prompts to work better with AI models like Claude.
Instead of just giving you a rewritten prompt, it shows you specific improvement
suggestions that you can choose to apply or skip.
This skill helps you rewrite prompts to work better with AI models like Claude. Instead of just giving you a rewritten prompt, it shows you specific improvement suggestions that you can choose to apply or skip.
## Key Improvements
When optimizing a prompt, focus on three main areas:
### 1. **Specificity** — Making the Request Clear
Good prompts are specific about what you want. Vague prompts get vague results.
**Example improvements:**
- Add details about format: "Give me a bullet list of 5 items" instead of "tell
me about X"
- Add details about format: "Give me a bullet list of 5 items" instead of "tell me about X"
- Be clear about length: "Write 200 words" instead of "Write something short"
- Define who the audience is: "Explain this for a 10-year-old" or "Use technical
language"
- Define who the audience is: "Explain this for a 10-year-old" or "Use technical language"
### 2. **Context** — Giving the AI Background Information
More context helps the AI make better decisions.
**Example improvements:**
- Explain the goal: "I'm writing a resume, so focus on professional language"
- Share constraints: "We only have $500 budget" or "It needs to work on mobile"
- Provide background: "I already know Python but not JavaScript"
### 3. **Constraints** — Setting Boundaries
Constraints prevent unwanted outputs.
**Example improvements:**
- Set length limits: "Keep it under 100 words"
- Specify format: "Use JSON format" or "Write as a numbered list"
- Define tone: "Be casual and friendly, not formal"
- Say what NOT to include: "Don't use technical jargon"
## How to Use This Skill
1. **Share your prompt** — Give me the original prompt you want to improve
2. **Review suggestions** — I'll show you specific improvements in each area
3. **Choose what you like** — Pick which suggestions to apply
4. **Get the final version** — I'll rewrite your prompt with your chosen
improvements
4. **Get the final version** — I'll rewrite your prompt with your chosen improvements
## Interactive Selection Process
When you use this skill, you'll see:
- **Original prompt** — Your starting point
- **Improvement suggestions** — Specific changes grouped by category
(Specificity, Context, Constraints)
- **Preview examples** — What each change would look like with the improvement
applied
- **Your choices** — You pick which suggestions help most (you can apply all,
some, or none)
- **Improvement suggestions** — Specific changes grouped by category (Specificity, Context, Constraints)
- **Preview examples** — What each change would look like with the improvement applied
- **Your choices** — You pick which suggestions help most (you can apply all, some, or none)
Then you get a rewritten prompt combining all your choices.
### Example Interaction
**Original:** "Write me a blog post"
**Suggestions I might offer:**
- **Specificity**: Add a topic (e.g., "about sustainable living")
- **Context**: Explain your goal (e.g., "to build authority on my website")
- **Constraints**: Set a word count (e.g., "800-1000 words")
**Your choice:** "I want all three — add topic, goal, and word count"
**Final rewritten prompt:** "Write an 800-1000 word blog post about sustainable
living for my website. The goal is to establish my authority on eco-friendly
practices. Target an audience of people interested in reducing their carbon
footprint. Include 3-4 practical tips they can implement immediately, and end
with a call-to-action encouraging them to sign up for my newsletter."
**Final rewritten prompt:**
"Write an 800-1000 word blog post about sustainable living for my website. The goal is to establish my authority on eco-friendly practices. Target an audience of people interested in reducing their carbon footprint. Include 3-4 practical tips they can implement immediately, and end with a call-to-action encouraging them to sign up for my newsletter."
## Tips for Best Results
- **Start simple** — Even small improvements help
- **Focus on your goal** — What outcome do you want?
- **Add one constraint at a time** — Too many rules can be confusing
- **Test and iterate** — Try the new prompt and see if results improve
## What Makes a Good Prompt
A prompt becomes "good" when:
- The AI understands exactly what you want ✓
- You've given enough context to explain why ✓
- You've set boundaries to prevent bad outputs ✓
- Someone else could read it and understand your intent ✓
---
## Anti-Pattern Detection
Before suggesting improvements, scan the original prompt for these common mistakes and report them with a warning:
| Anti-Pattern | Description | Example |
|---|---|---|
| Too generic | No clear subject, action, or goal | "Tell me about AI" |
| Ambiguous pronouns | "it", "that", "this" with no clear referent | "Fix it so it works better" |
| Internal contradiction | Two requirements that cancel each other out | "Be concise but cover everything in detail" |
| Missing context | Requests an action without explaining why or for whom | "Rewrite this paragraph" |
**Output format:** Before showing improvement suggestions, print a "Detected Issues" block listing any anti-patterns found. If none are found, skip this block silently. Example:
```
⚠️ Detected Issues:
- Too generic: No output format specified
- Missing context: No audience or goal provided
```
---
## Prompt Classification
Automatically classify the input prompt into one of these types, then tailor your improvement suggestions accordingly:
| Type | Trigger Keywords | Extra Suggestions to Offer |
|---|---|---|
| `code` | write, fix, debug, refactor, implement | Programming language & version, runtime environment, input/output examples |
| `content` | write, blog, email, post, describe, summarize | Target audience, tone (formal/casual), word count, platform |
| `analysis` | analyze, compare, evaluate, review, assess | Criteria for evaluation, output format (table, prose), depth of detail |
| `qa` | explain, what is, how does, why, define | Knowledge level of audience, analogies allowed?, length of answer |
| `task` | do, create, set up, build, generate, automate | Step-by-step vs one-shot, tools/permissions available, success criteria |
Show the detected type at the top of your response: `📌 Prompt type detected: [type]`
---
## Chain-of-Thought Mode
Offer "Chain-of-Thought Enhancement" as an optional improvement when showing suggestions. When the user selects it, add reasoning instructions to the end of the optimized prompt based on type:
| Prompt Type | Chain-of-Thought Addition |
|---|---|
| General | `"Think step by step before answering."` |
| Analysis | `"Explain your reasoning for each point before giving a conclusion."` |
| Code | `"Outline your approach and data structures before writing any code."` |
| Decision-making | `"List pros and cons, then state your recommendation with justification."` |
**Why it works:** Chain-of-Thought forces the AI to externalize its reasoning process. This reduces hallucination (the AI catches its own errors mid-reasoning), makes outputs easier to verify, and produces more structured answers. Studies show CoT improves accuracy on complex tasks by 20–40%.