frontendchecklist.io

Front-end development is the work of turning a design into an interactive web interface: HTML for structure, CSS for presentation, and JavaScript for behavior. Knowing whether it's "ready to ship" is a separate skill — it means checking that work against defined quality dimensions (accessibility, performance, security, privacy, SEO, and more) rather than relying on a feeling that the page "looks done." A structured checklist is the practical way to do that check, because launch problems usually come from categories nobody remembered to review.

The core responsibilities

Front-end work splits into three layers, and each has its own quality concerns:

• HTML — semantic markup and document structure. Bad structure hurts accessibility and SEO before any styling is applied.
• CSS — styling, responsive design, and optimization. This is where layout breaks across viewports and where unused or duplicated rules accumulate.
• JavaScript — modern patterns and code organization. This is where behavior, state, and third-party dependencies live.

Around those three layers sit supporting concerns that are still front-end work: image optimization and responsive images, internationalization (localization, language, and translation workflows), and testing strategy.

The quality dimensions that decide "ready to ship"

A page can look finished and still fail on any of these. The Front-End Checklist organizes its corpus into 11 categories with 350+ rules, and the distribution is a useful signal of where review effort actually goes:

Two things stand out. First, accessibility and SEO carry the largest rule counts — they're broad, easy to get partially right, and easy to skip entirely. Second, the small categories (I18n, Privacy) are small in rule count but high in consequence: missing consent handling or a broken translation workflow is a launch blocker, not a polish item.

Why "it looks done" fails as a readiness test

The common failure points are consistent across projects:

• Accessibility treated as optional. Keyboard navigation, focus states, and contrast get deferred because they aren't visible in a screenshot.
• No performance budget. Pages pass on a fast local machine and fail Core Web Vitals on real devices and networks.
• Missing metadata. Title tags, descriptions, canonical URLs, and structured data are absent or inconsistent, so search visibility suffers silently.
• No cross-category review before release. Each developer checks their own area; nobody runs a single pass across HTML, SEO, security, and performance together.

The fix is procedural: review by category, item by item, instead of by intuition.

Using curated checklists instead of the full corpus

350+ rules is too much to apply uniformly to every release. The site provides curated, guided workflows aimed at different roles and moments:

• Launch Checklist — essential pre-deployment checks across HTML, SEO, security, and performance. 16 rules, roughly 45 minutes, marked for junior devs and launch workflows. Use it before a new site, a major redesign, or a high-risk release.
• SEO Audit — a search-visibility pass, 12 rules, roughly 30 minutes, for senior reviewers and AI-assisted audits. Use it when traffic, indexing, metadata quality, or editorial discoverability are active concerns.
• Performance Quick Wins — 8 high-impact optimizations that are relatively easy to implement. Use it when you want the biggest performance gains without a deep performance investigation.

The logic is to match the checklist to the situation: a routine deploy needs the launch set; a traffic drop needs the SEO audit; a slow site needs the performance set. Running all 350+ rules on every change is how checklists get abandoned.

Bringing the same standards into an AI workflow

The site exposes its rule corpus through an MCP server, so the same standards can be applied by AI tools rather than only by humans reading a list. If your team already uses AI-assisted code review, this lets the review reference the same structured rules instead of ad-hoc prompting. The practical benefit is consistency: the human checklist and the AI review draw on one corpus.

A workable readiness routine

1. Pick the checklist that matches the release type (launch, SEO, performance).
2. Work through it by category, not by file — finish accessibility before moving to performance.
3. For each rule, record pass/fail rather than "looks fine." The site tracks progress per category (for example, 0 / 95 for accessibility), which makes gaps visible.
4. Treat the small categories — Privacy and I18n — as blockers if your product collects user data or serves multiple locales.
5. Re-run the relevant checklist after any significant change, not just at first launch.

If you want to go deeper on the individual technologies, the checklist's category pages break down each area; for the broader context of what web development covers end to end, that's a separate question from whether a specific front end is ready to ship.

CSS (Cascading Style Sheets) is the language that controls how a web page looks and how its content is laid out. HTML defines what the content is (headings, paragraphs, links, images), while CSS defines how that content appears — colors, fonts, spacing, sizing, and where each element sits on the screen. You use CSS any time you want a page to look intentional rather than like a plain document of stacked text.

The three roles: structure, presentation, behavior

A useful way to keep web technologies straight is to separate them by job:

