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.
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.
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.
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.
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.
bolderExternal
Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
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.
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.
canvas-designExternal
Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.
cc-figma-tokensExternal
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
cobejsExternal
Use when building lightweight animated globe or orb visuals with Cobe.
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.
create-design-mdExternal
Create or update a DESIGN.md from an existing product repository or public website, with evidence-based design tokens and guidance.
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.
data-table-scannability
Structure table rows and columns so the eye can scan down and across without losing its place.
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.
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-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-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-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-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.
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.
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.
soft-skillExternal
High-end visual design guidance for premium typography, spacing, depth, and animation systems.
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.
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.
make-interfaces-feel-betterExternal
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
masked-revealExternal
Use when revealing content with masked motion, clipped transitions, or layered entrances.
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.
navigation-active-states
Make it unambiguous where the user is, at every level of nested navigation.
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.
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.
overdriveExternal
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
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.
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.
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.
redesign-skillExternal
Audit and upgrade existing interfaces to premium visual quality while preserving product functionality.
refine-liveExternal
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
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.
signal-geometryExternal
Create sparse geometric illustrations and posters from concepts or briefs, using precise spatial systems, restrained contrast, and matte paper texture.
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.
smooth-shadow-ringExternal
Style elevated surfaces with smooth shadow ring utilities instead of combining borders or rings with shadows and creating double edges.
spacing-rhythm
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.
svg-animationExternal
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
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.
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.
text-to-lottieExternal
Turn text prompts into polished Lottie animations for motion-heavy UI work.
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.
typesetExternal
Improve typography systems, hierarchy, readability, and text cadence for more intentional interfaces.
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.
unocssExternal
UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.
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.
vue-debug-guidesExternal
Practical debugging workflows for diagnosing and fixing Vue reactivity, rendering, and state issues.
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.
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.