🎯

next-best-practices

🎯Skill

from raphaelsalaja/userinterface-wiki

What it does

Generates and validates recommended best practices for Next.js web application development, focusing on interface design and implementation patterns.

📦

Part of

raphaelsalaja/userinterface-wiki(15 items)

next-best-practices

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

npx skills add raphaelsalaja/userinterface-wiki --skill next-best-practices

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Overview

# A Living Manual for Better Interfaces

Knowledge should be shared. This wiki is a collection of articles, patterns, and best practices for designing and building user interfaces. It's a wiki that evolves with the field, incorporating new insights and techniques as they emerge, all for free.

Tech Stack

The backbone of this wiki is built with [Fumadocs](https://github.com/fuma-nama/fumadocs), it's a wonderful framework for creating documentation sites using Next.js and MDX.

Most if not all components are also built with [Base UI](https://base-ui.com/). This in my opinion is the best design system for building modern web applications with React.

The articles are transcribed using [Eleven Labs](https://elevenlabs.io/), a powerful text-to-speech service that produces natural-sounding voiceovers.

Writing Articles

Articles live in content/ as MDX files. Each article has its own folder with an index.mdx and optional demos/ folder for interactive examples.

If you'd like to contribute an article, open a pull request with your content. I'm happy to review and merge contributions that align with the goals of this wiki.

Articles are transcribed using [Eleven Labs](https://elevenlabs.io/). Due to API limitations, if you wish to transcribe new or updated articles, please reach out to me directly. I'll be happy to assist you with the transcription process.

Feedback & Suggestions

If you have feedback, suggestions for new articles, or improvements to existing content/website, please open an issue.

# Credits

[Jace](https://x.com/JaceThings) for early feedback and encouragement to start this project.

More from this repository10

🎯

12-principles-of-animation🎯Skill

12-principles-of-animation skill from raphaelsalaja/userinterface-wiki

🎯

to-spring-or-not-to-spring🎯Skill

to-spring-or-not-to-spring skill from raphaelsalaja/userinterface-wiki

🎯

generating-sounds-with-ai🎯Skill

Generates audio code quality checks for Web Audio API, identifying best practices and potential issues in sound synthesis implementations.

🎯

mastering-animate-presence🎯Skill

mastering-animate-presence skill from raphaelsalaja/userinterface-wiki

🎯

pseudo-elements🎯Skill

Analyzes CSS pseudo-elements and View Transitions API to enforce best practices for decorative layers, hover effects, and page transitions with precise file:line reporting.

🎯

sounds-on-the-web🎯Skill

sounds-on-the-web skill from raphaelsalaja/userinterface-wiki

🎯

morphing-icons🎯Skill

Transforms icons seamlessly by morphing SVG lines between any two icons using a consistent 3-line structural approach.

🎯

web-design-guidelines🎯Skill

Generates structured web design guidelines and best practices recommendations using Claude's AI capabilities, tailored for interface design professionals.

🎯

vercel-react-best-practices🎯Skill

Provides Claude AI with curated React best practices and implementation guidelines specifically optimized for Vercel deployment and development workflows.

🎯

vercel-react-native-skills🎯Skill

I apologize, but I cannot confidently infer what the "vercel-react-native-skills" Claude Code skill does from the README provided. The README describes a documentation wiki about user interfaces, b...