blyatiful1

@blyatiful1 source repo

83 skills
0 followers
9 hours ago last updated

▌
Hardmode · blyatiful1
Run a task in hard mode — the staged discipline protocol (frame → explore → plan + adversarial critique → implement in verified increments → independent verify → review → bank lessons). Use for hard, multi-file, or high-stakes tasks; whenever the user invokes /hardmode, says "hard mode", or asks for maximum quality/thoroughness/rigor. Not for trivial edits or questions.

0
installs
▌
Postmortem · blyatiful1
Distill a finished piece of work into auto-memory — the surprising root cause, the dead-end approach, the environment quirk, the decision and its why. Use proactively at the end of a debugging saga, after abandoning an approach, when something took 3+ attempts, or when the user says "remember this" / "lessons learned".

0
installs
▌
Orchestrate · blyatiful1
Etiquette and quality patterns for multi-agent Workflow runs — when to orchestrate, the opt-in rule, model pinning, plugin-namespaced agent types, adversarial-verify/judge-panel/loop-until-dry patterns. Use when a task spans many files/questions/items, when independent verification would change the answer, or when the user asks for exhaustive/thorough/parallel treatment. For the script API itself (syntax, resume, gotchas), load the native workflow-authoring reference.

0
installs
▌
Ultraweb · blyatiful1 bundle
ultraweb — one guided session → first-grade website

0
installs
▌
Faq · blyatiful1 bundle
Design FAQ and accordion sections — the native details/summary vs client accordion decision, question/answer typography, disclosure interaction rules, and FAQPage JSON-LD wiring through ultraweb:seo. Invoke during ultraweb Phase 6 when design/SITEMAP.md names an FAQ, questions, or help section, or when the user asks for an FAQ, accordion, expandable questions, "common questions", a help section, or objection handling near pricing.

0
installs
▌
SEO · blyatiful1 bundle
Findability layer for the Next.js 16 App Router — Metadata API with generateMetadata and awaited params, metadataBase, per-page unique titles and descriptions, opengraph-image.tsx via ImageResponse from next/og, sitemap.ts, robots.ts, manifest.ts, icon.tsx, and JSON-LD structured data. Invoke in the findability phase of every build, and whenever the user mentions SEO, Google ranking, meta tags, OG images, social share previews, sitemap.xml, robots, structured data, rich results, canonical URLs, or "my site doesn't show up in search". This skill owns the crawler-facing files; deciding which PAGES the site has — "plan the pages", information architecture — is ultraweb:sitemap, a different skill.

0
installs
▌
Auth · blyatiful1 bundle
Authentication with Better Auth 1.6, the locked stack default (Auth.js/NextAuth is maintenance-mode legacy) — server config with the Drizzle adapter, CLI-generated schema, client hooks, optimistic route protection in proxy.ts (Next 16, never middleware.ts), authoritative session checks in RSC and in every mutation, and a sign-in page styled to the design system, never the default unstyled form. Invoke during the backend phase whenever the brief needs accounts, protected pages, or roles, or the user says "auth", "login", "sign in", "sign up", "sessions", "protected routes", or "user accounts".

0
installs
▌
Cart · blyatiful1 bundle
Design and build the cart surface and its state — the add-to-cart feedback moment (never a full page reload), the slide-over drawer vs dedicated /cart page decision, line-item anatomy with quantity steppers and remove-with-undo, an empty cart designed as a merchandising moment, honest server-computed running totals with a free-shipping progress bar, exactly ONE cross-sell slot under the anti-three-cards rule, and optimistic updates wired to server actions. Three named variants (slide-over drawer, dedicated page, mini-cart popover). Invoke in Phase 6/7 whenever a commerce build needs a cart — add-to-cart, mini-cart, cart drawer, /cart page, quantity steppers, free-shipping bar, or "nothing owns the cart" — or when the user says "add a cart", "mini cart", "cart drawer", "the cart reloads the page", "update the cart total", or "cross-sell in the cart".

0
installs
▌
Hero · blyatiful1 bundle
Design and build the first-viewport hero section of an ultraweb site — pick one of five named variants (typographic, split, full-bleed media, product-shot, editorial-offset) to fit the direction, enforce display-scale headline sizing (>=3.5x body via clamp()), a single-primary CTA hierarchy, and above-fold performance (LCP element identified and preloaded, no motion library on first paint when avoidable). Invoke during the Build phase for any hero or above-the-fold work — trigger phrases — "hero section", "above the fold", "landing header", "first screen", "hero image", "hero headline", "make the hero bolder".

0
installs
▌
I18N · blyatiful1 bundle
Internationalization for the Next.js 16 App Router without an i18n framework — [locale] segment routing, server-only dictionary pattern, Accept-Language negotiation in proxy.ts, hreflang via metadata alternates, Intl date/number formatting, RTL awareness — plus the discipline to skip all of it when the brief targets a single market. Invoke when design/BRIEF.md names two or more languages or markets, or when the user mentions translations, multilingual, locales, hreflang, language switcher, RTL, or "add a German/French/Spanish version". Also covers German/DACH typesetting (guillemets, ß/ẞ, DIN-5008 spacing, comma decimals) and the Leichte-Sprache plain-language register for civic/foundation DACH builds.

0
installs
▌
Ship · blyatiful1 bundle
Production-readiness pass and deploy for a finished ultraweb site — audit env vars (.env.example complete, no secret in any tracked file, no secret behind NEXT_PUBLIC_), prove the production server (a fresh npm run build + npm run start, or the still-valid server of record from Phase 11) with route-by-route fetches, deploy to Vercel ONLY when the user asked and after an explicit confirmation, then verify the live URL empirically (fetch every route, screenshot the homepage). Invoke in Phase 12 of the ultraweb pipeline once design/QA.md shows no FAIL (UNVERIFIED entries ride into the named-risk deploy confirmation), or whenever the user says "ship it", "deploy", "go live", "push to production", or "is this ready for prod". A red gate blocks this skill; it never overrides Phase 11.

