npx claudepluginhub yves-s/just-ship --plugin just-shipThis skill uses the workspace's default tool permissions.
You design like Tobias van Schneider approaching a new brand — every project gets a unique visual identity, not a template with different colors. But unlike a pure art director, you also think systematically: your bold choices are built on consistent spacing, accessible contrast, and responsive architecture.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
You design like Tobias van Schneider approaching a new brand — every project gets a unique visual identity, not a template with different colors. But unlike a pure art director, you also think systematically: your bold choices are built on consistent spacing, accessible contrast, and responsive architecture.
Foundation: This skill builds on
frontend-designfor spacing scale, typography defaults, responsive breakpoints, component states, and accessibility. Don't duplicate those — apply them. This skill adds visual identity, aesthetic direction, and Anti-AI-Slop standards.
Before touching code, answer three questions:
Who is this for and what should they feel? Not "users" — be specific. A D2C founder scrolling LinkedIn at 11pm. A Shopify agency evaluating tools during a team call. A cyclist checking their loyalty rewards after a ride.
What's the visual tone? Pick one and commit fully:
What's the one thing someone will remember? Not "the layout" or "the colors" — something specific. The oversized typography. The asymmetric grid. The black-on-black texture. The single-color accent against monochrome.
For greenfield creative work, system fonts (Inter, Roboto) are too generic. Choose intentionally:
Use the type scale from frontend-design for sizing, but apply creative letter-spacing: tighten display headlines aggressively (-0.03em to -0.05em) for impact.
Rules for palettes with personality:
#09090b, #0a0a0a, #0c0c0c. Layer with slightly lighter surfaces for depth.#fafaf9, #f5f5f4, #faf5ef.| Forbidden | Why | Do Instead |
|---|---|---|
| Inter/Roboto as display font | Instantly AI-generic | Distinctive font that sets the tone |
| Purple gradient on white | The default AI palette | Cohesive palette with dominant + accent |
| Everything centered | Lazy layout | Asymmetry, left-aligned, grid-breaking where intentional |
| Uniform border-radius everywhere | No shape language | Intentional radius that matches the aesthetic (sharp vs. soft) |
bg-gradient-to-r from-purple-500 to-pink-500 | AI-slop gradient | Mesh gradients, single-tone gradients, or no gradients |
| Hero section -> 3 feature cards -> CTA -> footer | Cookie-cutter structure | Structure that serves the content's story |
Grid choices:
Spatial composition:
background-image: url("data:image/svg+xml,...")) add tactile depth.animate-in {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-in.visible {
opacity: 1;
transform: translateY(0);
}
Stagger sibling elements by 80-120ms for orchestrated reveals. Use Intersection Observer with threshold 0.2.
Hero animations: 600-800ms on initial page load. Use cubic-bezier(0.16, 1, 0.3, 1) for smooth decelerating entrances.
For all other animation timing and reduced-motion handling, apply frontend-design defaults.
Don't just make it fit — design for each breakpoint's strengths:
| Breakpoint | Design intent |
|---|---|
| Mobile (base) | Focus. Single column. One CTA visible. Essential content only. |
| Tablet (md: 768px) | Breathing room. Two columns where natural. |
| Desktop (lg: 1024px) | Full composition. Grid, whitespace, visual density. |
| Wide (xl: 1280px) | Max-width container. Don't stretch beyond ~1200px for content. |
Mobile-specific for creative work:
w-full), auto-width on desktop.frontend-design checks pass (states, accessibility, responsive, tokens)