Skills
Instructions your agent can follow for layout, type, motion, forms and more.
230 skills
Results
Deslopby stephenturner
Remove AI writing patterns from prose so drafts, edits, and reviews sound like a specific human wrote them.
TasteExternalGitHub stars: 16
Distillby pbakaus
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
Design SystemsExternalGitHub stars: 95.1K
Domain Modelingby mattpocock
Builds and sharpens project domain models and terminology.
Design SystemsExternalGitHub stars: 306.5K
Effectby kitlangton
Opinionated guidance for building production TypeScript applications with Effect v4, including workflows, services, layers, schemas, configuration, scheduling, caching, streams, HTTP clients, and tests.
Design SystemsExternalGitHub stars: 352
Emil Design Engby emilkowalski
Emil Kowalski's design-engineering philosophy for UI polish, components, animation, and production-ready frontend craft.
TasteExternalGitHub stars: 51.4K
Empty States That Do Somethingby UI Skillbook
Treat empty states as an onboarding opportunity, not a placeholder to fill later.
Visual
Engineeringby mattpocock
Routing bundle for code work covering planning, debugging, TDD, architecture, and execution flows.
Design SystemsExternalGitHub stars: 306.5K
Explain Interfaceby jakubkrehel
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.
TasteExternalGitHub stars: 9.2K
Figma Code Connectby figma
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.
VisualExternalGitHub stars: 2.1K
Figma Create New Fileby figma
**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)
VisualExternalGitHub stars: 2.1K
Figma Design to Codeby figma
**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.
VisualExternalGitHub stars: 2.1K
Figma Generate Designby figma
Translate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.
Design SystemsExternalGitHub stars: 2.1K
Figma Generate Diagramby figma
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.).
VisualExternalGitHub stars: 2.1K
Figma Generate Libraryby figma
Build or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.
Design SystemsExternalGitHub stars: 2.1K
Figma Swiftuiby figma
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.
VisualExternalGitHub stars: 2.1K
Figma Useby figma
Mandatory prerequisite before every use_figma call — plugin API rules for creating, editing, and inspecting Figma files through MCP.
Design SystemsExternalGitHub stars: 2.1K
Figma Use Figjamby figma
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.
VisualExternalGitHub stars: 2.1K
Figma Use Slidesby figma
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.
VisualExternalGitHub stars: 2.1K
Find Animation Opportunitiesby emilkowalski
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
MotionExternalGitHub stars: 51.4K
Fixing Metadataby ibelick
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.
Design SystemsExternalGitHub stars: 10.4K
Frontend Designby anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.
VisualExternalGitHub stars: 184.8K
Frontend Slidesby zarazhangrui
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
MotionExternalGitHub stars: 31.6K
Frontend Ui Engineeringby addyosmani
Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.
LayoutExternalGitHub stars: 111.7K
Gc Minimal Zine Poster V0 1by LiamGvchi
Generate quiet minimal zine-style editorial poster prompts and matching raster images from themes, moods, objects, photos, or content briefs.
VisualExternalGitHub stars: 7.4K
Generate Project Planby figma
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.
LayoutExternalGitHub stars: 2.1K
Gh Stackby github
Manage stacked branches and dependent pull requests with the gh stack GitHub CLI extension.
Design SystemsExternalGitHub stars: 1.7K
Gpt Tasteby Leonxlnx
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
TasteExternalGitHub stars: 105.4K
Grill with Docsby mattpocock
Sharpens the domain model and updates supporting docs while grilling through design choices.
Design SystemsExternalGitHub stars: 306.5K
Gsap Timelineby greensock
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
MotionExternalGitHub stars: 17.5K
Hardenby pbakaus
Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.
Design SystemsExternalGitHub stars: 95.1K
High End Visual Designby Leonxlnx
High-end visual design guidance for premium typography, spacing, depth, and animation systems.
TasteExternalGitHub stars: 105.4K
Human Reviewby petergyang
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.
TasteExternalGitHub stars: 1.4K
Humanizeby aashaexo
Remove signs of AI-generated writing from prose and audit docs folders for slop across content, language, style, and rhetoric.
TasteExternalGitHub stars: 306
Humanizerby blader
Rewrite AI-sounding text so it reads naturally without changing meaning, based on Wikipedia's signs of AI writing.
TasteExternalGitHub stars: 62.3K
Humanizerby Aboudjem
Detect 53 AI writing patterns and rewrite text in five voice profiles, with optional scoring and in-place Markdown editing.
TasteExternalGitHub stars: 295
I Have Adhdby ayghri
Shape output for a reader with ADHD by leading with the next action, numbering steps, suppressing tangents, and making progress visible.
VisualExternalGitHub stars: 59.3K
Image to Code Skillby Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Imagegen Frontend Mobileby Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Imagegen Frontend Webby Leonxlnx
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.
VisualExternalGitHub stars: 105.4K
Impeccableby pbakaus
Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.
TasteExternalGitHub stars: 95.1K
Improveby shadcn
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.
Design SystemsExternalGitHub stars: 9.3K
Improve Codebase Architectureby mattpocock
Scans a codebase for deepening opportunities and turns them into a prioritized visual report.
Design SystemsExternalGitHub stars: 306.5K
Improve Reactby millionco
Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.
PerformanceExternalGitHub stars: 15.1K
Improve Uiby ibelick
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.
VisualExternalGitHub stars: 10.4K
Industrial Brutalist Uiby Leonxlnx
Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
TasteExternalGitHub stars: 105.4K
Interaction Designby wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
InteractionExternalGitHub stars: 42K
Interface Designby Dammyjay93
Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.
VisualExternalGitHub stars: 5.9K
Interface Reviewby jakubkrehel
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.
TasteExternalGitHub stars: 9.2K
Landing Pageby MengTo
Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.
VisualExternalGitHub stars: 7.1K
Landing Page Designby elayadesign
Build high-converting landing pages with intake questions, page structure, conversion copy, SEO, and a disciplined visual system.
VisualExternalGitHub stars: 12K
Layoutby pbakaus
Fix spacing, composition, and hierarchy rhythm when UI layout feels crowded, flat, or misaligned.
TasteExternalGitHub stars: 95.1K
Linear Disciplineby tjcages
Keep Linear tracking honest during development with search-before-create, lifecycle updates, and close-the-loop discipline.
VisualExternalGitHub stars: 9
Linear Finish Installby tjcages
Complete Linear tracking installation by writing always-on rules and verifying Linear MCP authentication.
Design SystemsExternalGitHub stars: 9
Linear Methodologyby tjcages
Route Linear tracking work through a methodology for setting up, syncing, monitoring, and maintaining honest project data.
Design SystemsExternalGitHub stars: 9
Linear Monitorby tjcages
Health-check Linear projects for slipping dates, stale in-progress work, orphan issues, and tracking anti-patterns.
Design SystemsExternalGitHub stars: 9
Linear Setupby tjcages
Bootstrap or extend Linear project tracking with evidence-based backfill, milestones, dependencies, and repository discipline.
Design SystemsExternalGitHub stars: 9
Linear Syncby tjcages
Audit and rescue an existing Linear project by reconciling its issues, milestones, dependencies, and tracking protocol with repository reality.
Design SystemsExternalGitHub stars: 9
Make Interfaces Feel Betterby jakubkrehel
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
TasteExternalGitHub stars: 3.9K
Masked Revealby MengTo
Use when revealing content with masked motion, clipped transitions, or layered entrances.
MotionExternalGitHub stars: 7.1K
Minimalist Uiby Leonxlnx
Editorial minimal interfaces with monochrome palettes, typographic contrast, and restrained visuals.
TasteExternalGitHub stars: 105.4K