CSS is not a programming language in the sense of loops and logic — it is a declarative style language. You describe the result you want, and the browser figures out how to apply it.

How a CSS rule is written

A CSS rule has two parts: a selector that picks which elements to style, and a declaration block that lists the styles to apply.

/* selector: p  |  declarations inside { } */
p {
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
}

• p is the selector — it targets every <p> element.
• color, font-size, line-height, margin-bottom are properties.
• #333333, 16px, 1.5, 1em are the values.
• Each property–value pair ends with a semicolon; the whole block is wrapped in { }.

The word cascading in the name refers to how the browser resolves conflicts: when multiple rules target the same element, it follows priority rules (origin, specificity, and source order) to decide which one wins. That is why a later rule or a more specific selector can override an earlier one.

What CSS is commonly used for

• Color and typography — text color, background color, font family, size, weight, and line spacing.
• Spacing and sizing — margins, padding, width, height, and gaps between elements.
• Layout — arranging elements in rows, columns, grids, or flexible containers (Flexbox and Grid are the modern layout systems).
• Responsive design — changing the layout based on screen size using media queries, so a page works on both phones and desktops.
• Visual states — hover, focus, and active styles for links and buttons.
• Borders, shadows, and rounded corners — the decorative details that shape a page's look.

Three ways to attach CSS to HTML

1. External stylesheet (most common) — a separate .css file linked from the HTML <head>:

   <link rel="stylesheet" href="styles.css">
   

   This is preferred because one file can style an entire site, and the browser can cache it.

2. Internal stylesheet — a <style> block inside the HTML <head>. Useful for a single page or quick testing.

3. Inline styles — a style attribute directly on an element, such as <p style="color: red;">. It applies to that one element only and is hard to maintain at scale, so it is generally reserved for one-off cases.

How CSS fits with the rest of a page

When a browser loads a page, it reads the HTML to build the document structure, then applies the CSS to compute how each element should be displayed, and finally paints the result. JavaScript can run alongside this to change styles dynamically — for example, adding a class that CSS has already defined. This separation is why the same HTML can be restyled completely by swapping stylesheets, and why CSS is one of the three core technologies of the web alongside HTML and JavaScript.

Front-end best practices are the specific, checkable quality rules a site should pass before it ships — not abstract principles. The Front-End Checklist organizes 350+ such rules into 11 categories (HTML, CSS, JavaScript, performance, accessibility, security, privacy, SEO, images, i18n, testing), so you can either follow a guided workflow or jump straight to the area you already know is weak. Use it when you want a repeatable pre-launch pass rather than a one-off review.

What the checklist actually covers

Each category maps to a concrete concern, and the rule count tells you how deep the coverage goes:

The uneven counts are informative: accessibility and SEO carry the most rules because they have the most failure modes that are easy to miss by eye. If you only have time for one pass, those two plus performance cover the highest-risk ground.

Start from a curated workflow, not the full list

Browsing 350+ rules cold is a good way to stall. The site offers ready-made checklists scoped to a role and a moment:

• Launch Checklist — 16 rules, ~45 minutes, rated Beginner. Essential checks before deploying to production, spanning HTML, SEO, security, and performance. Aimed at junior devs and launch teams; use it before a new site, a major redesign, or a high-risk release.
• SEO Audit — 12 rules, ~30 minutes, Intermediate. For senior reviewers or AI-assisted audits when traffic, indexing, metadata quality, or editorial discoverability are active concerns.
• Performance Quick Wins — 8 rules, rated for fast wins. For when you want the highest-impact performance improvements without a deep investigation.

Pick the workflow that matches your situation, then expand into the full category list only where the workflow flags a gap.

How to run a check and track progress

The mechanism is simple and worth stating plainly, because the value is in the tracking, not the reading:

1. Choose a starting point — a curated checklist if you want a guided path, or a single category if you already know the problem area.
2. Work rule by rule. Each rule is a specific condition your page either meets or doesn't. The category view shows progress as a fraction (for example, "0 / 95" for Accessibility), so you can see how much of an area is verified.
3. Mark items complete as you confirm them. The running count is what prevents the classic failure of re-checking the same things and skipping the ones you keep forgetting.
4. Re-run the relevant checklist after fixes. A rule marked done on a broken build is worse than an unchecked one.

The expected result is a page that has passed a defined set of conditions, with a visible record of what was verified — not a vague sense that "it looks fine."

Bring the same standards into AI-assisted review

