| name | burgerprints-fe-taste-skill |
| description | Project-specific frontend implementation skill for BurgerPrintsAgent UI. Use the existing design brief in docs/skill_FE/design.md, then apply Taste Skill anti-slop frontend rules for high-quality, accessible UI implementation. |
BurgerPrintsAgent Frontend Skill
Use this skill when implementing or redesigning the frontend/chat UI for this project.
Required inputs
Before writing frontend code, read:
docs/skill_FE/design.md - project design tokens, typography, colors, component rules, accessibility checklist.docs/skill_FE/taste-skill/skills/taste-skill/SKILL.md - Taste Skill anti-slop frontend implementation rules.
Optional references:
docs/skill_FE/taste-skill/skills/image-to-code-skill/SKILL.md for image-to-code workflows.docs/skill_FE/taste-skill/skills/redesign-skill/SKILL.md for improving an existing UI.docs/skill_FE/taste-skill/skills/soft-skill/SKILL.md if the UI should feel calmer and more premium.
Design read for this project
Read this as: a seller-facing BurgerPrints/POD assistant UI for Vietnamese and international sellers, with a practical SaaS/productivity language, leaning toward accessible React UI, strong BurgerPrints orange CTA, clean cards, and decision-ready commerce data.
Non-negotiable project tokens
Use design.md as the source of truth:
- Primary font:
SVN-Gilroy, Gilroy, then system fallback.
- Brand orange:
#f26522 for primary CTA and active emphasis.
- Primary text:
#0f172a.
- Secondary text:
#94a3b8.
- Card surface:
#ffffff.
- Section/muted surface:
#f8fafc.
- Radius and spacing must come from the token scale in
design.md.
Do not introduce a second orange, random AI-purple gradients, generic glassmorphism, or untracked pixel values unless the design brief is updated.
UI priorities
The frontend should make these flows easy:
- Seller asks a natural-language BurgerPrints question.
- Agent asks for destination market when needed.
- User sees suggested questions by market/month.
- User sees SKU recommendation table with cost, shipping, delivery, carrier, SLA, profit/margin when available.
- User can start a sandbox order draft only after a recommendation.
- Final create-order action remains explicit and safe.
Suggested question UI rules
Suggested questions should appear as compact chips/buttons near the chat input or onboarding state.
They should support:
- Market-aware prompts: US, CA, UK, AU, VN, EU.
- Month/season-aware prompts.
- Product prompts: T-shirt, hoodie, sweatshirt, mug, tank top.
- Clear click behavior: clicking a suggestion sends it to
/agent/chat as the message.
Example chips:
Mùa này ở US nên bán áo gì?
Gợi ý niche POD cho US tháng này
Sắp tới ở US có event nào nên làm design?
Tìm SKU T-shirt phù hợp bán ở US mùa hè
Component rules
Primary button
- Use BurgerPrints orange from
design.md.
- Include hover, focus-visible, active, disabled, and loading states.
- Never remove focus outline unless a custom visible focus state replaces it.
Chat input
- Must be keyboard accessible.
- Enter sends message; Shift+Enter creates newline if multiline is supported.
- Loading state must prevent duplicate sends.
Recommendation table/card
- Keep SKU, product, supplier, base cost, shipping, total cost, delivery, carrier, SLA visible.
- Use horizontal scroll on small screens instead of shrinking text too much.
- Long product names must truncate with ellipsis.
Order draft summary
- Never display raw PII after capture if backend returns masked summary.
- Make final confirmation visibly separate from ordinary “ok/yes” responses.
Implementation checklist
Before reporting frontend work complete:
- Verify the UI uses
design.md tokens.
- Verify responsive behavior at mobile and desktop widths.
- Verify keyboard focus order.
- Verify suggested question click sends the expected chat message.
- Verify missing-country clarification is visible and does not show create-order CTA.
- Verify recommendation response can lead to sandbox order draft.
- Run the available frontend test/build command if the frontend project defines one.
