build screaming frontend features

    1

    Build domain-driven React features using Screaming Architecture, Zod validation, and structured mapping.

    $5

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    build screaming frontend features

    Example session with this skill installed

    Create a new 'invoices' feature slice. I need to list invoices, filter by status, and create new ones. We use Next.js App Router, Zod, and shadcn for UI.

    • Read your context and instructions
    • Compiled the build screaming frontend

    I have generated the invoices feature slice using Screaming Architecture. The implementation ensures that API contracts are mapped to stable entities before reaching the UI, and all inputs are validated at the runtime boundary.

    Invoices Feature Implementation

    FileResponsibility
    features/invoices/entities/invoice.tsStable domain model for application use.
    features/invoices/types/invoice.api.tsExternal REST response and payload types.
    features/invoices/schemas/invoice.schema.tsZod validation for creation and filters.
    features/invoices/mappers/invoice.mapper.tsPure functions converting API types to entities.
    features/invoices/hooks/use-invoices.tsOrchestrates fetching, filtering, and state.
    features/invoices/actions/create-invoice.tsServer action with auth and validation.
    features/invoices/components/invoice-form.tsxUI component delegating to React Hook Form.
    // features/invoices/mappers/invoice.mapper.ts
import { InvoiceEntity } from "../entities/invoice";
import { InvoiceResponse } from "../types/invoice.api";

export const toInvoiceEntity = (dto: InvoiceResponse): InvoiceEntity => ({
  id: dto.uuid,
  amount: dto.total_cents / 100,
  status: dto.status_code,
  createdAt: new Date(dto.created_at),
});

    Next steps

    • Register the new invoice routes in the Next.js App Router.
    • Update the navigation sidebar in shared/layout to include the Invoices link.
    • Run npm run typecheck to verify the integration of the new entity types.

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

    About this skill

    Stop building messy, flat React directories where business logic leaks into UI components. This skill enforces Screaming Architecture by organizing code into domain-driven modules that express exactly what your application does. It eliminates the friction of tight coupling between your API responses and your views.

    What it does

    • Enforces domain boundaries by separating internal entities from external contracts and technical types.
    • Validates runtime data using Zod schemas for forms, URL parameters, and external API responses.
    • Maps data structures with pure, deterministic mappers that convert raw payloads into stable application entities.
    • Architects feature slices including hooks for orchestration, server actions for I/O, and thin presentation components.
    • Integrates shared infrastructure by managing shadcn primitives, layouts, and providers without domain contamination.

    How it works

    1. Analyze Environment: The skill inspects package.json, router configurations, and local conventions to detect if you are using TanStack Start, Next.js App Router, or a custom stack.
    2. Define the Slice: It identifies domain names, use cases (CRUD, filters, lists), and data sources before generating code.
    3. Implement Inside-Out: It builds the vertical slice starting from constants and entities, moving through schemas and mappers, up to server functions and UI components.

    Frameworks & tools

    React, TypeScript, Zod, TanStack Start, Next.js App Router, React Hook Form, and shadcn/ui.

    Why this beats prompting it yourself

    Standard prompts often produce "spaghetti" React code with API logic inside useEffect. This skill follows a rigorous multi-step blueprint that ensures shared/ never imports from features and every mutation includes proper validation, mapping, and cache invalidation.

    Use cases

    • Generating a complete vertical CRUD feature for a new domain entity.
    • Refactoring a monolithic component into a domain-driven module with separated hooks and mappers.
    • Implementing complex forms with validation schemas and server-side mutation handling.
    • Scaffolding a new project structure with clean architectural boundaries and shared UI primitives.

    Known limitations

    Requires specific reference files like architecture.md or feature-blueprint.md in the repository to function at full capacity. It does not replace existing global styles or data strategies unless explicitly instructed.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean today

    • Passed all security checks, Safe to install

    Requires

    Node.js
    shadcn

    Listedtoday

    What's inside

    Frequently Asked Questions