Skills
Practical instructions for better interface work.
12-principles-of-animationExternal
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
60fps-animationExternal
Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.
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".
accessibility-diffExternal
Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.
accessibility-scanExternal
Run the AccessLint rule engine against a live page and return a worklist of WCAG 2.2 violations grounded to DOM selectors and source locations.
accessible-focus-states
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
accessible-animationExternal
Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.
adaptExternal
Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
agent-browserExternal
Browser automation CLI for AI agents for navigation, form actions, extraction, screenshots, QA, and app testing.
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.
pbakaus-animateExternal
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
animate-expoExternal
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
animation-on-scrollExternal
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
animation-systemsExternal
Use when building a coherent animation system instead of one-off motion tweaks.
animation-vocabularyExternal
Sharpen motion language so animation choices feel deliberate and consistent.
antfuExternal
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
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.
apple-designExternal
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
apply-design-systemExternal
Reconnect an existing Figma design to published design system components instead of detached layers, local wrappers, or one-off assets.
ascii-animationExternal
This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.
ask-mattExternal
Router that picks the right Matt Pocock engineering flow for the current task.
ask-sonnerExternal
Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.
auditExternal
Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
audit-and-fixExternal
Accessibility auditing and remediation workflow that combines detection, prioritization, and practical fixes for WCAG issues.
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.
banner-designExternal
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
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.
bencium-innovative-ux-designerExternal
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
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-accessibilityExternal
Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
better-colorsExternal
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
better-interfaceExternal
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
better-layoutExternal
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
better-typographyExternal
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
better-uiExternal
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.
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.
bragExternal
Turn a finished project into a short shareable launch video with motion, music, and copy.
brandExternal
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
brandkitExternal
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
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.
budgeExternal
Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget for live tuning before persisting.
build-primitiveExternal
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
canvas-designExternal
Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.
cc-figma-componentExternal
Generate variable-bound Figma component sets from component-contract definitions after the token collections exist.
cc-figma-tokensExternal
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
clarifyExternal
Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
cobejsExternal
Use when building lightweight animated globe or orb visuals with Cobe.
codebase-designExternal
Guidance for designing deep modules with small interfaces and clean seams.
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.
colorizeExternal
Introduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.
compact-landingExternal
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
company-logosExternal
Use when laying out logos, trust rows, or brand collections in a clean and balanced way.
container-linesExternal
Use when using borders and container structure as part of the visual system.
contrast-checkerExternal
Compatibility listing for contrast-checker installs from AccessLint's marketplace skill set.
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".
create-adaptable-composableExternal
Create library-grade Vue composables that support plain values, refs, and getters with predictable reactivity.
create-anatomyExternal
Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions anatomy, anatomy annotation, component anatomy, create anatomy, or wants to annotate a component's structural elements.
create-design-mdExternal
Create or update a DESIGN.md from an existing product repository or public website, with evidence-based design tokens and guidance.
create-voiceExternal
Generate VoiceOver, TalkBack, and ARIA screen reader specs in Figma with focus order, property tables, and announcements by component state.
critiqueExternal
Evaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.
daisyuiExternal
Official daisyUI component library skill, providing docs, class names, examples and code examples to generate better daisyUI code.
dashboard-information-density
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
data-table-scannability
Structure table rows and columns so the eye can scan down and across without losing its place.
define-goalExternal
Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.
delightExternal
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
designExternal
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
design-first-ui-promptingExternal
Use when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.
design-labExternal
Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.
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.
design-systemExternal
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
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.
diagnosing-bugsExternal
Systematic bug diagnosis through reproduce, minimize, hypothesize, instrument, and fix.
distillExternal
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
domain-modelingExternal
Builds and sharpens project domain models and terminology.
effectExternal
Opinionated guidance for building production TypeScript applications with Effect v4, including workflows, services, layers, schemas, configuration, scheduling, caching, streams, HTTP clients, and tests.
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.
engineeringExternal
Routing bundle for code work covering planning, debugging, TDD, architecture, and execution flows.
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-code-connectExternal
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
figma-create-new-fileExternal
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)
figma-design-to-codeExternal
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
figma-generate-designExternal
Translate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.
figma-generate-diagramExternal
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
figma-generate-libraryExternal
Build or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.
figma-implement-motionExternal
Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.
figma-swiftuiExternal
SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
figma-useExternal
Mandatory prerequisite before every use_figma call — plugin API rules for creating, editing, and inspecting Figma files through MCP.
figma-use-figjamExternal
This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
figma-use-motionExternal
Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.
figma-use-slidesExternal
This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
find-animation-opportunitiesExternal
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
fixing-accessibilityExternal
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
fixing-metadataExternal
Audit and fix page metadata including titles, meta descriptions, Open Graph, Twitter cards, canonical URLs, and JSON-LD structured data. Use when shipping new pages or fixing SEO and social preview issues.
fixing-motion-performanceExternal
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
form-field-validation-timing
Validate at the right moment — not on every keystroke, not only on submit.
frontend-designExternal
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-slidesExternal
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
frontend-ui-engineeringExternal
Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.
output-skillExternal
Enforces complete, non-truncated code output and blocks placeholder or half-finished responses.
gc-minimal-zine-poster-v0-1External
Generate quiet minimal zine-style editorial poster prompts and matching raster images from themes, moods, objects, photos, or content briefs.
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.
generating-sounds-with-aiExternal
Audit Web Audio API code for procedural sound synthesis quality, UX decisions, and parameter best practices.
gh-stackExternal
Manage stacked branches and dependent pull requests with the gh stack GitHub CLI extension.
glassmorphismExternal
This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.
gpt-tasteskillExternal
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
grill-with-docsExternal
Sharpens the domain model and updates supporting docs while grilling through design choices.
gsapExternal
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
gsap-coreExternal
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
gsap-frameworksExternal
Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.
gsap-performanceExternal
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
gsap-pluginsExternal
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
gsap-reactExternal
Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.
gsap-scrolltriggerExternal
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
gsap-scrolltrigger-storytellingExternal
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
gsap-timelineExternal
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
gsap-utilsExternal
Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.
gsap-webExternal
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
hardenExternal
Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.
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.
i-have-adhdExternal
Shape output for a reader with ADHD by leading with the next action, numbering steps, suppressing tangents, and making progress visible.
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.
improveExternal
Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or take the project next, or generate handoff plans for another agent to implement.
improve-animationsExternal
Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.
improve-codebase-architectureExternal
Scans a codebase for deepening opportunities and turns them into a prioritized visual report.
improve-reactExternal
Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.
improve-uiExternal
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent without modifying product source.
brutalist-skillExternal
Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
interaction-designExternal
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
interface-designExternal
Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.
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-pageExternal
Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.
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.
linear-disciplineExternal
Keep Linear tracking honest during development with search-before-create, lifecycle updates, and close-the-loop discipline.
linear-finish-installExternal
Complete Linear tracking installation by writing always-on rules and verifying Linear MCP authentication.
linear-methodologyExternal
Route Linear tracking work through a methodology for setting up, syncing, monitoring, and maintaining honest project data.
linear-monitorExternal
Health-check Linear projects for slipping dates, stale in-progress work, orphan issues, and tracking anti-patterns.
linear-setupExternal
Bootstrap or extend Linear project tracking with evidence-based backfill, milestones, dependencies, and repository discipline.
linear-syncExternal
Audit and rescue an existing Linear project by reconciling its issues, milestones, dependencies, and tracking protocol with repository reality.
link-purposeExternal
Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.
lottie-animationExternal
Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.
make-interfaces-feel-betterExternal
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
marquee-loopExternal
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
masked-revealExternal
Use when revealing content with masked motion, clipped transitions, or layered entrances.
mastering-animate-presenceExternal
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
matterjsExternal
Use when building physics-driven interactions and layout behaviors with Matter.js.
micro-interactionExternal
UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.
minimalist-skillExternal
Editorial minimal interfaces with monochrome palettes, typographic contrast, and restrained visuals.
morphing-iconsExternal
Build icon components that morph between SVG shapes with smooth, line-based transformation.
motion-easing-basics
Use short, purposeful easing curves that clarify state changes instead of decorating them.
navigation-active-states
Make it unambiguous where the user is, at every level of nested navigation.
next-cache-componentsExternal
Enable Cache Components in a Next.js app and resolve blocking routes surfaced during adoption.
next-cache-components-optimizerExternal
Drive a Next.js route to instant navigation under Cache Components using a failing Playwright test and an agentic fix loop.
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.
nuxtExternal
Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.
oklch-skillExternal
Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.
optical-alignment
Align interface elements by perceived visual weight, not just mathematical geometry.
optimizeExternal
Diagnose and improve interface performance across rendering, motion smoothness, assets, and load speed.
overdriveExternal
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
page-transition-animationExternal
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
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".
pick-ui-libraryExternal
Choose an opinionated, trusted library for common frontend tasks including components, motion, charts, interaction, state, and styling.
piniaExternal
Pinia state management best practices for type-safe Vue stores, getters, and actions.
playwright-cliExternal
Official Playwright CLI skill for browser automation, test generation, tracing, and session-driven end-to-end testing workflows.
pnpmExternal
pnpm package manager guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides.
polishExternal
Final quality pass for spacing, alignment, and consistency to prepare UI for launch.
prefer-container-queriesExternal
Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.
pressed-button-feedback
Give every interactive control an immediate, physical-feeling response to a press.
pricing-pageExternal
Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.
progressive-blurExternal
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
mattpocock-prototypeExternal
Builds throwaway prototypes to answer design or logic questions quickly.
emilkowalski-prototypeExternal
Build multiple genuinely different UI variants behind a visual picker so the strongest direction can be evaluated and promoted.
pseudo-elementsExternal
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
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.
ramsExternal
Real-time design feedback skill focused on accessibility, spacing, typography, contrast, and component quality.
react-doctorExternal
Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.
react-native-best-practicesExternal
React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
react-router-framework-modeExternal
React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.
redesign-skillExternal
Audit and upgrade existing interfaces to premium visual quality while preserving product functionality.
refactorExternal
Compatibility listing for refactor installs from AccessLint's marketplace skill set.
refine-liveExternal
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
remotion-best-practicesExternal
Domain-specific knowledge base for building videos with Remotion and React.
responsive-breakpoint-strategy
Choose breakpoints based on where your content actually breaks, not a fixed device-width list.
review-animationsExternal
Review animation quality, timing, and motion consistency with a production-critical eye.
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.
scroll-worldExternal
Build an immersive scroll-scrubbed 3D world landing page for any brand with Higgsfield-generated scenes, seamless camera clips, and a portable scroll-scrub engine.
iannuttall-seoExternal
Use for SEO audits, rankings, keyword research, indexing, metadata, Search Console, GA4, and AI search visibility. Routes to evidence-backed reports through the local SEO CLI and MCP server.
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".
setup-matt-pocock-skillsExternal
One-time repo setup for the engineering skill workflow and related conventions.
shadcnExternal
Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.
shapeExternal
Plan feature UX before coding via a structured design interview that produces an actionable design brief.
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.
slidesExternal
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
slidevExternal
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
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.
sounds-on-the-webExternal
Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.
spacing-rhythm
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.
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.
svelte-code-writerExternal
Official Svelte code-writing skill focused on modern Svelte patterns, component composition, and production-ready implementations.
svg-animationExternal
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
swiftui-ui-patternsExternal
Best practices and example-driven guidance for building SwiftUI views and components. Includes tab architecture and screen composition.
swiss-designExternal
Swiss design system skill focused on grid discipline, typography hierarchy, and clean editorial interface composition.
sync-figma-tokenExternal
Sync design tokens between code and Figma variables with drift reporting, approval gates, safe delta apply, and persisted reports.
tailwindcssExternal
Use when you are implementing UI with Tailwind and want reusable, practical utility-first patterns.
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.
tddExternal
Red-green-refactor workflow for building features and fixes one slice at a time.
text-to-lottieExternal
Turn text prompts into polished Lottie animations for motion-heavy UI work.
thermo-nuclear-code-quality-reviewExternal
Run an extremely strict maintainability review for abstraction quality, giant files, and spaghetti-condition growth.
threejsExternal
Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.
threejs-animationExternal
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
threejs-fundamentalsExternal
Three.js scene setup guidance for cameras, renderer configuration, object hierarchy, and transforms.
threejs-geometryExternal
Three.js geometry patterns for built-in shapes, BufferGeometry, custom meshes, and instancing.
threejs-interactionExternal
Three.js interaction patterns for raycasting, controls, pointer input, and object selection.
threejs-lightingExternal
Three.js lighting guidance for light types, shadows, environment lighting, and performance tuning.
threejs-loadersExternal
Three.js asset loading patterns for GLTF, textures, HDR assets, async loading, and progress handling.
threejs-materialsExternal
Three.js material guidance for PBR, classic materials, shader materials, and material optimization.
threejs-postprocessingExternal
Three.js post-processing techniques with EffectComposer, bloom, depth of field, and screen-space effects.
threejs-shadersExternal
Three.js shader guidance for GLSL, ShaderMaterial, uniforms, and custom vertex and fragment effects.
threejs-texturesExternal
Three.js texture workflows for maps, UV mapping, environment maps, and texture configuration.
to-issuesExternal
Breaks a plan or PRD into independently actionable issues.
to-prdExternal
Turns a conversation into a PRD and publishes it to the issue tracker.
to-spring-or-not-to-springExternal
Audit animation timing choices to decide when springs versus easing curves produce better motion.
transitions-devExternal
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
triageExternal
Moves issues through a structured triage state machine.
tsdownExternal
Bundle TypeScript and JavaScript libraries with tsdown, including declarations and multi-format builds.
turborepoExternal
Turborepo monorepo build system guidance for pipelines, caching, filtering, CI, and package boundaries.
typesetExternal
Improve typography systems, hierarchy, readability, and text cadence for more intentional interfaces.
ui-skills-rootExternal
Use when the user needs UI help and you must route by topic, stack, and intent to the smallest useful set of UI skills.
ui-stylingExternal
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
ui-ux-pro-maxExternal
Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces.
unlazyExternal
Anti-laziness execution discipline that finishes substantial tasks through gate files and runnable checks instead of premature done reports.
unocssExternal
UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.
unslopExternal
Cut AI tells from any writing by editing text to remove machine patterns and restore a more human voice.
use-of-colorExternal
Compatibility listing for use-of-color installs from AccessLint's marketplace skill set.
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.
react-best-practicesExternal
Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.
video-interaction-mapperExternal
Analyze a UI screen recording and map interaction states into an annotated Figma Design storyboard with extracted before/after frames.
viteExternal
Vite configuration and plugin guidance, including SSR and Vite 8 Rolldown migration patterns.
vitepressExternal
VitePress documentation site guidance for configuration, theming, and Markdown plus Vue content.
vitestExternal
Vitest testing best practices for unit tests, mocking, coverage, fixtures, and test filtering.
vueExternal
Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.
vuejs-ai-vue-best-practicesExternal
Core Vue development best practices for component architecture, reactivity, and maintainable code.
antfu-vue-best-practicesExternal
Vue.js best practices emphasizing Composition API with script setup and TypeScript.
vue-debug-guidesExternal
Practical debugging workflows for diagnosing and fixing Vue reactivity, rendering, and state issues.
vue-jsx-best-practicesExternal
Guidance for writing robust, type-safe, and readable Vue components using JSX.
vue-options-api-best-practicesExternal
Best practices for structuring and scaling Vue applications built with the Options API.
vue-pinia-best-practicesExternal
Patterns for clean, scalable state management in Vue apps using Pinia stores.
vuejs-ai-vue-router-best-practicesExternal
Routing architecture and navigation patterns for maintainable Vue Router applications.
antfu-vue-router-best-practicesExternal
Vue Router 4 patterns covering navigation guards, route params, and route lifecycle interactions.
vuejs-ai-vue-testing-best-practicesExternal
Testing strategies for Vue applications, including component tests, integration tests, and reliability patterns.
antfu-vue-testing-best-practicesExternal
Vue testing guidance using Vitest, Vue Test Utils, component testing, mocking, and Playwright E2E.
vueuse-functionsExternal
Apply VueUse composables to build concise, maintainable Vue and Nuxt features.
wcag-audit-patternsExternal
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
web-cloneExternal
网站复刻 / 克隆方法论。Use when the user says to clone, reproduce, or recreate a website or WebGL/Canvas/Three.js effect. Covers source-first reconstruction, repo scaffolding, reverse engineering, implementation paths, and verification for static sites, content sites, and heavy front-end experiences.
vercel-labs-web-design-guidelinesExternal
Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.
antfu-web-design-guidelinesExternal
Review UI code for web interface guideline compliance, including accessibility and UX best practices.
web-quality-auditExternal
Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.
webgl-componentsExternal
Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.
webgl-landing-steeringExternal
Use when steering a landing page around a WebGL centerpiece or hero experience.
write-swiftExternal
How to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet. Use when writing, reviewing, or migrating Swift, or when a concurrency error, a hang, a data race, a retain cycle, or a performance problem needs fixing.