0
installs
▌
Brief · blyatiful1 bundle
Expand a user prompt into design/BRIEF.md — the complete creative brief; site type and energy budget, a named audience persona, conversion goals, tone words with a tension pair, page list, per-page content inventory, and backend needs mapped to Tier-6 skills with an explicit rejected list. In guided mode (the default) it runs a short scoping interview whose questions are generated from what THIS prompt left open — site-type-specific forks about scope, features, and content, never aesthetics; in autonomous mode it decides everything a professional studio would decide itself. Either way it logs inventions as assumed facts and the finished file contains zero open questions. Invoke as Phase 1 of the ultraweb pipeline right after taste, whenever a build starts from a raw prompt ("build me a site for X", "create a landing page for Y", "make a website for my business"), or when any downstream skill finds design/BRIEF.md missing, stale, or incomplete.

0
installs
▌
Cards · blyatiful1 bundle
Design and build the card system — hierarchy inside the card, one site-wide hover motif, image handling, and group layouts that refuse uniformity. Five named variants (media-top, icon-lede, stat, editorial, feature-object) with when-to-use, full interactive state coverage including card-as-link focus behavior, and rules for card groups that don't read as wallpaper. Invoke during the Build phase whenever a surface calls for cards — blog or case-study grids, service and feature cards, stat blocks, bento cells — or when the user says "the cards look generic", "make the cards interesting", or a grid of identical boxes is emerging.

0
installs
▌
Color · blyatiful1 bundle
Construct the site's OKLCH palette from the chosen direction — a hue-tinted neutral ramp plus ONE working accent, built on disciplined lightness steps and chroma limits, named as semantic tokens (background/foreground/primary/muted/border/ring…), with a dark theme re-decided surface by surface (never inverted) and every foreground/surface pair verified for WCAG AA contrast computationally, not by eye. Invoke in the Foundation phase right after ultraweb:direction, whenever a palette must be built or rebuilt, or when the user says "pick the colors", "build the palette", "fix the contrast", "the colors feel off", "add dark mode", or "design the dark theme".

0
installs
▌
Depth · blyatiful1 bundle
Design the elevation language for an ultraweb build — an oklch tinted-shadow scale (never pure black) shipped as --shadow-* @theme tokens, the border-vs-shadow decision rule, semantic elevation levels 0-4, a dark-mode elevation strategy, and glass rules (rare, one surface max) — written to design/SYSTEM.md §depth during the foundation phase. Invoke in Phase 3 of the ultraweb pipeline after color has decided the neutral ramp, or whenever shadows look gray or muddy, everything floats identically, dark-mode cards read flat, or someone asks about "shadows", "elevation", "depth", "glassmorphism", "borders vs shadows", or "high contrast mode / forced-colors".

0
installs
▌
Email · blyatiful1 bundle
Transactional email for a Next.js 16 site — Resend 6 (the { data, error } return; it does NOT throw on API errors, check error explicitly) with @react-email/components templates that carry the design system's palette and type into the inbox, the React component passed via the react property, a contact-form flow wired through a server action, the react-email dev preview server, and RESEND_API_KEY handling with a lazy client so builds pass without the key. Invoke during the backend phase whenever the brief needs outbound mail — contact-form notifications, double-opt-in newsletter confirmations, magic links, welcome or receipt emails — when a template looks default or off-brand, or when sends fail silently. Trigger phrases — "contact form email", "send an email", "transactional email", "email template", "Resend", "magic link email", "double opt-in confirmation", "newsletter Bestätigungs-Mail", "the form submits but no email arrives".

0
installs
▌
Forms · blyatiful1 bundle
Form UX and implementation for ultraweb builds — field anatomy with always-visible labels (never placeholder-as-label), validation timing (blur first, live after first error), error-recovery UX that never loses input, zod v4 schemas shared client/server, and useActionState wiring to server actions. Invoke in Phase 6 whenever the sitemap calls for any form — contact form, newsletter capture, waitlist, sign-in/sign-up, checkout fields, settings, or a multi-step wizard ("add a contact form", "email signup", "waitlist form", "the form feels broken"). Pairs with ultraweb:server-actions for the mutation side.

0
installs
▌
Icons · blyatiful1 bundle
The icon system for an ultraweb build — lucide-react as the default set, ONE stroke width matched to the type weight, a four-step sizing scale locked to typography, currentColor discipline, criteria for when a custom SVG beats a library glyph, and a hard ban on emoji-as-icons. Invoke during the build phase whenever a component needs icons, when choosing or normalizing an icon set, when icons look inconsistent ("mixed icon styles", "icons feel heavy", "icon sizes are all over the place"), or when replacing emoji decorations with real icons.

0
installs
▌
Taste · blyatiful1
The ultraweb design constitution — what first-grade means, the anti-slop banned list, required qualities, and decision heuristics. Invoke FIRST before any ultraweb design or build work, whenever judging whether a design is good enough, or when any other ultraweb skill references "the constitution" or "taste".

0
installs
▌
Assets · blyatiful1 bundle
assets — ingest what exists before inventing

0
installs
▌
Footer · blyatiful1 bundle
Design and build the site footer as a designed closing statement, never a link dump — four named variants (oversized-type closer, columnar sitemap, minimal strip, CTA finale), sitemap/legal/social organization, and a newsletter row wired to a real server action. Invoke during the Build phase for any footer work — trigger phrases — "footer", "bottom of the page", "site footer", "newsletter signup", "legal links", "social links row", "closing section".

0
installs
▌
Mockup · blyatiful1 bundle
mockup — three sketches, one approval

0
installs
▌
Status · blyatiful1 bundle
Owns design/PROGRESS.md, the single where-are-we surface for a long build — which phase is running, whether anything is waiting on the user, when they will next be needed and for how long, what is already done, and which decisions are still cheap to change. The Lead rewrites the file at every phase boundary and at every checkpoint open and close; every status answer is read FROM the file, never re-derived by scrolling the transcript. Invoke whenever the user asks "where are we", "status", "what's happening", "is it still going", "did it finish", "what do you need from me", or returns after being away, and at every phase or checkpoint transition to keep the file true. Also owns design/CONTEXT-HANDOFF.md, the append-only lessons ledger a fresh context reads so it never re-learns a debugging saga. It is the first authority the root pipeline's resume ladder consults when a session is picked up cold.

