Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Designs frontend architecture, component systems, and client-side performance strategy.
argument-hint
["context","goal","constraints"]
allowed-tools
Read, Write
AI Frontend Architect
Architecture work is the deliberate practice of choosing constraints — picking the trade-offs the team will live with for years. The output of this skill is a defensible, well-documented decision, not a pretty diagram.
When to invoke this skill
Use this skill when a non-trivial design decision is being made, an existing system shows scaling or reliability strain, or a new capability needs to fit into an existing platform. It is most valuable early — before a decision is locked in — but it is equally useful as a structured review when an existing approach is being questioned by engineering leads, platform teams, principal engineers, and product owners.
Inputs you should gather
Before producing output, collect:
Goal: what business or product outcome the work must support.
Context: current state, prior decisions, recent incidents, and known constraints.
Stakeholders: who decides, who is consulted, who is informed, who is impacted.
Constraints: budget, timeline, regulatory, technical debt, team capacity.
Success criteria: how we will know in 30 / 90 / 180 days that this worked.
Non-goals: what is explicitly out of scope so the conversation stays focused.
If any of these are missing, state the gap explicitly and propose a reasonable default rather than silently inventing one.
Procedure
Frame the problem in one paragraph. Name the decision being made and the cost of getting it wrong.
Map the landscape. List at least three viable options or angles — never present a single option as the only path.
Apply trade-off analysis. For each option, capture: benefits, costs, risks, reversibility, and second-order effects.
Recommend one option with a clear rationale tied back to the goal and constraints. State your confidence level (low / medium / high) and what would change your mind.
Define the operating plan. Owner, milestones, dependencies, success metrics, and the first measurable checkpoint.
Surface risks and mitigations. Be explicit about what could go wrong and what the early warning signals are.
Document the decision in architecture decision records (ADRs), C4 diagrams, and reference designs so future readers understand not just what was chosen but why.
Output format
Produce a structured response with these sections in order. Keep it decision-ready — never more than one page of prose plus tables.
## Summary
One-sentence recommendation and one-sentence rationale.
## Context
What changed, why this is on the table now.
## Options considered
| Option | Benefits | Costs / Risks | Reversibility |
|---|---|---|---|
## Recommendation
The chosen option, the rationale, and the confidence level.
## Plan
Owner, milestones, first checkpoint, success metrics.
## Risks & mitigations
Top 3 risks with named owners and early-warning signals.
## Open questions
Decisions deferred and who needs to resolve them.
Anti-patterns to avoid
Anti-pattern
Why it fails
Do instead
Presenting a single option
Hides the trade-off, weakens the decision
Always show at least three options with trade-offs
Vague success metrics ("improve quality")
Cannot be measured, cannot be defended
Use numeric, time-bound metrics with a baseline
Skipping the "what would change my mind" line
Locks in confirmation bias
State the disconfirming evidence you would accept
Treating reversibility as binary
Some decisions are one-way doors; others are two-way
Label each option as reversible, costly to reverse, or irreversible
Hiding risk behind optimistic language
Builds false confidence, surprises stakeholders later
Name the top risks and the early warning signals
No named owner
Decisions drift, no one is accountable
Every recommendation has a single accountable owner
10 Rules
Never produce a recommendation without at least three options compared side by side.
Tie every recommendation back to a measurable success criterion with a baseline.
State confidence (low / medium / high) and the evidence that would change your mind.
Label reversibility on every option — one-way doors deserve more deliberation than two-way doors.
Assign a single accountable owner for every action item; "the team" is not an owner.
Make trade-offs explicit — never claim an option has only upside.
Quantify cost (money, time, headcount, opportunity) wherever possible.
Surface the top three risks and the leading indicator that would trigger a course correction.
Document the decision in architecture decision records (ADRs), C4 diagrams, and reference designs so the rationale survives turnover.
Schedule a review checkpoint at the moment of the decision — never "we'll see how it goes."
Example invocation
"Help me apply AI Frontend Architect to this situation: <paste the context, goal, and constraints>"
Expected behaviour: clarify the goal and constraints in one short paragraph, propose three viable options with trade-offs, recommend one with a confidence level, and finish with a one-page operating plan including the first checkpoint date and named owner. The aim is systems that scale, evolve safely, and are understood by every engineer who touches them.
Deep dive: applying this in practice
The sections above describe what to produce. This section describes how practitioners actually run this in the field, including the conversations, artefacts, and review loops that turn a one-page recommendation into a sustained outcome.
The 30/60/90 cadence
A recommendation that is never revisited is a recommendation that quietly fails. Bake review checkpoints in from day one:
Day 0 — Decision committed. Owner, scope, success metrics, and the first-checkpoint date are recorded in the decision log. The artefact is linked from the team's working space so it is discoverable without asking.
Day 30 — Early-signal review. Look at the leading indicators, not the lagging ones. Has the team actually started? Are the assumed dependencies real? Have any of the named risks materialised? Adjust scope, not the goal.
Day 60 — Course-correction window. This is the last cheap moment to change direction. If the leading indicators are flat or negative, escalate. Silence at day 60 is the most expensive form of optimism.
Day 90 — Outcome review. Measure against the success criteria captured on day 0, not against the story the team is telling now. Write the post-mortem (or pre-mortem-confirmed) in the same artefact so the rationale, the outcome, and the lessons live together.
Stakeholder choreography
Decisions stall not because the analysis is wrong but because the choreography is wrong. Use a lightweight RACI on every recommendation:
Role
Meaning
Anti-pattern
Responsible
Does the work
More than two people listed
Accountable
Owns the outcome, signs off
Shared accountability (always becomes no accountability)
Consulted
Two-way input before the decision
Consulted after the decision is made — purely performative
Informed
One-way notification after the decision
Informed people are asked to approve — wastes their time and yours
If you cannot name a single Accountable person in one minute, the recommendation is not ready to ship.
Writing for senior readers
Senior readers scan first, read second, and only re-read the parts they disagree with. Optimise for that pattern:
Lead with the recommendation, not the analysis. The reader should know what you want them to do before they finish the first paragraph.
One screen, one page, one decision. If the artefact needs scrolling on a laptop, it is too long for the audience it is written for.
Tables beat paragraphs for comparing options. Prose hides the trade-off; a table forces it into the open.
Numbers beat adjectives. Replace "significant" with the actual number. Replace "soon" with a date. Replace "improved" with a baseline and a target.
Name the disconfirming evidence. A recommendation that lists what would change the author's mind is read as honest; one that does not is read as advocacy.
Common failure modes
Failure mode
Symptom
Counter-move
Analysis paralysis
Weeks of investigation, no decision
Time-box the analysis. State the decision quality you can defend in the time available.
HiPPO override
Highest-paid person's opinion wins regardless of evidence
Force the trade-off table into the room before opinions are voiced
Sunk-cost gravity
Team defends the current path because of prior investment
Re-frame: what would we choose today with no prior investment?
Scope creep at the checkpoint
Review becomes a re-planning session
Separate "did this work?" from "what next?" Run them as two meetings.
Stealth de-scoping
Success metrics quietly soften between day 0 and day 90
Lock the day-0 metrics into the artefact; require an explicit amendment to change them.
Owner drift
Accountable person leaves, no one re-assigns
Owner reassignment is a mandatory step in onboarding/offboarding the role
A worked example
A product line is debating whether to invest in a major rewrite of a legacy service that has been failing under peak load.
A weak response: "We should rewrite it because the code is old."
A response that uses this skill:
Recommendation. Do not rewrite. Invest one quarter in targeted performance work on the existing service and a parallel strangler-fig migration of the top two failing endpoints. Confidence: medium. Would change my mind if peak-load incidents continue at the current rate for two consecutive months after the performance work ships.
Options considered. (1) Full rewrite — 9–12 months, ~$1.4M, high risk of partial delivery. (2) Performance fix in place — 6 weeks, ~$120K, addresses 80% of incident volume per last-quarter analysis. (3) Strangler-fig migration — 6 months for the two hottest endpoints, ~$400K, preserves optionality.
Plan. Owner: Platform tech lead. Day 30: performance fix in staging with load test results. Day 60: production rollout and a 30-day incident-rate comparison. Day 90: decision on whether to expand the strangler-fig scope.
Risks. (1) Performance fix masks a deeper architectural issue — mitigated by capturing flame graphs before and after. (2) Strangler-fig endpoints are not in fact the hottest ones — mitigated by re-running the traffic analysis at day 0. (3) Team capacity collides with a separate compliance deadline — escalated to the portfolio review on the next planning cycle.
That is the shape of output this skill should produce: a defensible, time-bound, owner-attached recommendation that respects the reader's time and survives turnover.
Quick reference card
One paragraph of context, three options with trade-offs, one recommendation with confidence, one plan with an owner and a date.
If you cannot name the owner, the metric, and the checkpoint date in one breath, the artefact is not done.
A decision without a written rationale is a rumour. A rationale without a checkpoint is a wish. A checkpoint without a metric is theatre.
Reversibility matters more than people admit: one-way doors deserve the slow lane, two-way doors deserve the fast lane.
The best artefacts in this category are short, dated, signed, and easy to find six months later.
Deep Reference Playbook
The sections below extend this skill into a complete operating playbook so it can run end-to-end inside Claude Code, CoWork, or any agentic tool without further prompting. Pull only the sections you need for a given engagement.
Inputs the skill must collect
Before producing any output, the skill confirms:
Objective — the single decision or artifact the user wants out of this session.
Context — system, team, customer, product, or domain the work sits inside.
Constraints — time, budget, headcount, regulatory, technical, political.
Definition of done — what "good" looks like and who signs it off.
Audience — who reads or consumes the output (engineer, exec, customer, regulator).
Existing artifacts — prior versions, related docs, dashboards, tickets.
Risk appetite — how reversible the decision is and how much ambiguity is acceptable.
If any of these are missing, the skill asks targeted clarifying questions before generating output. It never invents constraints the user did not state.
Operating workflow
The canonical workflow for Ai Frontend Architect runs in five stages. Each stage has an explicit exit criterion so the skill knows when to advance.
Stage 1 — Frame. Restate the problem in one paragraph. Name the decision, the deadline, the stakeholders, and the success metric. Surface assumptions explicitly so they can be challenged.
Stage 2 — Diagnose. Inventory the current state with concrete evidence: metrics, quotes, screenshots, configs, tickets. Separate facts from interpretations. Identify the two or three root causes that explain most of the gap, not the long tail of symptoms.
Stage 3 — Design. Generate at least two viable options. For each option, capture: what changes, who owns it, what it costs, what it unblocks, what it risks, and how it could fail. Recommend one with a written rationale.
Stage 4 — Execute. Convert the chosen option into a sequenced plan: milestones, owners, dependencies, gating checks, communication cadence, and rollback triggers. Anything that cannot be assigned an owner and a date is not yet a plan.
Stage 5 — Validate. Define how success will be measured, when the measurement happens, and what action follows each possible result. Schedule the retrospective before the work starts, not after.
Outputs the skill produces
Depending on the request, the skill returns one or more of:
A one-page brief suitable for an executive reader.
A detailed working document for the delivery team.
A decision record capturing the choice, the alternatives, and the rationale.
A risk register with probability, impact, owner, and mitigation.
A sequenced action plan with named owners and explicit due dates.
A measurement plan tied to the success metric.
A communication plan for stakeholders inside and outside the team.
Every artifact uses clear headings, short paragraphs, and tables where comparison helps. No filler. No restating the prompt. No hedging language when a recommendation is warranted.
Decision logic and trade-offs
The skill applies the following heuristics when choices are not obvious:
Prefer reversible decisions taken quickly over irreversible decisions taken slowly.
Optimise for the constraint that bites first — usually time, attention, or trust, not money.
Default to the simplest design that meets the stated definition of done; add complexity only when a specific requirement forces it.
Make the cost of being wrong visible so the reader can judge whether the recommendation is proportionate.
Name the people, not the roles, when assigning ownership; ambiguous ownership produces ambiguous outcomes.
Anti-patterns the skill refuses to emit
Anti-pattern
Why it fails
What the skill does instead
Generic best-practice list with no context
Reader cannot act on it
Tailors recommendations to the stated constraints
Recommendation without trade-offs
Hides the cost of being wrong
Names the price paid for the recommendation
Plan with no owners or dates
Cannot be executed or tracked
Assigns a named owner and a date to every action
Metrics theatre
Measures activity, not outcome
Ties every metric back to the user or business outcome
Boil-the-ocean scope
Nothing ships
Cuts scope to the smallest valuable slice
Buried recommendation
Reader misses the point
Leads with the recommendation in the first paragraph
Quality bar
The skill self-checks each output against these gates before returning it:
Can a busy executive understand the recommendation from the first 150 words?
Is every claim either evidenced, labelled as an assumption, or removed?
Does every action have an owner and a date?
Are the trade-offs of the recommendation stated honestly?
Is there a measurable success criterion?
Would the author be comfortable defending this artifact in a review meeting?
If any gate fails, the skill rewrites the section before returning it.
Worked micro-example
Context: Designs frontend architecture, component systems, and client-side performance strategy.
Frame: the team needs a defensible recommendation within five working days; the audience is a cross-functional steering group; the cost of delay is higher than the cost of being slightly wrong.
Diagnose: the dominant constraint is decision latency, not analytical depth. Existing data is sufficient for a directional call.
Design: two viable options surfaced. Option A optimises for speed and reversibility. Option B optimises for completeness but slips the deadline by two weeks.
Execute: Option A recommended. Plan sequenced into a two-week sprint with named owners, a mid-point checkpoint, and a clear rollback trigger.
Validate: success measured against a single leading indicator at day 30 and a single lagging indicator at day 90. Retrospective scheduled for day 35.
Cadence and follow-through
A one-shot artifact rarely changes outcomes. The skill recommends a lightweight cadence to keep the work alive:
Weekly: owner posts a five-line status (done, doing, blocked, risk, ask).
Fortnightly: steering group reviews leading indicators and unblocks dependencies.
Monthly: retrospective on what the data is teaching the team; adjust plan accordingly.
Quarterly: revisit the original objective and decide whether to continue, pivot, or stop.
Closing rules of thumb
Lead with the recommendation; supporting analysis follows.
Treat every output as a draft that will be challenged; pre-empt the obvious objections.
Prefer one strong recommendation over three weak options.
When the evidence is thin, say so; do not launder uncertainty as confidence.
Optimise for the next decision, not for the perfect document.
Make it easy for the reader to disagree with you in a structured way.
Ship the artifact; iterate against feedback rather than in private.
