Front-end stack
The stack has to connect design, components, visual testing and client previews.
- Selection
- 10 3 optional
- Target budget
- $61 per month
- Profile
- Optimization business stage
Which tool does what?
RepoCore
GitHub
Keep in this stack: clear role, recurring use, direct impact on delivery.Document from the first project to stay maintainable.AI IDECore
Cursor
Keep in this stack: clear role, recurring use, direct impact on delivery.Document from the first project to stay maintainable.TypingCore
TypeScript
Keep in this stack: clear role, recurring use, direct impact on delivery.Document from the first project to stay maintainable.UICore
React
Keep in this stack: clear role, recurring use, direct impact on delivery.Document from the first project to stay maintainable.FrameworkCore
Next.js
Keep in this stack: clear role, recurring use, direct impact on delivery.Document from the first project to stay maintainable.CSSCore
Tailwind CSS
Keep in this stack: clear role, recurring use, direct impact on delivery.Document from the first project to stay maintainable.UI kitCore
shadcn UI
Keep in this stack: clear role, recurring use, direct impact on delivery.Document from the first project to stay maintainable.ControlIf needed
Storybook
Keep in this stack: clear role, recurring use, direct impact on delivery.Enable when volume, risk, or complexity justifies it.ControlIf needed
Framer Motion
Keep in this stack: clear role, recurring use, direct impact on delivery.Enable when volume, risk, or complexity justifies it.ControlIf needed
Playwright
Keep in this stack: clear role, recurring use, direct impact on delivery.Enable when volume, risk, or complexity justifies it.
Why these tools together?
The trap: mistaking a UI library for a design system. Without Storybook, tests and accessibility rules, components turn brittle. ToolTrim approach: one tool per role, one source of truth per topic, and guardrails before premium tooling.
A good fit if…
Interfaces, design systems, performance, accessibility and product integration.
Look elsewhere if…
You only want a generic tool list without delivery, monitoring, or maintenance logic.
Scope before coding
Brief, deliverables, limits, access, and acceptance criteria must be set before final tooling choices.
Deliver the full chain
Code, preview, tests, logs, documentation, and billing must be designed together.
Make handover possible
The client must understand what exists, where it is hosted, how to deploy, and what to monitor.
What should you budget?
The target budget is the recommended starting envelope. The list price adds up each core tool's first paid plan. Optional tools are not included.
What to watch out for
The trap: mistaking a UI library for a design system. Without Storybook, tests and accessibility rules, components turn brittle.
Overbuilt stack
A senior stack is not a huge stack. It removes as much as it adds.
No monitoring
Without errors, logs, and uptime, you discover issues through the client.
AI without guardrails
AI accelerates but does not replace tests, review, or technical judgment.
Several active clients
Standardize templates, checklists, conventions, and project onboarding.
Production risk
Add monitoring, alerts, backups, secrets, and tests before adding new frameworks.
Recurring maintenance
Move from one-shot delivery to a tracking system: changelog, tickets, light SLA, and monthly report.
Questions to ask yourself
Can the client see an up-to-date version without asking?
No → add preview, short changelog, and stable link in the project page.
Do you know what to monitor after production?
No → start with errors, uptime, useful logs, and the main business event.
Can the stack be explained to the client in five minutes?
No → it is probably too scattered or not documented enough.