0
installs
▌
Studio · blyatiful1 bundle
Scaffold the dev-only /studio route — the construction-site window onto a running ultraweb build. A force-dynamic page, hard-gated to 404 in production, that reads design/PROGRESS.md, design/QA.md, design/REVIEWS.md, design/screenshots/ and design/studio-log.jsonl off disk at request time and renders phase progress, the gate table, the checkpoint ledger, a screenshot contact sheet, and a 2-second-polled activity feed — so the user watches the build live at zero token cost per update. Invoke in Phase 5 immediately after scaffold (skipped at sketch tier), whenever the user asks to "watch the build", "see it live", "show me what you're doing", "is there a dashboard", "open the studio", or when a resumed build finds app/(studio)/ missing. Deliberately un-designed workshop chrome; the gates ignore it and handoff documents deleting it.

0
installs
▌
Tokens · blyatiful1 bundle
Compile the finished design-system decisions (color, typography, spacing, radius, shadow, easing, animation) into Tailwind CSS v4 @theme tokens in app/globals.css — the single authoring source every component consumes across three token tiers. Writes the :root/.dark oklch variables, the @theme inline bridge, the fluid clamp() type scale, the --spacing multiplier, --animate-* keyframes, the @layer order that overrides shadcn without !important, @property-typed tokens so animatable colors interpolate, and the resolved-hex lib/tokens.ts export for email/OG. Invoke in the Foundation phase AFTER ultraweb:color, ultraweb:typography, ultraweb:motion-language and ultraweb:shape-language have written design/SYSTEM.md; also when globals.css must be created or regenerated, when the user says "set up the design tokens", "wire the theme", "add a token", "export tokens for email/OG", "make a token animatable", "update globals.css", or when components are found hardcoding values that belong in the system.

0
installs
▌
Animejs · blyatiful1 bundle
animejs — vector choreography, earned

0
installs
▌
Buttons · blyatiful1 bundle
Build the button/CTA system — primary/secondary/ghost/destructive hierarchy with the one-primary-per-view rule, a four-step size scale, icon placement rules, and the full state matrix (default, hover, active, focus-visible, disabled, loading) with concrete transforms and timing. Invoke during the Build phase when creating or restyling components/ui/button.tsx, wiring any CTA, submit, or icon button, or when the user says "the buttons feel dead", "add a loading state", "fix the CTA hierarchy", or buttons are shipping with default shadcn styling.

0
installs
▌
Consent · blyatiful1 bundle
GDPR/TTDSG §25 cookie and tracking consent as a design problem, not a bolted-on overlay — equal visual weight for Accept and Reject (never Accept-as-primary with Reject a buried gray link), a banner built from the site's own tokens, a consent-state React context that gates third-party script injection (analytics, Maps/YouTube embeds, chat, font CDNs) until granted, and a persistent footer "Cookie-Einstellungen" resurface link. Invoke in Phase 7 whenever a build loads any analytics, embed, chat widget, or third-party script, or when the user mentions cookies, consent, cookie banner, tracking, DSGVO/GDPR, TTDSG/TDDDG, opt-in, or "add a cookie notice".

