rubrkit
Pricing
Sign In
Development

Frontend Development (Next.js + MUI)

Build and review production Next.js App Router UIs with MUI, JSDoc-typed JavaScript, SWR, and SEO/responsive/accessibility QA.

View on GitHub

Frontend Development

Use this skill for production web work in a JavaScript-first Next.js App Router app with Material UI, SWR, // @ts-check, JSDoc, a local helper/store pattern, and a typed SQL data layer (for example Postgres with Drizzle).

Conventions

  • Use Next.js App Router conventions: thin app/ route files, templates under components/templates/, reusable UI under components/, client/shared helpers under lib/, and backend code under /server.
  • Use MUI primitives and theme tokens before custom HTML/CSS.
  • Only attach hover/focus affordances (lift, border-glow, color shift, cursor changes) to genuinely interactive elements — links, buttons, inputs, controls. Do not add them to static display elements like content cards, chips, badges, or labels the user cannot click; it implies an interaction that is not there and misleads the user.
  • Use // @ts-check and useful JSDoc on authored JavaScript files.
  • Use SWR for repeated client reads and local cache semantics where it improves deduplication or revalidation.
  • Make user-initiated mutations optimistic by default — reflect the change instantly, reconcile with the server response, and roll back on error. Do not block the UI on a network round-trip for ordinary CRUD/toggle actions. See references/next-mui-patterns.md (Optimistic mutations) for the SWR and local-state patterns and the exceptions (long-running jobs).
  • Keep persistence behind a clear boundary; a typed SQL data layer (for example Postgres with Drizzle) is a good default.
  • Avoid introducing unrelated tooling (CMS contracts, design-tool or ticketing workflows) unless the task explicitly calls for it.

Workflow

  1. Inspect the existing structure and nearby patterns before editing.
  2. Classify the change:
    • App/page implementation: route/template/component work.
    • Shared helper work: hooks, store, SWR, theme, providers.
    • Public route work: metadata, sitemap, robots, semantic HTML, and SEO/AEO basics.
    • Rendered UI change: responsive and accessibility verification is required.
  3. Implement in small focused files. Split components before they mix state orchestration, repeated render fragments, styling variants, responsive branches, and interaction handlers.
  4. Verify with npm run typecheck, npm run lint, and npm run build when available. If a script is missing, note the gap and run the closest available equivalent check.
  5. For rendered UI changes, run a browser smoke test at desktop and at least one mobile viewport. Check for horizontal overflow, broken interaction, console errors, and obvious accessibility regressions.
  6. Cleanup before handoff: remove dead imports, temporary logs, generated artifacts, placeholder code that is not intentional, and unused dependencies. Leave a brief handoff note with the files changed, checks run, and any known follow-ups.

References

Load only the reference needed for the task:

  • references/js-ts-check-jsdoc.md for JavaScript typing and React/Next performance rules.
  • references/next-mui-patterns.md for App Router, MUI theme, GlobalStyles, component splitting, and state coverage.
  • references/responsive-qa.md for browser, responsive, accessibility, and visual QA.
  • references/seo-aeo.md for public route metadata, semantic HTML, sitemap/robots, and JSON-LD rules.
← Back to Skill LibraryTry Rubrkit