The checklist exposes the same rule corpus to AI tools through an MCP server, so automated reviews and human reviews share one quality baseline. This matters because the usual failure with AI code review is that it invents its own criteria. Here the criteria are fixed: the agent checks against the same rules you would.

Practical use: run the AI pass first to catch mechanical issues (missing meta tags, unoptimized images, absent alt text), then spend human review time on judgment calls the rules can't settle. The site also references Vercel and Skills.sh integrations alongside the MCP server.

Choosing your entry point

• Shipping a new site or redesign soon? Start with the Launch Checklist.
• Traffic or indexing dropped? Start with the SEO Audit.
• Site feels slow but you don't know why? Start with Performance Quick Wins.
• Known weak area (e.g., accessibility debt)? Go straight to that category.
• Want AI to help triage? Connect via MCP and let it run the mechanical rules first.

One caveat worth noting: the page shows a "Pro features for teams and power users" section but does not state pricing or what those features include, so treat team-level capabilities as unconfirmed until you check the site directly.

Enterprise teams can adopt specialist AI agents without disruption by starting with one narrow, high-volume workflow, running it as a bounded pilot with human review, measuring against a baseline, and only then expanding. The key is to treat agents as new team members with defined scopes rather than as a replacement for existing tools or a sweeping platform migration. This article explains what specialist agents are, where they fit across common team functions, and a phased approach you can follow.

What Makes an Agent "Specialist" Rather Than General-Purpose

A general-purpose assistant responds to open-ended prompts across many topics. A specialist agent is scoped to one job: it has a defined goal, a limited set of tools and data sources, and a clear definition of "done."

That scoping matters for enterprise teams for three practical reasons:

• Predictability. A narrow agent produces more consistent outputs, which makes it easier to review and trust.
• Permission control. You can grant access only to the systems that specific task needs, rather than broad data access.
• Measurable value. When an agent owns one workflow, you can compare its output against a manual baseline.

A useful rule of thumb: if you cannot describe the agent's job in one sentence with a clear input and output, it is still too broad to deploy safely.

Mapping Team Functions to Agent Use Cases

Most enterprise teams have a handful of repetitive, rules-plus-judgment tasks that are good first candidates. The table below shows typical starting points.

Notice that none of these replace a person's judgment. They compress the repetitive portion so the human spends time on exceptions and decisions.

A Phased Adoption Approach: Pilot, Measure, Expand

Phase 1: Pick one workflow and define success

Choose a task that is high-volume, low-risk, and currently a bottleneck. Write down:

• The current process, step by step
• The baseline metric (time per task, volume per week, error rate)
• What "good output" looks like, with two or three examples
• Who reviews the agent's work

Phase 2: Run a bounded pilot

Keep the agent inside the existing workflow rather than beside it. For example, the agent drafts; the human sends. Set a review gate so nothing leaves the team unreviewed. Run for a fixed period, such as four to six weeks, with a small group.

Phase 3: Measure against the baseline

Compare the same metrics you recorded in Phase 1. Look for time saved, consistency gained, and — importantly — where the agent failed. Failures tell you whether the scope was right.

Phase 4: Expand deliberately

Only widen scope after the pilot shows a clear, repeatable gain. Expand in one of two directions: more volume of the same task, or an adjacent task with the same data and review pattern. Avoid expanding into a new function and a new data source at the same time.

Handling Workflow Integration Concerns

Data access

Give each agent the minimum access its task requires. Prefer read access plus a single write action over broad permissions. Document which systems it touches so security and IT can review.

Handoffs

Define exactly where the agent stops and a human begins. A simple handoff rule works well: the agent completes the task and flags anything outside its defined scope for a person. Ambiguous handoffs are the most common source of friction.

Human oversight

Decide the review level up front:

• Full review for anything customer-facing or high-stakes
• Spot check for internal, low-risk outputs
• Exception-only review once the agent has a track record

Start stricter than you think you need, then relax as evidence accumulates.

How Roles and Responsibilities Shift

Adopting agents rarely removes roles; it redistributes effort. Expect these shifts:

• Reviewers become editors. People spend less time producing first drafts and more time improving and approving them.
• Process owners become agent owners. Someone needs to maintain the agent's instructions, examples, and scope as the business changes.
• New quality checks appear. Teams need a lightweight way to catch drift — for example, a weekly sample review.

Be explicit about who owns the agent after launch. An unowned agent degrades quietly.