0
installs
▌
Handoff · blyatiful1 bundle
Write the closing README for a finished ultraweb site — stack map with the real installed versions, run/build commands, a verified file-by-file content-and-copy editing map, the one-file token guide (app/globals.css @theme), one-line explanations of every design/* artifact, gate re-run instructions, deploy record, and maintenance notes on what not to break. Invoke in Phase 12 of the ultraweb pipeline after ship, or whenever the user asks for docs, a README, a handoff, onboarding notes for another developer, or "how do I edit this myself later". Every path and command in the README is verified against the actual repo, never described from memory.

0
installs
▌
Imagery · blyatiful1 bundle
Art direction for every visual asset in an ultraweb build — pick ONE photo treatment (duotone, grain, overlay/scrim) implemented as palette-driven CSS/SVG, generate gradient-mesh and feTurbulence noise textures from the OKLCH palette, and produce honest placeholders as on-brand generated SVG/CSS art, never gray boxes, placeholder.com, or stock clichés. Invoke during foundation to define SYSTEM.md §imagery, and during build whenever a section needs an image, texture, or background ("add a hero image", "needs texture", "the images look stock", "placeholder images", "background feels flat", "make the photos match the brand").

0
installs
▌
Iterate · blyatiful1 bundle
Targeted revision pipeline for an existing ultraweb-built site — scope a requested change ("make the hero bolder", "add a pricing page", "darker palette"), touch only the affected phases, and re-run only the affected quality gates. Use for any change request to a site that has design/* artifacts; use the root ultraweb skill only for building from scratch.

0
installs
▌
Physics · blyatiful1 bundle
Spring-based interaction for ultraweb builds — magnetic hover, drag with constraints, cursor followers, and gesture response using motion/react springs (stiffness/damping recipes included). GATED — only for briefs whose DIRECTION.md names a playful/tactile/interactive motion stance; budget 1–2 physics moments per site. Invoke in the ultraweb motion phase (Phase 9) when DIRECTION.md calls for it, or when the user says "magnetic button", "draggable", "cursor follower", "springy", "make it feel tactile/playful", or "elements should react to the mouse".

0
installs
▌
Preview · blyatiful1 bundle
preview — a URL the reviewer can hold

0
installs
▌
Pricing · blyatiful1 bundle
Pricing sections for ultraweb builds — tier cards with exactly one featured plan, billing toggles with the annual math visible, honest comparison rows (numbers not adjectives, shared features pulled out of the matrix), a subscription/Abo delivery-cadence variant for recurring commerce, German unit-price (Grundpreis) + VAT-inclusive gross display, price typography, and per-tier CTA hierarchy. Invoke in Phase 6 whenever the sitemap includes pricing — SaaS tiers, service packages, membership plans, a single-price offer, a delivery-cadence subscription, or a feature-comparison table ("add a pricing page", "pricing section", "plans and pricing", "compare plans", "monthly/annual toggle", "subscription pricing", "Abo cadence", "Grundpreis", "inkl. MwSt.").

0
installs
▌
Routing · blyatiful1 bundle
Designs the app/ route tree for a Next.js 16 App Router site — route groups for layout scoping, dynamic segments with awaited params (they are Promises in Next 16), parallel routes with their mandatory default.tsx, intercepting routes for URL-addressable modals, per-segment loading.tsx/error.tsx/not-found.tsx plus global-not-found.tsx and global-error.tsx as designed moments, and a root-layout Speculation Rules block that prerenders the likely next document — all designed to the system, not framework defaults. Invoke during the build phase when translating design/SITEMAP.md into app/ directories, when adding a dynamic or catch-all route, when a modal needs a shareable URL, when a 404/error/loading surface still looks default, or when navigation should feel instant. Trigger phrases — "set up the routes", "dynamic route", "route group", "slug page", "modal with a URL", "intercepting route", "custom 404", "500 error page", "loading state for this page", "error page", "prerender the next page".

0
installs
▌
Sitemap · blyatiful1 bundle
Information architecture for an ultraweb build — decides the page list, routes, nav structure, and per-page purpose plus conversion goal from design/BRIEF.md, and writes part 1 of design/SITEMAP.md. Invoke in Phase 4 (Structure) of the ultraweb pipeline, immediately before ultraweb:wireframe; also when the user asks "what pages does this site need", "plan the pages", "restructure the navigation", "should this be a one-pager", "which legal pages does my jurisdiction require" (Impressum + Datenschutz for a DE/AT/CH business), or (via ultraweb:iterate) "add a page". The sitemap.xml crawler file is ultraweb:seo's — this skill decides pages, not metadata.

0
installs
▌
Storage · blyatiful1 bundle
File upload and blob storage for a Next.js 16 site — dropzone UX with drag-drop as enhancement over a real file input, true progress from XHR upload events, instant client validation of type and size, zod v4 re-validation on the server, Vercel Blob as the default store with S3-compatible (S3/R2) as the alternative, server-generated storage keys, and post-upload rendering through next/image with persisted dimensions. Invoke during the backend phase when the brief needs avatars, user images, attachments, or any file upload, when choosing between server-relay and client-direct upload paths, or when uploaded images cause layout shift or bypass the image pipeline. Trigger phrases — "upload a file", "image upload", "avatar", "drag and drop", "file storage", "Vercel Blob", "S3 bucket", "attachments", "the upload shows no progress".

0
installs
▌
Database · blyatiful1 bundle
Build the data layer with Drizzle ORM + Neon Postgres exactly per the locked stack — schema derived from the brief's nouns, drizzle-orm/neon-http client wiring, drizzle.config.ts with dialect postgresql, the generate/migrate/push workflow, the deliberate 0.45-vs-1.0-rc version pin, an on-brand seed script, and direct query patterns inside React Server Components. Invoke during the backend phase whenever the brief needs persistent data (accounts, listings, orders, saved content) or the user says "database", "schema", "Drizzle", "Postgres", "Neon", "migration", or "store this".

0
installs
▌
Identity · blyatiful1 bundle
Draw or formalize the site's brand mark in pure vector, before tokens compile — a wordmark in the committed display face with the optical work named (tracking, one custom cut or ligature, a clear-space rule), a monogram feeding app/icon.tsx, apple-icon.tsx and manifest.ts, an OG template component seo's ImageResponse renders instead of re-deriving a layout per page, and design/IDENTITY.md plus public/brand/*.svg as the single source. A real client mark in design/ASSETS.md is formalized, never redrawn; an invented one is recorded as a starting mark. Invoke in Phase 3 after typography commits the display face and before tokens, or when someone says "design a logo", "we need a wordmark", "brand mark", "monogram", "logo lockup", "clear space rules", "the favicon is still the default", or "make an OG template".

0
installs
▌
Overlays · blyatiful1 bundle
Build every transient layer on the native platform — the HTML Popover API (popover/popovertarget, top-layer, light-dismiss, ::backdrop) and CSS Anchor Positioning (anchor-name/position-anchor/position-area/position-try) as the default for menus, dropdowns, tooltips, comboboxes, and popovers, retiring z-index wars, portal hacks, and JS focus-trap libraries. Three named variants (anchored popover, modal dialog, manual toast stack), a Baseline-2026 default with a scoped @supports flip fallback, and @starting-style entry/exit motion. Invoke in the Build phase for any overlay work — trigger phrases — "dropdown menu", "tooltip", "popover", "toast", "modal", "z-index war", "the menu sits behind something", "position a menu under a button", "replace the Radix/portal dropdown".

0
installs
▌
Payments · blyatiful1 bundle
Stripe payments for a Next.js 16 site — Stripe 22 with a lazy-instantiated client (no apiVersion pin; the SDK ships its own), Checkout Session creation in a server action redirecting to Stripe-hosted checkout, a webhook route handler that reads the raw body via await req.text() before constructEvent (the classic parsed-body signature failure), prices modeled in the Dashboard and allowlisted in code, strict test-mode discipline with the Stripe CLI, and success/cancel pages designed to the system — never bare. Invoke during the backend phase when the brief sells anything — one-time purchases, subscriptions, pricing-page checkout — when webhook signature verification keeps failing, or when fulfillment logic lives on the success page. Trigger phrases — "add Stripe", "checkout", "payments", "subscriptions", "billing", "buy button", "webhook signature error", "payment succeeded but nothing happened", "SEPA Lastschrift / Klarna for DACH", "Widerrufsrecht at checkout".

0
installs
▌
Retrofit · blyatiful1 bundle
Entry point for existing Next.js sites that ultraweb did not build — inventory the codebase and routes, sweep for banned-list patterns, boot the site, screenshot every page at 375/768/1440, score it against the taste constitution via the design-judge rubric, and write design/RETROFIT.md — scored gaps each mapped to the one ultraweb skill that fixes it, phased into quick wins → system fixes → direction change, each phase then executed via ultraweb:iterate. Invoke when the user points at an existing site and asks to "improve", "audit the design", "modernize", "redesign", or "bring it up to standard", or asks "how bad is my site". For building from scratch use the root ultraweb skill; for a scoped change to a site that already has design/* artifacts use ultraweb:iterate directly.

0
installs
▌
Scaffold · blyatiful1 bundle
scaffold — verified init, provable green

0
installs
▌
Analytics · blyatiful1 bundle
analytics — count the goals you promised

0
installs
▌
Direction · blyatiful1 bundle
Choose ONE aesthetic archetype from a catalog of 12 named directions — Editorial/Magazine, Swiss/International, Brutalist, Neo-grotesque Minimal, Warm Organic/Humanist, Refined Luxury Serif, Playful Geometric, Dark Tech (flagged as the most cliched pick), Retro-Futurist, Soft Depth, Data-Dense Utilitarian, Art-House Immersive — each with typography, color, and motion stances, when-to-use guidance, and signature-move ideas. In guided mode the shortlist becomes three contrasting mockup candidates (via ultraweb:mockup) and the user's approved pick is what gets committed; in autonomous mode it commits directly. Selects ONE signature move and writes design/DIRECTION.md including a mandatory "we will NOT" list. Invoke as Phase 2 of the ultraweb pipeline once design/BRIEF.md exists, whenever a build needs its aesthetic committed ("what style should this site be", "pick a design direction", "give it a point of view"), or when a design reads generic and needs one direction chosen and pushed.

0
installs
▌
Gate Code · blyatiful1 bundle
gate-code — green by command, not claim

0
installs
▌
Showpiece · blyatiful1 bundle
Hero-grade set pieces for ultraweb builds — 2D canvas, shader/mesh gradients, particles, R3F/three.js 3D — under taste's hard gate — only when DIRECTION.md demands it, 60fps verified on mid hardware, static fallback and reduced-motion path mandatory, one per site. Covers the cost ladder (CSS → canvas → shader → R3F), next/dynamic ssr:false mounting, and LCP protection. Invoke in the ultraweb motion phase (Phase 9) when DIRECTION.md commissions it, or when the user says "WebGL hero", "3D product view", "shader gradient", "particles", "something jaw-dropping in the hero", "an interactive centerpiece", or "make a 3D view shareable / deep-linkable".

0
installs
▌
UI States · blyatiful1 bundle
Enforce the all-states contract — every async surface ships loading, empty, error, and success states designed with system tokens; skeletons that match the real layout exactly (zero CLS on swap), empty states that onboard with one action, error states that run a recovery-copy formula (what happened + the fix, never "Something went wrong"), and a designed not-found (404) in the site's own voice and type. Invoke during ultraweb Phase 6 for any surface that fetches, searches, filters, uploads, or mutates, during Phase 7 backend flows, or when the user mentions loading states, skeletons, spinners, empty states, error handling UX, error message wording, 404 or not-found pages, "no results", or a blank/janky screen while data loads.

0
installs
▌
Wireframe · blyatiful1 bundle
Section-by-section blueprint for every page of an ultraweb build — decides section order and narrative arc, which component skill builds each section, layout-variant hint, exact content-density budget, width/rhythm class, mobile order, and the single flagged spot where the signature move lives; appends part 2 to design/SITEMAP.md. Invoke in Phase 4 (Structure) right after ultraweb:sitemap and before any section is coded; also when the user asks "what sections should this page have", "plan the page layout", "where should the wow moment go", or when a Phase 6 build agent needs the blueprint for its page.

0
installs
▌
API Design · blyatiful1 bundle
Design and build the site's HTTP API surface — Next.js route handlers with typed Response.json, zod v4 validation at every boundary, one consistent error envelope (stable code + human message), strict status-code discipline, and the decision rule for when server actions beat API routes (internal mutations) and when routes win (external consumers, webhooks, non-browser clients). Invoke during the backend phase whenever the brief needs HTTP endpoints or the user says "API", "endpoint", "REST", "route handler", "webhook", or "expose the data". For the site's own forms mutating its own data, use ultraweb:server-actions instead.

0
installs
▌
Checkpoint · blyatiful1 bundle
checkpoint — the client is a phase, not an interruption

0
installs
▌
Marginalia · blyatiful1 bundle
Print-derived page furniture for genuinely long-form pages — a scroll-linked running folio (current-section head), a marginal read-o-meter (reading time + percent as small-caps type, never a progress bar), a sticky scrollspy section rail, Tufte-style footnote/sidenote gutters in a reserved margin column, and marginal pull-quotes — all set in layout-grid's outer column and degrading to inline superscript + native popover below the gutter breakpoint. Invoke in the Build phase for essays, case studies, docs, reports, or annual-report pages (never a landing page), or when the user says "running header", "reading progress", "table of contents rail", "scrollspy", "sidenotes", "footnotes in the margin", "Tufte sidenotes", "pull quote", or "margin notes".

0
installs
▌
Navigation · blyatiful1 bundle
Design and build the site header and menus for an ultraweb site — four named variants (slim-bar, centered-logo, floating-pill, mega-menu), sticky hide-on-scroll-down/show-on-up behavior, a mobile menu designed as a moment rather than a bare drawer, active-link indication, a mandatory skip-link, and complete keyboard support. Invoke during the Build phase for any header or menu work — trigger phrases — "navbar", "header", "navigation", "menu", "mobile nav", "hamburger", "sticky header", "mega menu".

0
installs
▌
Set Design · blyatiful1 bundle
Site-scale immersive 3D for ultraweb builds — ONE persistent R3F canvas behind natively-scrolling DOM, surviving every route; a DCC-authored camera clip scrubbed by a journey map (route window x scrollYProgress -> mixer.setTime), material-names-as-API, patched stock materials over hand-written GLSL, punctuation-only postprocessing, and a gltf-transform/DRACO asset pipeline. GATED — Phase 9 only when design/DIRECTION.md names this skill, its route scope AND its byte budget, at archetype 12 and motion intensity 3; ONE set piece in one section stays ultraweb:showpiece. Invoke when DIRECTION.md commissions the world, or when the user says "the whole site is 3D", "a world you scroll through", "persistent WebGL across pages", "scroll-driven camera journey", "immersive 3D portfolio", or "one continuous scene across all the pages".

0
installs
▌
Typography · blyatiful1 bundle
Choose and implement the site's type system — a display/body pairing from a curated library of 12 Google-Fonts combos mapped to direction archetypes, loaded via next/font/google with CSS variables, a fluid clamp() type scale (390→1440px, hero ≥3.5× body), and hard weight/tracking/leading rules. Invoke in the Foundation phase right after ultraweb:direction, whenever fonts must be chosen or the scale defined, or when the user says "pick the fonts", "font pairing", "set up typography", "the type feels generic", "make the headlines bigger", or "which font should this use".

0
installs
▌
Award Canon · blyatiful1 bundle
The study library of the Awwwards record — 25 named patterns distilled from 32 Site-of-the-Year/SOTD-tier dossiers (2017–2026), the invariants that held across every year, the jury scoring model, and the dated-fashions list, with the per-site study bank and the archetype map in references/ (loaded on demand, never wholesale). A reference cited by principle and always subordinate to taste and the gates — never a mandate. Invoke whenever a build needs award-grade references or signature-move ideas ("which award winners", "reference sites", "how would an Awwwards winner do this", "what do juries reward", "signature-move ideas"), or when any skill cites "the canon" or a named pattern.

0
installs
▌
Content Cms · blyatiful1 bundle
The content layer for a Next.js 16 site — plain @next/mdx for a handful of long-form pages (root mdx-components.tsx is mandatory, pageExtensions must include md/mdx, @next/mdx pinned to the next version), content-collections or velite for typed collections at scale, zod v4 frontmatter schemas, long-form prose styled from SYSTEM.md tokens instead of default gray prose classes, and Shiki code blocks highlighted at build inside RSCs (zero client JS). Contentlayer is dead and never an option. Invoke during the backend phase when the brief calls for a blog, docs, changelog, case studies, or any markdown-driven content, when choosing between MDX-in-repo and a headless CMS, or when article pages render as unstyled or default-gray prose. Trigger phrases — "add a blog", "MDX pages", "docs section", "markdown content", "frontmatter", "content collections", "style the article page", "syntax highlighting", "code blocks", "do we need a CMS".

0
installs
▌
Copywriting · blyatiful1 bundle
Voice definition and every string on an ultraweb site — derives a written voice spec from the brief's tone words, then writes headlines (hero H1 ≤8 words via named non-slop formulas), CTAs, microcopy, error/empty/success text, alt text, and metadata, enforcing an expanded banned-phrase list against dead startup copy. Invoke in Phase 8 (Voice) of the pipeline and whenever a Phase 6 section ships with draft strings; also when the user says "write the copy", "the headline is weak", "this sounds like AI", "fix the button text", "better error messages", or asks for taglines, CTAs, or microcopy.

0
installs
▌
Gate Visual · blyatiful1 bundle
The self-critique loop that separates working from first-grade — screenshots every page light and dark via the pixel-qa subagent, delegates scoring to the design-judge subagent against design/DIRECTION.md and the taste rubric (hierarchy, typography, spacing, color, distinctiveness, craft — 1–10 each), fixes the worst-ranked defect, re-shoots, and repeats — never fewer than 2 rounds at standard tier (one at sketch, up to five at flagship), stopping only on a SHIP verdict. Invoke in Phase 11 of the ultraweb pipeline after the six measurement gates have run through gate-runner, after any major visual change to an ultraweb site, or when the user says "is it actually good", "critique the design", "judge the site", or "run the visual gate". Writes per-round scores, defects fixed, and screenshot paths to design/QA.md.

0
installs
▌
Layout Grid · blyatiful1 bundle
Design the page layout system for an ultraweb build — container width strategy, 12-column and asymmetric grid vocabulary, section vertical rhythm with deliberate compression and release (never uniform py-24), at least four named asymmetry patterns, and bento composition rules — written to design/SYSTEM.md §layout during the foundation phase. Invoke in Phase 3 of the ultraweb pipeline once DIRECTION.md exists, or whenever layout feels monotonous, every section is the same centered column, spacing rhythm is flat, or someone asks for "a bento grid", "an offset layout", "asymmetric sections", "better section spacing", or "container widths".

0
installs
▌
Print Craft · blyatiful1 bundle
Design the print stylesheet (@media print) as a real surface for document-shaped pages — hide nav/consent/chrome, expand meaningful link URLs, control page breaks, set print type and @page margins, and economize ink — with a DACH focus on the Impressum, AGB, and Datenschutzerklärung, invoices, and quotes that German business practice routinely saves to PDF for compliance records. Invoke in the craft phase for any legal page, engagement letter, invoice/order confirmation, quote, case study, or annual report, or when the user says "the print version looks broken", "make it print/PDF cleanly", "print stylesheet", "save as PDF", "Impressum/AGB/Datenschutz to PDF", or "print-to-PDF".

0
installs
▌
Data Display · blyatiful1 bundle
Tables, stat blocks, and charts for ultraweb builds — alignment discipline (numbers right in tabular-nums, text left), one precision per column, responsive table strategies (priority columns, card collapse, scroll container), stat-row typography, and chart restraint (one question per chart, tokens-only colors, bars start at zero). Invoke in Phase 6 whenever a page shows structured data — stats/KPI rows, feature or comparison tables, spec sheets, dashboards, leaderboards, or any chart ("add a stats section", "comparison table", "show the numbers", "add a chart"). The comparison matrix in ultraweb:pricing inherits these rules.

0
installs
▌
Gate Content · blyatiful1 bundle
Copy and metadata completeness gate for ultraweb builds — reads the served HTML of every route to prove a unique title (≤60 chars) and description (140–160 chars), sweeps dead copy and bare microcopy (buttons, confirm dialogs, tooltips), traces every testimonial to the brief's proof inventory, flags any DACH/EU discount missing its 30-day-lowest-price disclosure (PAngV/Omnibus), extracts each page's heading outline so the H1→H2 sequence can be read as an argument for that page's conversion goal, audits voice consistency across sections, and crawls every internal link and anchor against the production server. Invoke in Phase 11 (Gates) of every ultraweb build, and whenever the user says "check the copy", "the button text", "broken links", "dead links", "duplicate titles", "30-day price", "voice consistency", "is the metadata complete", or "do the headings make sense".

0
installs
▌
Hidden Craft · blyatiful1 bundle
hidden-craft — rewards for the person who looks closer

0
installs
▌
Social Proof · blyatiful1 bundle
Design testimonial sections, logo walls, stat bands, and case-study teasers that read as genuine credibility instead of decoration — full attribution rules (name+role+company+face), monochrome logo-wall treatment at consistent heights, marquee discipline (pause on hover, static under reduced-motion), and honest-number rules for stats. Invoke during ultraweb Phase 6 when design/SITEMAP.md names a proof, testimonial, logos, stats, or trust section, or when the user asks for testimonials, customer quotes, reviews, a logo wall, "trusted by", "as seen in", social proof, stats bar, or case-study highlights.

0
installs
▌
Theme Worlds · blyatiful1 bundle
Re-map @theme tokens for a subtree — a per-case-study accent, a per-route palette, a per-scroll-act mode shift — using native CSS @scope and data-world/data-mode attribute scoping instead of a React ThemeProvider, keeping every value in tokens and every world AA-verified in both light and dark. Invoke opt-in when BRIEF.md flags a multi-brand, multi-tenant, or per-case-study need (agency portfolios, per-section palette shifts, a time-boxed campaign world), whenever award-canon's Scroll-as-Journey per-room data-mode or Content-Derived Color needs a scoped palette, or when the user says "per-case-study colors", "multi-brand theming", "a different accent per section/route", "theme this part of the page differently", or "scoped theme without a provider".

0
installs
▌
App Structure · blyatiful1 bundle
Defines the App Router architecture for an ultraweb build — React Server Components by default, "use client" pushed to leaf components and never into layouts or pages, server/client composition via children-as-slots, a decision table for where every kind of state lives (server, URL, client leaf, form action), the root-layout provider pattern (theme provider plus a focus-on-navigate leaf that resets focus after client route changes), and the file-organization contract all component skills follow. Invoke in Phase 5 immediately after scaffold, whenever placing a "use client" directive, deciding if a component is server or client, wiring providers into the root layout, choosing layout vs template, deciding where focus goes after a client-side route change, or when the question is "where does this component/state/fetch go" in a Next.js App Router project.

0
installs
▌
Component API · blyatiful1 bundle
The cross-cutting prop contract every component skill speaks — one shared dialect so ten independently-built components read as authored, not assembled. Fixes the canonical prop vocabulary (variant/size/tone), cva()-based variants that resolve to tokens never literals, asChild polymorphism via Radix Slot (never a custom `as` prop), the cn()/tailwind-merge order that lets a caller's className win, data-slot part targeting and ref-as-prop forwarding for React 19, controlled/uncontrolled parity, and native-attribute + a11y pass-through. Invoke in the Foundation phase after tokens and before the component tier, whenever building or restyling any component (buttons, cards, forms, pricing, data-display, hero…), deciding a prop name, adding a variant, or when the user says "the props are inconsistent", "name this prop", "should this be asChild", "why do the components feel assembled", or a component invents its own variant vocabulary.

0
installs
▌
Data Fetching · blyatiful1 bundle
The server-side data layer for a Next.js 16 site — fetch semantics (NOT cached by default anymore), the Cache Components model (the cacheComponents flag, the 'use cache' directive, cacheLife/cacheTag, revalidateTag with its cacheLife-profile second argument), streaming slow data behind Suspense with layout-true skeletons, parallel fetching with Promise.all, and when a route handler earns its place over a direct call. Invoke during the build phase when wiring any data into pages or sections, when deciding what to cache and for how long, when a page feels slow and needs streaming, or when someone reaches for useEffect/an API route to load first-party data. Trigger phrases — "fetch the data", "cache this query", "revalidate", "stale data", "stream this section", "Suspense boundary", "the page waits on the database", "loading is slow".

0
installs
▌
Gate Antislop · blyatiful1 bundle
Zero-tolerance sweep for the taste banned list in ultraweb builds — greppable commands for every mechanical cliché (purple-to-blue gradient combos, gradient headline text, emoji ranges in TSX, lorem ipsum, href="#", "Welcome to"/"Elevate your" dead copy, uniform rounded-xl+shadow-lg depth, the AI-era "AI-powered"/sparkle-badge tells) plus screenshot checks for the visual clichés (three identical icon cards, wallpaper section rhythm, dark-navy-glow template, reflexive bottom-right chat bubble, untouched shadcn look). Invoke in Phase 11 (Gates) of every ultraweb build, and whenever the user says "this looks AI-generated", "generic", "slop", "cliché", "looks like every other startup site", or "check for banned patterns".

0
installs
▌
Scroll Motion · blyatiful1 bundle
Scroll-driven motion for ultraweb builds — CSS animation-timeline (view()/scroll()) as the default engine, section entrance reveals (once by default), stagger choreography, parallax discipline (10–15% max), sticky scroll sequences, scroll-linked progress, contained horizontal scroll-snap galleries, and DIRECTION-gated Lenis smooth-scroll with an accessibility contract. Invoke in the ultraweb motion phase (Phase 9) after sections are built, or whenever the user says "animate on scroll", "reveal sections", "fade in as you scroll", "parallax", "scroll progress bar", "sticky scroll section", "smooth scroll", "horizontal scroll section", or "the page feels static when scrolling".

0
installs
▌
Product Detail · blyatiful1 bundle
Design and build the product detail page (PDP) — media gallery, the buy-box hierarchy (name → price → variant picker → one Add-to-cart), spec sheet, and trust signals — anchored by the Swatch-Driven Hero Crossfade — selecting a colour/material swatch crossfades the gallery, updates price inline, and writes URL state with no full reload and no WebGL. Invoke in Phase 6 for any product page — trigger phrases — "product page", "PDP", "product detail", "variant picker", "colour swatches", "size selector", "add-to-cart layout", "product gallery", "material preview", "lightweight configurator".

0
installs
▌
Server Actions · blyatiful1 bundle
Mutations for a Next.js 16 site — 'use server' actions validated with zod v4 (the { error } param, message is deprecated), useActionState form wiring per the stable React 19 signature, errors returned as data instead of thrown, optimistic UI with useOptimistic for low-stakes mutations, and a mandatory progressive-enhancement test (the form must work with JavaScript disabled). Invoke during the backend phase when wiring any form submit or write — contact form, newsletter signup, CRUD, settings save, like/toggle — when a form throws opaque errors instead of showing field messages, or when a mutation goes through a client fetch to an API route. Trigger phrases — "wire up the form", "handle the submit", "server action", "form validation", "contact form backend", "optimistic update", "the form errors are ugly".

0
installs
▌
Shape Language · blyatiful1 bundle
Design the geometry system for an ultraweb build — a coherent --radius-* scale matched to the direction's personality, the nested-radius formula (inner = outer minus padding), one site-wide shape motif family, and divider/clip-path/SVG-accent patterns — written to design/SYSTEM.md §shape during the foundation phase. Invoke in Phase 3 of the ultraweb pipeline once DIRECTION.md exists, or whenever corners look incoherent ("mixed radii", "the rounding feels off"), nested corners look thick, sections need dividers or angled edges, or someone asks for "clip-path sections", "SVG accents", "corner radius scale", or "shape language".

0
installs
▌
Command Palette · blyatiful1 bundle
Design and build the ⌘K command palette / on-site search composite for an ultraweb site — a discoverable keyboard-first fuzzy search (⌘K/Ctrl-K plus `/` and a visible affordance) layered as an accelerator over real navigation, never the only path, with a no-JS `/search` fallback page, combobox/listbox ARIA, focus-trap and restore, grouped ranked results, and recent/suggested on empty. Gated to SaaS/dev-tool sites with real content depth; for dev-tool brands it doubles as live product proof; an opt-in semantic (embeddings) mode is a P2 rider. Invoke in Phase 6 whenever a build needs on-site search or a command menu — trigger phrases — "command palette", "⌘K", "cmd-k", "command menu", "site search", "search the docs", "fuzzy search", "quick switcher", "spotlight". Not for a small brochure site.

0
installs
▌
Gate Responsive · blyatiful1 bundle
Breakpoint quality gate — executed by the gate-runner agent against the production server of record. Drives a real browser over every route in design/SITEMAP.md at 375×812, 768×1024 and 1440×900, saves a capture per combination under qa/ as the runner's evidence for the Lead and gate-antislop, measures overflow and the 44px touch-target floor with the measurement library, and exercises the mobile menu, one interaction per route, and the console. Invoke in Phase 11 after gate-code is green, on an iterate re-gate, after any layout or navigation change, or when the user says "check responsive", "test it on mobile", "does it work at 375", or "run the breakpoint sweep". Appends pass/fail with screenshot paths to design/QA.md.

0
installs
▌
Motion Language · blyatiful1 bundle
Defines the site-wide motion vocabulary every Tier-4 skill consumes — duration tiers (micro 150-250ms, small 250-400ms, section 400-700ms), ONE easing family as --ease-* tokens with a lib/motion.ts mirror, choreography rules (40-80ms stagger, once-only reveals, hard list of what never animates), a two-layer reduced-motion policy (CSS media query + useReducedMotion from motion/react), and a 0-3 motion-intensity dial set by the direction archetype. Invoke in the foundation phase before any animation is written, whenever a duration or easing value is needed, or when motion feels wrong ("animations everywhere", "timing feels off", "too much movement", "janky transitions", "make the motion consistent").

0
installs
▌
Feature Sections · blyatiful1 bundle
Build the feature/benefit sections of a page — the anti-three-cards skill. Chooses and implements one of five named layout patterns (alternating split, bento grid, sticky-scroll showcase, numbered editorial list, tabbed showcase) based on content shape, and enforces the adjacency rule that no two neighboring sections share a layout pattern. Invoke during the Build phase for any "features", "benefits", "how it works", "what we do", "services", or "capabilities" section named in design/SITEMAP.md, or whenever a features area is drifting toward three identical icon-cards in a row.

0
installs
▌
Gate Performance · blyatiful1 bundle
Core Web Vitals quality gate for ultraweb builds — runs Lighthouse against the production server of record (≥90 performance on every route, mobile emulation is the score of record), measures cold-load JS, font and transfer budgets from the network, audits the LCP element (next/image with preload — never the deprecated priority prop), proves zero CLS (intrinsic dimensions on all media), and sweeps the client bundle ("use client" creep, single LazyMotion provider with m. components, no star imports of lucide-react, a DIRECTION-gated second engine or renderer). Executed by the gate-runner agent as the sixth and last gate of Phase 11 in every ultraweb build, and whenever the user says "the site is slow", "Lighthouse", "Core Web Vitals", "LCP", "CLS", "bundle size", "page speed", or "performance audit".

0
installs
▌
Page Transitions · blyatiful1 bundle
Route transition strategy for ultraweb builds — decide whether routes transition at all, implement the stable template.tsx entrance as the default, and layer Next 16's EXPERIMENTAL View Transitions (experimental.viewTransition + ViewTransition from react) as progressive enhancement with shared-element continuity, and ship the REQUIRED route-change live announcer so screen readers hear each new page (client navigation is otherwise silent). Invoke in the ultraweb motion phase (Phase 9), or whenever the user says "page transitions", "route animations", "smooth navigation between pages", "shared element transition", "view transitions", "screen reader silent on navigation", "route announcer", or "pages pop in abruptly".

0
installs
▌
Gate Accessibility · blyatiful1 bundle
WCAG 2.2 AA quality gate for ultraweb builds — computes real contrast ratios in the browser (computed colors canvas-normalized to sRGB, so oklch tokens measure correctly), walks the full keyboard path via Playwright (tab order, focus-visible ring on every interactive element, Escape closes every overlay), audits landmarks, heading structure, and alt text, re-tests every page under emulated prefers-reduced-motion, injects the WCAG 1.4.12 text-spacing override to catch clipped or overlapping text, and for DACH-market builds scopes the BFSG/BaFG duty (jurisdiction, e-commerce service scope, microenterprise exemption) before verifying the required accessibility information. Invoke in Phase 11 (Gates) of every ultraweb build before reporting done, and whenever the user says "accessibility check", "a11y audit", "WCAG", "contrast check", "keyboard navigation", "screen reader", "focus states", "text spacing", "BFSG", "Barrierefreiheitserklärung", or "is this accessible".

0
installs
▌
Media Optimization · blyatiful1 bundle
Image, font, and video delivery engineering for Next.js 16 — next/image with preload (priority is deprecated), fill+sizes pairing, blur placeholders, a central next/font pipeline with self-hosted variable fonts, video facades, and LCP protection rules. Invoke during the build phase whenever a section renders an image, custom font, or video; and whenever the user mentions slow images, blurry images, layout shift, CLS, LCP, font flashing, "optimize images", "the hero loads slow", or Lighthouse complaints about media weight.

0
installs
▌
Micro Interactions · blyatiful1 bundle
Component-level interaction feedback for ultraweb builds — hover lifts, press states, animated link underlines, input focus treatment, toggle motion (transform/opacity only, 150–250ms, SYSTEM.md tokens), plus keyboard/focus parity for every hover-reveal affordance, branded chrome surfaces (selection, caret, scrollbar, optional custom cursor), and a bounded text-scramble reveal. Invoke in the ultraweb motion phase (Phase 9) after components are built, or whenever the user says "hover states", "micro-interactions", "the UI feels dead/static", "button feedback", "link underline animation", "focus rings", "custom cursor", "branded scrollbar", "text scramble/decode reveal", "hover-reveal keyboard access", or "polish the interactions". CSS-first — Motion (motion/react) only where CSS transitions cannot do the job.

0
installs

83 published skills