Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

nexus-ui-ux

Estrellas6

Forks0

Actualizado1 de marzo de 2026 a las 21:21

UI/UX development guidelines using TailwindCSS, Shadcn UI, and Lucide icons. Use this skill when designing interfaces, fixing layout bugs, implementing dark mode, or handling extension-specific UI injection.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

MAX-786

MAX-786/project-nexus

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas·SOC 15-1252

SKILL.md

readonly

name	nexus-ui-ux
description	UI/UX development guidelines using TailwindCSS, Shadcn UI, and Lucide icons. Use this skill when designing interfaces, fixing layout bugs, implementing dark mode, or handling extension-specific UI injection.

Project Nexus: UI & UX Engineering Protocol

1. Component Library (Shadcn UI)

Rule of Thumb: Never build a base component from scratch if a Shadcn UI equivalent exists (e.g., Button, Input, Card, Dialog, Popover, Sheet, Skeleton).
Class Merging: Always use the cn() utility function (combining clsx and tailwind-merge, typically located in lib/utils.ts) when applying dynamic Tailwind classes. This prevents CSS specificity conflicts.

2. Styling & Theming (TailwindCSS)

Semantic Colors: Strictly use the CSS variables defined in the globals.css theme (e.g., bg-background, text-primary, border-border, bg-muted). Do not use hardcoded color scales (like bg-blue-500 or text-gray-700) unless it is a specific, unthemed accent.
Dark Mode Support: The entire application must support dark mode seamlessly. Rely on semantic variables so colors flip automatically. If explicit overrides are needed, use the dark: variant.
Responsive Design: Build mobile-first. Default classes apply to mobile screens. Use md:, lg:, and xl: for desktop layouts. Ensure the Web Dashboard's split-screen (List Feed + Visual Graph) collapses gracefully into a tabbed view or drawer on mobile devices.

3. Browser Extension UI Specifics (Plasmo)

Style Isolation (Shadow DOM): Extension UI injected into host web pages (Content Scripts) MUST be rendered inside a Shadow DOM. This is critical. It prevents the host website's CSS from bleeding into our widget, and prevents our Tailwind classes from breaking the host site.
Z-Index Management: For the floating "Capture" widget or slide-out summary drawer, use an extreme z-index (e.g., z-[999999]) so it never gets hidden behind the host website's sticky headers or modals.

4. Animations & Interactions

Spaced Repetition UI: The flashcard review interface should feel tactile. Use CSS transforms (group-hover, scale) or framer-motion for smooth card flipping and swiping interactions.
State Feedback: Every interactive element must have defined hover:, focus:, and disabled: states. Disabled buttons should explicitly use opacity-50 cursor-not-allowed.

5. UI Debugging Protocol

Symptom: A newly added Tailwind class isn't applying at all.
- Action: Verify the file's path is included in the content array of tailwind.config.ts.
Symptom: The extension UI looks completely broken on certain websites (like Twitter or YouTube).
- Action: Confirm that Plasmo is configured to inject the compiled Tailwind CSS file directly into the Shadow Root of the content script, not the global document.head.
Symptom: Shadcn components look unstyled.
- Action: Ensure globals.css is imported at the highest level (layout.tsx for Next.js, or the root Plasmo component).

Más de este repositorio

mismo repositorio

nexus-docs-manager

MAX-786/project-nexus

Rules for creating, updating, and managing project documentation. Use this skill when analyzing Git commits, updating the README, writing API specs, or acting as the Technical Writer for Project Nexus.

2026-03-096

nexus-github-cli

MAX-786/project-nexus

Act as an autonomous project manager and lead developer. Use the GitHub CLI (`gh`) to orchestrate the entire development lifecycle: tracking tasks on Project Boards, organizing Sprints via Milestones, documenting progress via Issue Comments, and executing code changes via Pull Requests.

2026-03-046

nexus-code-quality

MAX-786/project-nexus

Rules for ESLint, Prettier, and TypeScript strictness. Use this skill when writing new files, refactoring code, or debugging build failures caused by type errors.

2026-03-046

nexus-deployments

MAX-786/project-nexus

Deployment protocols for Vercel (Next.js Web App), Chrome Web Store packaging (Plasmo Extension), and Supabase production migrations. Use this when setting up CI/CD, preparing a release, or configuring deployment environment variables.

2026-03-046

nexus-git-workflow

MAX-786/project-nexus

Guidelines for Git branching, commit messages (Conventional Commits), and Pull Request structures. Use this skill when asked to commit code, create a branch, or write a PR description.

2026-03-046

nexus-marketing-growth

MAX-786/project-nexus

Guidelines for generating marketing copy, Reddit posts, Hacker News launches, and growth strategies for Project Nexus. Use this skill when asked to write public-facing content, launch announcements, or analyze product-market fit.

2026-03-026

Project Nexus: UI & UX Engineering Protocol

1. Component Library (Shadcn UI)

Rule of Thumb: Never build a base component from scratch if a Shadcn UI equivalent exists (e.g., Button, Input, Card, Dialog, Popover, Sheet, Skeleton).

Class Merging: Always use the cn() utility function (combining clsx and tailwind-merge, typically located in lib/utils.ts) when applying dynamic Tailwind classes. This prevents CSS specificity conflicts.

2. Styling & Theming (TailwindCSS)

Semantic Colors: Strictly use the CSS variables defined in the globals.css theme (e.g., bg-background, text-primary, border-border, bg-muted). Do not use hardcoded color scales (like bg-blue-500 or text-gray-700) unless it is a specific, unthemed accent.

Dark Mode Support: The entire application must support dark mode seamlessly. Rely on semantic variables so colors flip automatically. If explicit overrides are needed, use the dark: variant.

Responsive Design: Build mobile-first. Default classes apply to mobile screens. Use md:, lg:, and xl: for desktop layouts. Ensure the Web Dashboard's split-screen (List Feed + Visual Graph) collapses gracefully into a tabbed view or drawer on mobile devices.

3. Browser Extension UI Specifics (Plasmo)

Style Isolation (Shadow DOM): Extension UI injected into host web pages (Content Scripts) MUST be rendered inside a Shadow DOM. This is critical. It prevents the host website's CSS from bleeding into our widget, and prevents our Tailwind classes from breaking the host site.

Z-Index Management: For the floating "Capture" widget or slide-out summary drawer, use an extreme z-index (e.g., z-[999999]) so it never gets hidden behind the host website's sticky headers or modals.

4. Animations & Interactions

Spaced Repetition UI: The flashcard review interface should feel tactile. Use CSS transforms (group-hover, scale) or framer-motion for smooth card flipping and swiping interactions.

State Feedback: Every interactive element must have defined hover:, focus:, and disabled: states. Disabled buttons should explicitly use opacity-50 cursor-not-allowed.

5. UI Debugging Protocol

Symptom: A newly added Tailwind class isn't applying at all.

Action: Verify the file's path is included in the content array of tailwind.config.ts.

Symptom: The extension UI looks completely broken on certain websites (like Twitter or YouTube).

Action: Confirm that Plasmo is configured to inject the compiled Tailwind CSS file directly into the Shadow Root of the content script, not the global document.head.

Symptom: Shadcn components look unstyled.

Action: Ensure globals.css is imported at the highest level (layout.tsx for Next.js, or the root Plasmo component).