Practical Criteria for Choosing Where to Start

Score candidate workflows against these questions:

1. Volume: Does it happen often enough to matter?
2. Risk: What is the cost of a wrong output, and can a human catch it?
3. Structure: Is the input and output reasonably consistent?
4. Baseline: Can you measure the current state today?
5. Ownership: Is there a person who will own the agent after launch?

A workflow that scores well on all five is a strong first pilot. A high-volume task with no clear owner is a poor start, no matter how repetitive it is.

A Simple Pilot Template

You can copy this structure to scope your first agent:

• Task: [one sentence]
• Current baseline: [time/volume/error rate]
• Agent scope: [what it does, what it does not do]
• Data access: [systems, read/write]
• Handoff rule: [when it escalates to a human]
• Review level: [full / spot / exception]
• Owner: [name]
• Pilot length: [weeks]
• Success metric: [target]

Bottom Line

Disruption comes from adopting too much at once, not from agents themselves. Start with one scoped task, keep humans in the loop, measure against a real baseline, and expand only when the evidence supports it. Platforms built around specialist agents — such as Relevance AI, which offers agents for sales, customer success, marketing, and HR — are designed for exactly this kind of task-by-task rollout, so you can add capability without rebuilding your team's existing processes.

A front-end checklist is a structured set of quality rules you run through before shipping a website, covering markup, styling, performance, accessibility, SEO, security, and more. Use one when you're about to deploy a new site, push a major redesign, or cut a high-risk release — it turns "I think it's ready" into a repeatable pass with a defined scope. The Front-End Checklist (frontendchecklist.io) organizes this as 350+ rules across 11 categories, plus curated workflows for common situations.

What a front-end checklist actually is

It's not a single document but a corpus of rules grouped by concern. Each rule is a discrete check you either pass or don't, which is what makes the format useful: you can track progress (the site shows counts like "0 / 95" per category), hand it to a reviewer, or run it as a pre-launch gate.

The scope is deliberately broad because front-end quality is broad. A site can have clean HTML and still fail on Core Web Vitals, or pass performance and fail WCAG.

The 11 categories and what each covers

Two things stand out from the counts. First, accessibility and SEO together account for over half the rules — they're where most real-world defects hide. Second, the small categories (I18n, Privacy) aren't less important; they're narrower in scope, which is why they have fewer discrete checks.

Curated workflows vs. browsing all rules

You have two entry points, and the right one depends on whether you know what you're looking for.

Browse by category when you already know the area that needs work — say, you're auditing images or tightening security. You go straight to those rules.

Start a curated checklist when you want a guided path. Three examples from the site:

• Launch Checklist — essential checks before deploying to production, spanning HTML, SEO, security, and performance. 16 rules, ~45 minutes, rated beginner. Intended for a new site, major redesign, or high-risk release.
• SEO Audit — comprehensive search optimization pass. 12 rules, ~30 minutes, intermediate. Use when traffic, indexing, metadata quality, or editorial discoverability are active concerns.
• Performance Quick Wins — high-impact optimizations that are relatively easy to implement. 8 rules. Use when you want the biggest gains without a deep performance investigation.

The time and skill ratings matter for planning: a 45-minute beginner pass and a 30-minute intermediate pass are different commitments, and you can assign them to different people.

How to run a checklist as a review pass

1. Pick the workflow that matches your situation. Pre-launch → Launch Checklist. Traffic or indexing problems → SEO Audit. Slow site, limited time → Performance Quick Wins.
2. Work through the rules and mark pass/fail. The site tracks progress per category, so you can see what's outstanding rather than relying on memory.
3. Treat failures as a fix list, not a verdict. A failed rule is a specific, actionable item — that's the point of the format.
4. Re-run after fixes. Because rules are discrete, you can verify only what changed.

The common failure mode is treating the checklist as a one-time read rather than a pass you actually execute. Reading 95 accessibility rules teaches you something; running them against your site finds the defects.

Humans and AI agents, same standards

The site positions the same rule corpus for both human reviewers and AI-assisted audits, with an MCP server to connect the standards to AI tools. Practically, this means a junior developer, a senior reviewer, and an AI-assisted audit can work from identical criteria — useful when you want consistency across a team or a second pass that doesn't depend on reviewer memory.

If your goal is simply to know whether a site is ready to ship, start with the Launch Checklist and expand into category-level rules only where it flags problems.