Skills
Practical instructions for better interface work.
accessibilityExternal
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
emilkowalski-animateExternal
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
animation-vocabularyExternal
Sharpen motion language so animation choices feel deliberate and consistent.
antfu-designExternal
antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.
anti-ai-slop-writingExternal
Produce human-sounding text that avoids detectable AI patterns with banned vocabulary, structural variety, and voice calibration.
anti-slopExternal
Detect and remove AI writing tells from prose while preserving the author's voice in blogs, docs, emails, and reports.
apply-design-systemExternal
Reconnect an existing Figma design to published design system components instead of detached layers, local wrappers, or one-off assets.
audit-design-systemExternal
Audit a Figma screen or component for design-system drift, including missing shared components, local overrides, and unbound tokens.
balise-ux-writingExternal
Reviews, rewrites, creates, harmonizes, and implements user-centered interface copy across design files, screenshots, product specifications, source code, localization catalogs, prototypes, and rendered applications. Use for buttons, navigation, forms, errors, empty states, onboarding, confirmations, settings, consent, notifications, help, and system feedback while preserving product behavior, terminology, voice, accessibility, localization, legal meaning, component structure, and implementation constraints.
baseline-uiExternal
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
beautiful-shadowsExternal
Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.
best-practicesExternal
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
better-interfaceExternal
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
better-writingExternal
Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
bolderExternal
Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
breakExternal
Answers "does this survive?" for one component. Renders it on a page in every state real use can put it in, and hands that page over as a visual report of what broke.
broExternal
Re-explain the previous assistant message in a much simpler, plain-language version when the last answer was too dense.
color-contrast-for-taste
Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.
compact-landingExternal
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
core-web-vitalsExternal
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
critiqueExternal
Evaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.
delightExternal
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
design-reviewExternal
Run a sharp, prioritized design critique of a UI — a URL, a screenshot/image, or a component file — covering visual hierarchy, typography, spacing, color & contrast, motion, component states, responsiveness, accessibility, and brand consistency. Returns findings ranked from blocking to polish, each with a specific fix; can optionally apply the fixes to code. Use when the user asks to review/critique a design, page, screen, component, or screenshot, or to check craft/accessibility before shipping.
taste-skillExternal
Senior UI/UX frontend skill that enforces anti-slop design decisions, motion quality, and architecture discipline.
deslopExternal
Remove AI writing patterns from prose so drafts, edits, and reviews sound like a specific human wrote them.
distillExternal
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
emil-design-engExternal
Emil Kowalski's design-engineering philosophy for UI polish, components, animation, and production-ready frontend craft.
empty-state-design
Treat empty states as an onboarding opportunity, not a placeholder to fill later.
explain-interfaceExternal
Answers how was this built about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
figma-generate-libraryExternal
Build or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.
find-animation-opportunitiesExternal
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
generate-project-planExternal
Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro callout, table, multi-column text, sticky column, diagram section, metadata strip) has its own subskill reference file. Use when the user asks for 'project plan in FigJam', 'interactive project plan', '/generate-project-plan', or provides a PRD and wants per-section confirmation on content + rendering.
gpt-tasteskillExternal
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
gsap-timelineExternal
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
soft-skillExternal
High-end visual design guidance for premium typography, spacing, depth, and animation systems.
human-reviewExternal
Open HTML, Markdown, or localhost pages in the browser so the user can edit text directly, leave anchored comments, and send all feedback back in one batch.
humanizeExternal
Remove signs of AI-generated writing from prose and audit docs folders for slop across content, language, style, and rhetoric.
blader-humanizerExternal
Rewrite AI-sounding text so it reads naturally without changing meaning, based on Wikipedia's signs of AI writing.
aboudjem-humanizerExternal
Detect 53 AI writing patterns and rewrite text in five voice profiles, with optional scoring and in-place Markdown editing.
image-to-code-skillExternal
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
imagegen-frontend-mobileExternal
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
imagegen-frontend-webExternal
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
impeccableExternal
Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.
brutalist-skillExternal
Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
interface-reviewExternal
Interface review of a change rather than a screen: uncommitted work, the current branch, or a pull request. Covers interface quality, not correctness, tests, or security.
landing-page-designExternal
Build high-converting landing pages with intake questions, page structure, conversion copy, SEO, and a disciplined visual system.
layoutExternal
Fix spacing, composition, and hierarchy rhythm when UI layout feels crowded, flat, or misaligned.
make-interfaces-feel-betterExternal
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
minimalist-skillExternal
Editorial minimal interfaces with monochrome palettes, typographic contrast, and restrained visuals.
nitroExternal
Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server routes/event handlers, route rules, caching, storage, tasks, websockets, or deploying to Node/Bun/Deno/Cloudflare/Vercel.
no-ai-slopExternal
Edit drafts into sharper, more human writing while preserving personal voice, or detect AI-slop patterns without rewriting.
overdriveExternal
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
performanceExternal
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".
polishExternal
Final quality pass for spacing, alignment, and consistency to prepare UI for launch.
quieterExternal
Tone down overly intense designs while keeping quality high and preserving hierarchy.
rad-spacingExternal
Apply hierarchical spacing variables across Figma layouts using proximity-based 4px and 8px increments from the file's library.
redesign-skillExternal
Audit and upgrade existing interfaces to premium visual quality while preserving product functionality.
scandinavian-designExternal
Apply a refined Scandinavian visual system with a neutral black-and-white foundation, restrained sans-serif typography, purposeful product imagery, generous spacing, clear page chapters, and minimal decoration. Use when the user invokes /scandinavian-design or requests a Nordic, monochrome, calm, spacious, restrained, or minimalist interface.
addyosmani-seoExternal
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".
signal-geometryExternal
Create sparse geometric illustrations and posters from concepts or briefs, using precise spatial systems, restrained contrast, and matte paper texture.
simple-englishExternal
Write or rewrite technical text with ASD-STE100 Simplified Technical English for clear, unambiguous, translation-friendly documentation and interface copy.
slide-wrightExternal
Create beautiful, animated web presentations from a topic, rough notes, or an outline. Generates a custom theme and a short two-slide preview, then builds the full deck only once the user confirms the direction. Use when the user wants to make slides, a presentation, a talk deck, or a pitch deck.
slopbethExternal
Remove AI-writing tells from prose while preserving meaning, voice, and density during drafting, editing, or review.
smooth-shadow-ringExternal
Style elevated surfaces with smooth shadow ring utilities instead of combining borders or rings with shadows and creating double edges.
stitch-skillExternal
Semantic design-system skill for Google Stitch with strict anti-generic UI generation rules.
stop-slopExternal
Remove AI writing patterns from prose when drafting, editing, or reviewing text to eliminate predictable AI tells.
taste-skill-v1External
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
typesetExternal
Improve typography systems, hierarchy, readability, and text cadence for more intentional interfaces.
unlazyExternal
Anti-laziness execution discipline that finishes substantial tasks through gate files and runnable checks instead of premature done reports.
unslopExternal
Cut AI tells from any writing by editing text to remove machine patterns and restore a more human voice.
variantExternal
Answers which of these rather than is this right. Builds several genuinely different versions of one piece of UI behind a picker in the real page, so you can flip between them and promote the one that wins.