Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Modern Web Interface Engineer

    1

    Bring senior discipline to React and Next.js UI work: clean state ownership, sharp server/client boundaries, accessible states, and measured performance.

    Free

    1 useSecurity scanned
    Modern Web Interface Engineer

    Modern Web Interface Engineer

    Example session with this skill installed

    Our Next.js 14 dashboard at app/invoices/page.tsx throws a hydration mismatch on every navigation, and the status filter resets whenever I go back from an invoice detail page. The table also re-renders all 240 rows on every keystroke in the search box, and Lighthouse flags a 4.1s LCP on mobile. Please review src/app/invoices and src/components/invoices, move data reads back into Server Components, keep only interactive islands on the client, put the filter and pagination state in the URL, add skeleton plus empty and error states, and explain each change as you make it.

    • Read your context and instructions
    • Compiled the modern web interface

    Summary

    Refactored src/app/invoices so data reads run in Server Components, filters and pagination live in the URL, and the search box no longer re-renders every table row. Hydration warnings are gone; mobile LCP is back under budget.

    MetricBeforeAfter
    Hydration warnings1 per navigation0
    Client components in tree93 (search, row actions, filter)
    Status filter statecomponent + store + URLURL params only
    Keystroke re-render240 rows0 (useTransition + stable rows)
    Mobile LCP4.1s2.3s
    Loading / empty / error statesmissingskeleton, retry copy, aria-live

    Next steps

    • Convert InvoiceRow actions to server actions with tag-based cache invalidation after mutations.
    • Add Playwright coverage for keyboard navigation and drawer focus trap.
    • Gate the invoices route with Lighthouse CI so LCP stays under 2.5s.
    • Virtualize the table past ~500 rows if datasets keep growing.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Stop shipping fragile UIs with vague data ownership and broken accessibility. This skill brings senior-level engineering discipline to React and Next.js projects, focusing on clean architecture and predictable state.

    What it does

    • Architects component boundaries by defining where server logic ends and client interactivity begins.
    • Enforces state ownership to prevent data duplication between local form state, global stores, and server caches.
    • Ensures accessible interactions using semantic HTML, ARIA attributes, and managed focus states for keyboard users.
    • Optimizes render performance by identifying unnecessary re-renders and implementing efficient data fetching patterns.
    • Builds resilient interfaces with explicit loading skeletons, empty states, and recoverable error paths.

    How it works

    1. Define the Surface: Describe the widget or page to establish constraints like speed goals and SEO needs.
    2. Model Data Flow: Map out how data enters the UI, how it is mutated, and how the cache is invalidated.
    3. Compose Primitives: Generate small, typed components with explicit contracts and no hidden side effects.
    4. Audit and Refine: Run a quality check against performance metrics and accessibility standards.

    Frameworks & tools

    React 18+, Next.js App Router, TypeScript, Tailwind CSS, TanStack Query, and Playwright.

    Why this beats prompting it yourself

    Generic prompts often produce "div-soup" or monolithic components that ignore Next.js server/client boundaries. This skill enforces strict architectural patterns like discriminated union types for async states and proper focus management that LLMs typically overlook.

    Use cases

    • Refactoring a messy Next.js page into clean Server and Client Components.
    • Implementing complex form validation with optimistic UI updates.
    • Fixing hydration mismatches or performance bottlenecks in large React lists.
    • Auditing a design system component for WCAG compliance and keyboard support.

    Known limitations

    This skill does not cover native mobile development, pure backend architecture, or visual-only design exploration without implementation code.

    Patterns are tuned for modern React and the Next.js App Router, so Pages Router or non-React codebases get less direct benefit. Performance guidance assumes you can run Lighthouse or React DevTools to confirm wins.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    1 use

    Times used to date

    Free to use

    No account required to browse

    Trust & safety

    Security scan

    Security scan passed 1 month ago

    • Free with an Agensi account

    Permissions

    Browser
    Network Access
    Terminal / Shell
    Read Files
    Write Files

    Allowed Hosts

    api.example.com

    File Scopes

    src/**
    app/**
    **/*.tsx
    **/*.ts
    **/*.css

    Reads and edits frontend source and runs local lint/test/build commands, so file and shell access are needed; no network access is required.

    Listed1 month ago

    What's inside

    Frequently Asked Questions

    This skill is designed for AI agents that support code generation and architectural reasoning, specifically those integrated into IDEs or development environments that handle TypeScript and Next.js environments.

    Unlike generic code generation, this skill strictly enforces Next.js App Router conventions, distinguishing between Server and Client Components to prevent hydration errors and optimize SEO.

    Yes, it is specifically tuned to integrate TanStack Query for server-state synchronization and Tailwind CSS for utility-first styling, ensuring your UI is both performant and easy to maintain.

    The skill provides the logic, architectural constraints, and quality-check protocols your agent needs to output production-ready React code; it does not include pre-built UI kits or external hosting.

    The skill includes a focus on WCAG compliance, directing the agent to implement semantic HTML, ARIA roles, and keyboard navigation management as part of the standard component lifecycle.

    Buyers receive access to the current version of the skill's architectural logic, with periodic updates released to align with the latest stable versions of React and Next.js.

    No. It works entirely against your local codebase using file reads, edits, and shell commands for lint, tests, and builds.

    React and Next.js (App Router) with TypeScript, plus Tailwind and CSS styling conventions. It deliberately steps back from pure backend, native mobile, and data-pipeline work.

    Yes. The same methodology powers reviews: it flags unclear state ownership, over-broad client boundaries, missing non-happy-path UI states, and unmeasured performance claims.

    New in Frontend & Web Apps

    Free