#1★ 2
claudesign
An AI-native design toolkit for Claude Design: generate full design systems, UI components, and production-ready interfaces from DESIGN.md.
UI Skills Directory
UI Skill Stars 排行
总计 110 条Top 星级 2
#2★ 34
use-of-color
Compatibility listing for use-of-color installs from AccessLint's marketplace skill set.
#3★ 34
refactor
Compatibility listing for refactor installs from AccessLint's marketplace skill set.
#4★ 34
contrast-checker
Compatibility listing for contrast-checker installs from AccessLint's marketplace skill set.
#5★ 34
audit-and-fix
Accessibility auditing and remediation workflow that combines detection, prioritization, and practical fixes for WCAG issues.
#6★ 0
swiss-design
Swiss design system skill focused on grid discipline, typography hierarchy, and clean editorial interface composition.
#7★ 0
frontend-slides
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
#8★ 0
wcag-audit-patterns
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.
#9★ 0
interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
#10★ 0
vue-testing-best-practices
Testing strategies for Vue applications, including component tests, integration tests, and reliability patterns.
#11★ 0
vue-router-best-practices
Routing architecture and navigation patterns for maintainable Vue Router applications.
#12★ 0
vue-pinia-best-practices
Patterns for clean, scalable state management in Vue apps using Pinia stores.
#13★ 0
vue-options-api-best-practices
Best practices for structuring and scaling Vue applications built with the Options API.
#14★ 0
vue-jsx-best-practices
Guidance for writing robust, type-safe, and readable Vue components using JSX.
#15★ 0
vue-debug-guides
Practical debugging workflows for diagnosing and fixing Vue reactivity, rendering, and state issues.
#16★ 0
vue-best-practices
Core Vue development best practices for component architecture, reactivity, and maintainable code.
#17★ 0
create-adaptable-composable
Create library-grade Vue composables that support plain values, refs, and getters with predictable reactivity.
#18★ 0
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.
#19★ 0
react-best-practices
Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.
#20★ 0
next-upgrade
Upgrade Next.js to the latest version using official migration guides and codemods.
#21★ 0
next-cache-components
Next.js 16 Cache Components guidance covering PPR, use cache directive, cacheLife, cacheTag, and updateTag.
#22★ 0
next-best-practices
Next.js best practices: file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, and optimization.
#23★ 0
agent-browser
Browser automation CLI for AI agents for navigation, form actions, extraction, screenshots, QA, and app testing.
#24★ 0
svelte-code-writer
Official Svelte code-writing skill focused on modern Svelte patterns, component composition, and production-ready implementations.
#25★ 0
shadcn
Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.
#26★ 0
remotion-best-practices
Domain-specific knowledge base for building videos with Remotion and React.
#27★ 0
react-router-framework-mode
React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.
#28★ 0
to-spring-or-not-to-spring
Audit animation timing choices to decide when springs versus easing curves produce better motion.
#29★ 0
sounds-on-the-web
Audit interface sound feedback for UX quality, accessibility, and practical implementation patterns.
#30★ 0
pseudo-elements
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
#31★ 0
morphing-icons
Build icon components that morph between SVG shapes with smooth, line-based transformation.
#32★ 0
mastering-animate-presence
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
#33★ 0
generating-sounds-with-ai
Audit Web Audio API code for procedural sound synthesis quality, UX decisions, and parameter best practices.
#34★ 0
12-principles-of-animation
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
#35★ 0
rams
Real-time design feedback skill focused on accessibility, spacing, typography, contrast, and component quality.
#36★ 0
typeset
Improve typography systems, hierarchy, readability, and text cadence for more intentional interfaces.
#37★ 0
shape
Plan feature UX before coding via a structured design interview that produces an actionable design brief.
#38★ 0
quieter
Tone down overly intense designs while keeping quality high and preserving hierarchy.
#39★ 0
polish
Final quality pass for spacing, alignment, and consistency to prepare UI for launch.
#40★ 0
overdrive
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
#41★ 0
optimize
Diagnose and improve interface performance across rendering, motion smoothness, assets, and load speed.
#42★ 0
layout
Fix spacing, composition, and hierarchy rhythm when UI layout feels crowded, flat, or misaligned.
#43★ 0
impeccable
Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.
#44★ 0
harden
Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.
#45★ 0
distill
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
#46★ 0
delight
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
#47★ 0
critique
Evaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.
#48★ 0
colorize
Introduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.
#49★ 0
clarify
Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
#50★ 0
bolder
Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
#51★ 0
audit
Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
#52★ 0
animate
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
#53★ 0
adapt
Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
#54★ 0
ui-ux-pro-max
Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces.
#55★ 0
react-doctor
Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.
#56★ 0
budge
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.
#57★ 0
playwright-cli
Official Playwright CLI skill for browser automation, test generation, tracing, and session-driven end-to-end testing workflows.
#58★ 0
taste-skill
Senior UI/UX frontend skill that enforces anti-slop design decisions, motion quality, and architecture discipline.
#59★ 0
stitch-skill
Semantic design-system skill for Google Stitch with strict anti-generic UI generation rules.
#60★ 0
soft-skill
High-end visual design guidance for premium typography, spacing, depth, and animation systems.
#61★ 0
redesign-skill
Audit and upgrade existing interfaces to premium visual quality while preserving product functionality.
#62★ 0
output-skill
Enforces complete, non-truncated code output and blocks placeholder or half-finished responses.
#63★ 0
minimalist-skill
Editorial minimal interfaces with monochrome palettes, typographic contrast, and restrained visuals.
#64★ 0
gpt-tasteskill
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
#65★ 0
brutalist-skill
Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
#66★ 0
oklch-skill
Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.
#67★ 0
make-interfaces-feel-better
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
#68★ 0
transitions-dev
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
#69★ 0
fixing-motion-performance
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.
#70★ 0
fixing-metadata
Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.
#71★ 0
fixing-accessibility
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.
#72★ 0
baseline-ui
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
#73★ 0
emil-design-eng
Emil Kowalski's design-engineering philosophy for UI polish, components, animation, and production-ready frontend craft.
#74★ 0
swiftui-ui-patterns
Best practices and example-driven guidance for building SwiftUI views and components. Includes tab architecture and screen composition.
#75★ 0
interface-design
Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.
#76★ 0
threejs-textures
Three.js texture workflows for maps, UV mapping, environment maps, and texture configuration.
#77★ 0
threejs-shaders
Three.js shader guidance for GLSL, ShaderMaterial, uniforms, and custom vertex and fragment effects.
#78★ 0
threejs-postprocessing
Three.js post-processing techniques with EffectComposer, bloom, depth of field, and screen-space effects.
#79★ 0
threejs-materials
Three.js material guidance for PBR, classic materials, shader materials, and material optimization.
#80★ 0
threejs-loaders
Three.js asset loading patterns for GLTF, textures, HDR assets, async loading, and progress handling.
#81★ 0
threejs-lighting
Three.js lighting guidance for light types, shadows, environment lighting, and performance tuning.
#82★ 0
threejs-interaction
Three.js interaction patterns for raycasting, controls, pointer input, and object selection.
#83★ 0
threejs-geometry
Three.js geometry patterns for built-in shapes, BufferGeometry, custom meshes, and instancing.
#84★ 0
threejs-fundamentals
Three.js scene setup guidance for cameras, renderer configuration, object hierarchy, and transforms.
#85★ 0
threejs-animation
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
#86★ 0
react-native-best-practices
React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.
#87★ 0
bencium-innovative-ux-designer
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.
#88★ 0
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.
#89★ 0
canvas-design
Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.
#90★ 0
web-design-guidelines
Review UI code for web interface guideline compliance, including accessibility and UX best practices.
#91★ 0
vueuse-functions
Apply VueUse composables to build concise, maintainable Vue and Nuxt features.
#92★ 0
vue-testing-best-practices
Vue testing guidance using Vitest, Vue Test Utils, component testing, mocking, and Playwright E2E.
#93★ 0
vue-router-best-practices
Vue Router 4 patterns covering navigation guards, route params, and route lifecycle interactions.
#94★ 0
vue-best-practices
Vue.js best practices emphasizing Composition API with script setup and TypeScript.
#95★ 0
vue
Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.
#96★ 0
vitest
Vitest testing best practices for unit tests, mocking, coverage, fixtures, and test filtering.
#97★ 0
vitepress
VitePress documentation site guidance for configuration, theming, and Markdown plus Vue content.
#98★ 0
vite
Vite configuration and plugin guidance, including SSR and Vite 8 Rolldown migration patterns.
#99★ 0
unocss
UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.
#100★ 0
turborepo
Turborepo monorepo build system guidance for pipelines, caching, filtering, CI, and package boundaries.
#101★ 0
tsdown
Bundle TypeScript and JavaScript libraries with tsdown, including declarations and multi-format builds.
#102★ 0
slidev
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
#103★ 0
pnpm
pnpm package manager guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides.
#104★ 0
pinia
Pinia state management best practices for type-safe Vue stores, getters, and actions.
#105★ 0
nuxt
Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.
#106★ 0
antfu
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
#107★ 0
web-quality-audit
Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.
#108★ 0
frontend-ui-engineering
Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.
#109★ 0
link-purpose
Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.
#110★ 0
design-lab
Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.